من المعتاد إنشاء برنامج "Hello World" عندما تصادف لغة برمجة جديدة لأول مرة. الكود أدناه هو مثل هذا البرنامج.
<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> <Grid> <TextBlock>Hello, world!</TextBlock> </Grid> </Page>
إذا قمت بلصق XAML أعلاه في محرر Kaxaml ، واستبدال الكود الافتراضي ، سترى أن منطقة المعاينة يتم تحديثها لإظهار ما يلي:
Hello, world! دعونا نلقي نظرة على مختلف عناصر Hello World XAML. أول شيء نراه هو عقدة الجذر ، والتي في هذه الحالة هي عنصر الصفحة. لن نرى المزيد من عنصر الصفحة في المقالات المستقبلية في هذه السلسلة ، حيث أننا سنستخدم بشكل رئيسي العقد الجذرية للنافذة. عادةً ما يتم استخدام صفحة في تطبيقات WPF نمط التنقل ، في حين يتم استخدام نافذة للنوافذ ومربعات الحوار القياسية. في هذا المثال ، تكون علامة الصفحة مفيدة بسبب سلوك Kaxaml. إذا قمت بتغيير نص "الصفحة" إلى "نافذة" ، فسترى أنك بحاجة إلى الضغط على مفتاح قبل عرض Kaxaml.تتضمن عقدة الجذر مساحات أسماء XML اثنين. هذه تعمل إلى حد ما مثل استخدام التوجيهات لمساحات C #. وهي تحدد المكان الذي سيبحث فيه المستند عن عناصر التحكم والعناصر الأخرى التي تضيفها إلى XAML. مساحات الاسمين المدرجة هي تلك الافتراضية التي توفر عناصر WPF القياسية. يمكنك أيضًا الرجوع إلى مساحات الأسماء الخاصة بك باستخدام بناء جملة مماثل. لاحظ أن أحد مساحات الأسماء له اسم مستعار ، "x". عند استخدام عناصر من مساحة الاسم هذه ، سترى أننا بحاجة إلى تضمين x في تعريفات العنصر.
يعرّف عنصر الشبكة شبكة ، والتي هي عنصر تحكم تخطيط قياسي في WPF. تحدد الشبكات الأعمدة والصفوف التي تتقاطع لتكوين خلايا. يمكن إضافة عناصر التحكم إلى هذه الخلايا لإعطاء تنظيم مرئي ممتع. في مثال Hello World ، لم يتم تضمين أي أعمدة أو صفوف حتى يكون للشبكة خلية واحدة فقط.
العنصر الأخير في المثال هو TextBlock. هذا يحتوي على مقدار صغير من النص الذي يمكن أن يتضمن بعض التنسيقات. قمت بتعريف النص بين علامتي الفتح والإغلاق لعنصر XML في هذه الحالة.
بعد TextBlock هناك بعض العلامات الختامية. هذه تضمن أن XML تم تشكيله بشكل جيد. إذا لم يكن كذلك ، فلن يعمل البرنامج.
مثال اخر
على سبيل المثال ، خذ بعين الاعتبار XAML التالي. لن أصفها بالتفصيل ، حيث سنرى هذا الرمز في المقالات المستقبلية. الاختلافات بين هذا والمثال السابق هي إضافة تعريفات للصف والعمود وإدراج بعض عناصر التحكم الإضافية. لاحظ عنصر StackPanel. هذا هو عنصر تحكم تخطيط آخر. بدلاً من إظهار العناصر في الشبكة ، يتحكم المكدس عموديًا أو أفقيًا.
<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> <Grid> <Grid.ColumnDefinitions> <ColumnDefinition Width="100"/> <ColumnDefinition Width="200"/> </Grid.ColumnDefinitions> <Grid.RowDefinitions> <RowDefinition Height="auto"/> <RowDefinition Height="auto"/> <RowDefinition Height="auto"/> <RowDefinition Height="auto"/> <RowDefinition Height="auto"/> </Grid.RowDefinitions> <TextBlock Text="Forename"/> <TextBlock Grid.Row="1" Text="Surname"/> <TextBlock Grid.Row="2" Text="Age"/> <TextBlock Grid.Row="3" Text="Sex"/> <TextBox Grid.Column="1" Text="Bob"/> <TextBox Grid.Column="1" Grid.Row="1" Text="Smith"/> <TextBox Width="80" Grid.Column="1" Grid.Row="2" HorizontalAlignment="Left" Text="40"/> <StackPanel Grid.Column="1" Grid.Row="3" Orientation="Horizontal"> <RadioButton Content="Male"/> <RadioButton Content="Female"/> </StackPanel> </Grid></Page>
نتيجة الكود السابق
أحد الأسباب التي تجعل الأشخاص تحب WPF هي قدرته على إضافة التصميم إلى عناصر التحكم بطرق يصعب تحقيقها في Windows Forms. في الكود أدناه أضفت بعض التصميم الأساسي باستخدام خصائص عناصر التحكم المختلفة. يتم تعيين الخصائص باستخدام سمات XML. لقد أضفت هوامش إلى مربعات النص ، والمحاذاة العمودية إلى كتل النص والألوان إلى أزرار الاختيار.
<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> <Grid> <Grid.ColumnDefinitions> <ColumnDefinition Width="100"/> <ColumnDefinition Width="200"/> </Grid.ColumnDefinitions> <Grid.RowDefinitions> <RowDefinition Height="auto"/> <RowDefinition Height="auto"/> <RowDefinition Height="auto"/> <RowDefinition Height="auto"/> <RowDefinition Height="auto"/> </Grid.RowDefinitions> <TextBlock Text="Forename" VerticalAlignment="Center"/> <TextBlock Grid.Row="1" Text="Surname" VerticalAlignment="Center"/> <TextBlock Grid.Row="2" Text="Age" VerticalAlignment="Center"/> <TextBlock Grid.Row="3" Text="Sex" VerticalAlignment="Center"/> <TextBox Grid.Column="1" Text="Bob" Margin="5"/> <TextBox Grid.Column="1" Grid.Row="1" Text="Smith" Margin="5"/> <TextBox Width="80" Grid.Column="1" Grid.Row="2" HorizontalAlignment="Left" Text="40" Margin="5"/> <StackPanel Grid.Column="1" Grid.Row="3" Orientation="Horizontal" Margin="5"> <RadioButton Content="Male" Foreground="Blue" Margin="0 0 10 0"/> <RadioButton Content="Female" Foreground="DeepPink"/> </StackPanel> </Grid></Page>
ليست هناك تعليقات:
اضافة تعليق