UWP (Universal Windows Platform) مقدمة — البدء السريع
Categories:
- 1. Xaml
- 2. MVVM
- 3. التفاعل بين ViewModel و Model
- 4. التفاعل بين View و ViewModel
- 5. (View و ViewModel) تنفيذ إشعار الرسائل – INotifyPropertyChanged
- 6. (View و ViewModel) ربط ListView بمصدر ينفذ إشعار الرسائل – ObservableCollection
- 7. (View) قالب Item في ListView (DataTemplate | UserControl)
- 8. (ViewModel و Model) تحويل البيانات – IValueConverter
- 9. (View) تعديل نمط (Style) عنصر التحكم
- 10. استخدام Panel
- 11. (View) واجهة مستخدم متكيفة (Adaptive UI)
- 12. مبادئ التخطيط
- 13. التدويل (Localization)
- 14. الاصطلاحات التسموية (Naming Conventions)
- 15. ملاحظات
1. Xaml
1.1. نظرة عامة على XAML
- XAML نظرة عامة
- تُستخدم بشكل أساسي لإنشاء عناصر واجهة المستخدم (UI) المرئية.
- البنية الأساسية لـ Xaml تستند إلى XML.
- تعريف اسم مستعار لـ namespace:
xmlns:controls="using:Common.Controls"
- استخدام الفئات (Classes) المعلنة في namespace:
<controls:MyControl />
الموارد (Resources) القابلة لإعادة الاستخدام،
x:Key
<Style x:Key="TextBlock_Style" />
- اسم عنصر التحكم (Control)،
x:Name
Xaml:
<MyControl x:Name="myControl" />
C#:
private MyControl myControl;
التدويل
x:Uid
<TextBlock x:Uid="sampleText" />
1.2. أبسط عناصر التحكم (Control) – TextBlock، Button
<Page x:Class="MyPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<StackPanel>
<TextBlock Text="UWP Introduction" />
<Button Content="UWP Introduction" Click="Button_Click" />
</StackPanel>
</Page>
2. MVVM

- يجب أن يحتوي View على محتوى عرض UI فقط، ويتم إنجاز معظم View باستخدام لغة Xaml؛
- يجب ألا يحتوي ViewModel على منطق معالجة الأعمال (Business Logic) قدر الإمكان، بل يجب إتمام الإجراءات عن طريق استدعاء الدوال الموجودة في Model؛
- يجب أن يحتوي Model على جميع بيانات الأعمال والمنطق قدر الإمكان، وأن لا يعتمد على View و ViewModel؛
3. التفاعل بين ViewModel و Model
3.1. ViewModel يتحكم في بيانات Model
ViewModel:
public class ViewModel
{
private Model model;
private ChangeA()
{
this.model.A = "A";
}
}
Model:
public class Model
{
public string A { get; set; }
public string B { get; set; }
}
3.2. Model يُبلغ ViewModel – event
ViewModel:
public class ViewModel
{
private Model model;
private ChangeA()
{
r.BEventArgs += this.Handler;
}
private void Handler(object sender, EventArgs e)
{
AnyActions();
}
}
Model:
public delegate void BChangedHandler(object sender, EventArgs e);
public class Model
{
public string A { get; set; }
private string _B;
public string B
{
get { return this._B; }
set
{
this._B = value;
if (BEventArgs != null)
{
BEventArgs(this, new EventArgs());
}
}
}
public event BChangedHandler BEventArgs;
}
4. التفاعل بين View و ViewModel
4.1. ربط البيانات (Data Binding)
- نظرة عامة على ربط البيانات
- يمكن ربط DependencyProperty فقط
- الربط بـ Property عامة (Public)
- كن حذراً أثناء إعادة البناء (Refactoring)
4.1.1. الربط في ViewModel
View:
<TextBlock Text={Binding SampleText} />
ViewModel:
public string SampleText { get; set; }
4.1.2. الربط في Control آخر
View:
<TextBlock x:Name="TextBlock1" Text="SampleText" />
<Button Content="{Binding ElementName=TextBlock1, Path= Text}" />
4.1.3. تحديد DataContext
public ViewModelClass ViewModel { get; set; }
...
SpecifiedControl.DataContext = ViewModel;
...
5. (View و ViewModel) تنفيذ إشعار الرسائل – INotifyPropertyChanged
عندما يتغير SampleText، سيتم إبلاغ DependencyProperty المرتبط بهذه الخاصية
public class MyControlViewModel : INotifyPropertyChanged
{
public event PropertyChangedEventHandler PropertyChanged;
public void Notify(string propName)
{
if (this.PropertyChanged != null)
{
PropertyChanged(this, new PropertyChangedEventArgs(propName));
}
}
private string _sampleText;
public string SampleText
{
get
{
return _sampleText;
}
set
{
_sampleText = value;
Notify(nameof(SampleText));
}
}
}
أو وراثة ViewModelBase
public class ViewModelBase : INotifyPropertyChanged
{
public event PropertyChangedEventHandler PropertyChanged;
public void Notify(string propName)
{
if (this.PropertyChanged != null)
{
PropertyChanged(this, new PropertyChangedEventArgs(propName));
}
}
}
6. (View و ViewModel) ربط ListView بمصدر ينفذ إشعار الرسائل – ObservableCollection

تنفيذ الربط في ListView إلى ItemSource لديه إمكانية إشعار بالرسائل
View:
<ListView ItemsSource="{Binding Items}">
ViewModel:
public ObservableCollection<Recording> Items { get; set; }
- يرسل ObservableCollection إشعاراً فقط عند إضافة/إزالة Item أو عند تحديث القائمة بأكملها؛
- إذا كنت بحاجة إلى إبلاغ الواجهة عند تغير محتوى item (Recording)،则需要 أن ينفذ Recording INotifyPropertyChanged.
7. (View) قالب Item في ListView (DataTemplate | UserControl)
7.1. DataTemplate
View:
<ListView ItemsSource="{Binding Items}">
<ListView.ItemTemplate>
<DataTemplate DataType="local:Recording">
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding A}" />
<TextBlock Text="{Binding B}" />
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
ViewModel:
public ObservableCollection<RecordingViewModel> Items { get; set; }
public class RecordingViewModel : INotifyPropertyChanged
{
...
تنفيذ INotifyPropertyChanged
...
private Recording _recording;
public string A
{
get
{
return this._recording.A;
}
set
{
this._recording.A = value;
Notify(nameof(A));
}
}
public string B { get; set; } = this._recording.B;
public RecordingViewModel (Recording recording)
{
this._recording = recording;
}
}
Model:
public class Recording
{
public string A { get; set; }
public string B { get; set; }
public string C { get; set; }
... ...
}
مقارنة:

7.2. UserControl
7.2.1. DependencyProperty
- نظرة عامة على خصائص التبعية
- يمكن ربط DependencyProperty فقط بخصائص أخرى، والربط فقط هو الذي يمكنه تحقيق إشعار بالرسائل إلى View
- لديه أولوية
View:
<control:MyControl Text="App is on searching" IsSearching="{Binding ViewModel.IsSearching}" />
ViewModel:
public class MyControl
{
...
public static readonly DependencyProperty IsSearchingProperty =
DependencyProperty.Register
(
"IsSearching", typeof(Boolean),
typeof(MyControl), null
);
public bool IsSearching
{
get { return (bool)GetValue(IsSearchingProperty); }
set { SetValue(IsSearchingProperty, value); }
}
...
}
8. (ViewModel و Model) تحويل البيانات – IValueConverter
يمكنك استخدام IValueConverter لتحويل البيانات بين ViewModel و Model.
public class ShowAllButtonVisibilityConverter:IValueConverter
{
public object Convert(object value, Type targetType, object parameter, string language)
{
if (value is IList)
{
int count = (value as IList).Count;
if (count > 3)
{
return Windows.UI.Xaml.Visibility.Visible;
}
}
return Windows.UI.Xaml.Visibility.Collapsed;
}
public object ConvertBack(object value, Type targetType, object parameter, string language)
{
if (value is IList)
{
int count = (value as IList).Count;
if (count > 3)
{
return Windows.UI.Xaml.Visibility.Visible;
}
}
return Windows.UI.Xaml.Visibility.Collapsed;
}
9. (View) تعديل نمط (Style) عنصر التحكم
9.1. تخصيص Style داخل Control
View:
<TextBlock Foreground="Red" Text="SampleText" />
9.2. استخدام Style موحد – ResourceDictionary
View:
<Window.Resources>
<ResourceDictionary>
<Style TargetType="TextBlock" x:Key="ImportantText">
<Setter Property="Foreground" Value="Red" />
</Style>
</ResourceDictionary>
</Window.Resources>
...
<TextBlock Text="SampleText" Style={StaticResource ImportantText} />
9.3. استخدام ThemeResource
View:
<Window.Resources>
<ResourceDictionary>
<ResourceDictionary.ThemeDictionaries>
<ResourceDictionary x:Key="Light">
<Style TargetType="TextBlock" x:Key="ImportantText">
<Setter Property="Foreground" Value="Red" />
</Style>
</ResourceDictionary>
<ResourceDictionary x:Key="Dark">
<Style TargetType="TextBlock" x:Key="ImportantText">
<Setter Property="Foreground" Value="Yellow" />
</Style>
</ResourceDictionary>
<ResourceDictionary x:Key="HighContrast">
<Style TargetType="TextBlock" x:Key="ImportantText">
<Setter Property="Foreground" Value="Black" />
</Style>
</ResourceDictionary>
</ResourceDictionary.ThemeDictionaries>
</ResourceDictionary>
</Window.Resources>
...
<TextBlock Text="SampleText" Style={ThemeResource ImportantText} />
10. استخدام Panel
10.1. Grid
المميزات:
- الافتراضي Height/Width يساوي العنصر الأصل؛
الاقتراحات:
- تحديد حجم تخطيط العناصر الفرعية في Grid؛
- العرض حسب النسبة؛
10.2. StackPanel
المميزات:
- يمكنه تجاوز حدود العنصر الأصل؛
- يتغير Height أو Width مع العناصر الموجودة في Panel؛
الاقتراحات:
- استخدام Padding والنسب بمرونة؛
- إعطاء قيمة لـ Width أو Height الخاص بـ StackPanel في العنصر الأصل لمنع تجاوز Control للحدود؛
11. (View) واجهة مستخدم متكيفة (Adaptive UI)
- استخدام VisualStateManager.VisualStateGroup
<VisualStateGroup>
<VisualState x:Name="WideLayout">
<VisualState.StateTriggers>
<AdaptiveTrigger x:Name="WideLayoutTrigger" MinWindowWidth="1280" />
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="SystemUpdateSideGrid.Width" Value="800" />
<Setter Target="SystemUpdateSideGrid.Grid.Row" Value="0" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="MidLayout">
<VisualState.StateTriggers>
<AdaptiveTrigger x:Name="MidLayoutTrigger" MinWindowWidth="700" />
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="SystemUpdateSideGrid.Width" Value="400" />
<Setter Target="SystemUpdateSideGrid.Grid.Row" Value="1" />
</VisualState.Setters>
</VisualState>
...
</VisualStateGroup>
12. مبادئ التخطيط
- لا تحدد أبعاد العناصر بشكل صريح؛
- لا تستخدم إحداثيات الشاشة لتحديد موقع العناصر؛
- العناصر الفرعية في الحاوية تتشارك المساحة المتاحة؛
- حاويات تخطيط قابلة للتعشيش (Nestable)؛
13. التدويل (Localization)
- استخدام x:Uid، معرف فريد للعنصر
<TextBlock x:Uid="S_TextBlock1" />
- استخدام ملف الموارد (Resources File)
<data name="S_TextBlock1.Text" xml:space="preserve">
<value>Sample text</value>
</data>
14. الاصطلاقات التسموية (Naming Conventions)
الجمل الكبير (Big camel-case): firstName
الجمل الصغير (Little camel-case): FirstName
- Class: big camel-case
- Property: big camel-case
- Field: little camel-case مع بادئة “_”
- Control in Xaml: little camel-case
15. ملاحظات
- كن حذراً عند إعادة تسمية Property في ViewModel، لأن أسماء الربط (Binding) في Xaml لن تتبع إعادة البناء (Refactoring)؛