التنسيق و القولبة

تنسيق و قولبةWindows Presentation Foundation (WPF) تشير إلى مجموعة من المميزات (أنماط، و قوالب، و مشغّلات، و لوحات العمل) التي تسمح للمطورين والمصممين لإنشاء تأثيرات مرئية بشكل إجباري "و" لإنشاء مظهر متناسقة للمنتج الخاص بهم. وتشغيل الرغم من أن المطورين والمصممين يمكن cusإلىmize بشكل مكثف تشغيل أساس تطبيق بتطبيق، طراز styling و templating قوي ضروري إلى السماح للصيانة ومشاركة المظهر داخل وبين التطبيقات. Windows Presentation Foundation (WPF)يوفر هذا الطراز.

ميزة أخرى من طراز تنسيق WPFهى فصل العرض التقديمي و المنطق. وهذا يعني أنه يمكن للمصممين العمل على مظهر التطبيق باستخدام XAML فقط في نفس وقت عمل المطورين على منطق البرمجة باستخدام C# أو Visual Basic.

تركز تلك النظرة العامة حول هذا على تنسيق و قولبة أوجه التطبيق و لا يناقش أية مفاهيم لربط البينات. لمزيد من المعلومات حول تخزين البيانات في ذاكرة التخزين المؤقت، راجع نظرة عامة لربط البيانات.

بالإضافة إلى ذلك، فإنه من المهم فهم الموارد التي تمكن من إعادة استخدام الأنماط والقوالب. لمزيد من المعلومات حول هذه الموارد، راجع نظرة عامة حول الموارد.

يشتمل هذا الموضوع على الأقسام التالية.

• نموذج تنسيق و قولبة
• أساسيات النمط
• قوالب البينات
• قوالب عناصر التحكم
• المشغّلات
• الموارد المشاركة والسمات
• موضوعات ذات صلة

نموذج تنسيق و قولبة

أمثلة التعليمات البرمجية المستخدمة في هذه النظرة العامة تستند إلى نموذج صور بسيطة، و هو مبين في التوضيح التالي:

يستخدم هذا النموذج للصور البسيطة التنسيق و القولبة لإنشاء خبرة مستخدم بشكلٍ مقنع. يحتوي هذا النموذج على عنصرين TextBlock و عنصر التحكم ListBox المرتبط بقائمة الصور. كنموذج كامل،راجع مقدمة إلى نموذج التنسيق و القولبة.

أساسيات النمط

يمكنك اعتبار Style كـ طريقة ملائمة لتطبيق مجموعة من قيم الخاصية إلى عنصر واحد أو أكثر. على سبيل المثال، ضع في اعتبارك عناصر TextBlock التالية ومظهرهم الافتراضي :

<TextBlock>My Pictures</TextBlock>
<TextBlock>Check out my new pictures!</TextBlock>

يمكنك تغيير المظهر الافتراضي بواسطة إعداد الخصائص، مثل FontSize و FontFamily ، لكل عنصر TextBlock مباشرة. ومع ذلك، إذا كنت تريد عناصرTextBlock الخاصة بك لمشاركة بعض الخصائص, يمكنك إنشاء Style في مقطع ملفResources الخاص بك XAML كما هو موضح هنا:

<Window.Resources>


...


<!--A Style that affects all TextBlocks-->
<Style TargetType="TextBlock">
  <Setter Property="HorizontalAlignment" Value="Center" />
  <Setter Property="FontFamily" Value="Comic Sans MS"/>
  <Setter Property="FontSize" Value="14"/>
</Style>


...


</Window.Resources>

عند تعيين TargetType للنمط الخاص بك للنوع TextBlock يطبق هذا النمط لكافة عناصر TextBlock في الإطار.

الآن تظهر عناصرTextBlock كما يلي:

توسيع الأنماط

ربما تريد عنصرى TextBlock مشاركة بعض قيم الخصائص، مثل FontFamily و HorizontalAlignment المتركزة، ولكنك تريد أيضاً النص "My Pictures" أن يكون له بعض الخصائص الإضافية. يمكنك القيام بذلك عن طريق إنشاء نمط جديد يستند إلى النمط الأول كما هو موضح هنا:

<Window.Resources>


...


<!--A Style that extends the previous TextBlock Style-->
<!--This is a "named style" with an x:Key of TitleText-->
<Style BasedOn="{StaticResource {x:Type TextBlock}}"
       TargetType="TextBlock"
       x:Key="TitleText">
  <Setter Property="FontSize" Value="26"/>
  <Setter Property="Foreground">
  <Setter.Value>
      <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
        <LinearGradientBrush.GradientStops>
          <GradientStop Offset="0.0" Color="#90DDDD" />
          <GradientStop Offset="1.0" Color="#5BFFFF" />
        </LinearGradientBrush.GradientStops>
      </LinearGradientBrush>
    </Setter.Value>
  </Setter>
</Style>


...


</Window.Resources>

لاحظ أن النمط السابق قد حصل على x:Key. لتطبيق النمط، قم بتعيين خاصية Style على TextBlock الخاص بك إلى القيمةx:Key كما هو موضح هنا:

<TextBlock Style="{StaticResource TitleText}" Name="textblock1">My Pictures</TextBlock>
<TextBlock>Check out my new pictures!</TextBlock>

يحتوي نمط TextBlock هذا على قيمةHorizontalAlignment لل Center ، FontFamilyو قيمة Comic Sans MS ، FontSize و قيمة 26 ، و قيمة Foregroundمعينة لLinearGradientBrush كما هو موضح في المثال. لاحظ أنه يبطل إشعار قيمةFontSize للنمط الأساسي. إذا كان هناك أكثر من Setter معينة لنفس الخاصية في Style ،Setter التى تم التصريح بها مؤخراً تأخذ الأسبقية.

يُظهر التالية كيف تبدو عناصر TextBlock :

نمط TitleText هذا يوسع النمط الذي تم إنشاؤه لـلنوع TextBlock . يمكنك أيضاً توسيع نمط يحتوي على x:Key باستخدام قيمة x:Key. لمزيد من المعلومات وللحصول على مثال راجع خاصية BasedOn.

علاقة خاصية TargetType و مفتاح سمة:x

كما هو موضح في المثال الأول ،إعداد خاصيةTargetTypeإلى TextBlock دون تعيين نمط x:Key يؤدي إلى تطبيق النمط على كافة عناصر TextBlock. في هذه الحالة، يتم تعيينx:Key ضمنيًا إلى{x:Type TextBlock}. وهذا يعني أنه إذا قمت بتعيين قيمة x:Key إلى أي شيء غير{x:Type TextBlock} ، Style لن تطبق على كافة عناصر TextBlock تلقائياً. بدلاً من ذلك، يجب أن يطبق النمط (باستخدام قيمةx:Key) لعناصر TextBlock بشكل صريح. إذا كان النمط الخاص بك في مقطع الموارد و لم يتم تعيين خاصيةTargetType على النمط الخاص بك إذاً يجب توفير x:Key.

بالإضافة إلى توفير قيمة افتراضية الى x:Key ،تعيّن خاصية TargetTypeالنوع الذي يتم تطبيق خصائص الضبط. عليها. إذا لم تحدد TargetType ، يجب تأهيل الخصائص في كائنات Setter الخاصة بك باسم فئة باستخدام بناء الجملة Property="ClassName.Property". على سبيل المثال، بدلاً من تعيين Property="FontSize" ، يجب عليك تعيين Property الى "TextBlock.FontSize" أو "Control.FontSize".

لاحظ أيضاً أن العديد من عناصر التحكم WPF تتكون من تركيبة من عناصر تحكم WPF أخرى . إذا قمت بإنشاء نمط يطبق على كافة عناصر التحكم من هذا النوع فقد تتلقى نتائج غير متوقعة. على سبيل المثال، إذا قمت بإنشاء نمط يستهدف النوع TextBlock في Window ، يتم تطبيق النمط لكافة عناصر التحكم TextBlock في الإطار ، حتى إذا كان TextBlock جزءاً من عنصر تحكم آخر، مثل ListBox.

الأنماط و الموارد

يمكنك استخدام النمط على أي عنصر مشتق من FrameworkElement أو FrameworkContentElement. إن الأسلوب الأكثر شيوعاً لتصريح نمط ما كمورد في مقطع Resources في ملفXAML كما هو موضح في الأمثلة السابقة. لأن الأنماط تعتبر موارد, فإنها تستخدم نفس قواعد النطاق التى تطبيق لكافة الموارد; حيث يمكنك تعريف نمط مؤثر حيث يمكن تطبيق النمط. على سبيل المثال، إذا تم تعريف النمط في العنصر الجذر لملف تعريف التطبيق XAMLالخاص بك , يمكن استخدام النمط من أي مكان في التطبيق. إذا أنشئت تطبيق تنقل و قمت بتعريف النمط في أحد ملفات XAMLللتطبيق، يمكن استخدام النمط فقط في ملفXAML . للحصول على المزيد من المعلومات حول قواعد مجال الموارد، راجع نظرة عامة حول الموارد.

بالإضافة إلى ذلك، يمكنك العثور على المزيد من المعلومات حول أنماط الموارد في موارد المشتركة والسمات لاحقًا في هذه النظرة العامة.

تعيين الأنماط برمجياً

لتعيين نمط مسمى إلى عنصرما برمجياً، يجب الحصول على النمط من مجموعة الموارد وتعيينها الى Styleللعنصر . لاحظ أن العناصر في مجموعة موارد تكون من النوع Object. لذلك، يجب تحويل نمط استردادها إلى Style قبل تعيينها إلى خاصية Style. على سبيل المثال،لتعيين نمطTitleText المعرف على TextBlock المسمى textblock1 ، للقيام بما يلي:

textblock1.Style = CType(Me.Resources("TitleText"), Style)

textblock1.Style = (Style)(this.Resources["TitleText"]);

لاحظ أنه بمجرد تطبيق نمط ما عليه،يغلق ولا يمكن تغييره. إذا كنت تريد صواب بشكل حيوي تغيير نمط تم تطبيقه بالفعل, يجب عليك إنشاء نمط جديد صواب استبدال موجودة. لمزيد من المعلومات، انظر الخاصية IsSealed.

يمكنك انشاء كائن يختار نمط يتم تطبيقه استناداً إلى منطق مخصص. لمشاهدة مثال،راجع المثال الموفر لفئة StyleSelector.

الروابط، و الموارد الديناميكية، و معالجات الحدث

ملاحظة امكنية استخدام خاصية Setter.Value لتحديد ربط ملحق علامات أو ملحق علامات DynamicResource. لمزيد من المعلومات، راجع أمثلة خاصية Setter.Value.

حتى الآن تناقش هذه النظرة العامة ستخدام المعينات فقط لتعيين قيمة خاصية ما. يمكنك أيضاً تحديد معالجات الحدث في النمط. لمزيد من المعلومات، راجع EventSetter.

قوالب البينات

يوجد في نموذج التطبيق هذا عنصر تحكمListBoxمنضم إلى قائمة الصور:

<ListBox ItemsSource="{Binding Source={StaticResource MyPhotos}}"
         Background="Silver" Width="600" Margin="10" SelectedIndex="0"/>

يبدوListBox هذا حالياً مثل الشكل التالي:

تحتوي معظم عناصر التحكم نوعاً ما من المحتوى، و هذا المحتوى غالبًا ما يأتي من البيانات التي كنت تقوم بالربط بـها. في هذه العينة، البينات هي قائمة الصور. في WPF ، استخدم DataTemplate لتعريف التمثيل المرئي للبينات. بشكل أساسي, ما تضعه في DataTemplate يحدد كيف تبدو البينات في تقديم التطبيق

في نموذج التطبيق الخاص بك،يحتوي كل كائن Photo مخصص على خاصية Sourceمن نوع السلسلة التي تحدد مسار ملف الصورة. حالياً، تظهر كائنات الصورة كمسارات الملفات.

إنشاء للصور يظهر كصور DataTemplate كمورد:

<Window.Resources>


...


<!--DataTemplate to display Photos as images
    instead of text strings of Paths-->
<DataTemplate DataType="{x:Type local:Photo}">
  <Border Margin="3">
    <Image Source="{Binding Source}"/>
  </Border>
</DataTemplate>


...


</Window.Resources>

لاحظ أن خاصية DataType تشبه جداً خاصية TargetTypeالخاصة ب Style. إذا كان DataTemplateالخاص بك موجود في مقطع الموارد ، عند تحديد خاصية DataType إلى نوع و عدم تعيين x:Keyلها ، يتم تطبيق DataTemplate كلما ظهرت هذا النوع. لديك الخيار دائماً لتعيين DataTemplateب x:Key ثم قم بتعيينه ك StaticResource للخصائص التي تأخذ أنواع DataTemplate،مثل خاصية ItemTemplate أو خاصية ContentTemplate.

بشكل أساسي, يعرّفDataTemplate في المثال أعلاه أنه عند وجود كائن Photo، يجب أن تظهر كـ Image داخل Border. مع DataTemplateهذا ، يبدو التطبيق الخاص بنا الآن مثل هذا:

يوفر طراز قولبة البيانات مميزات أخرى. على سبيل المثال، إذا كنت تعرض بيانات مجموعة تحتوي على مجموعات أخرى باستخدام HeaderedItemsControl اكتب مثل Menu أو TreeView ، يوجد HierarchicalDataTemplate. ميزة أخرى لقولبة البيانات هىDataTemplateSelector, التي تسمح لك باختيار DataTemplate للاستخدام بناءً على منطق مخصص. لمزيد من المعلومات، راجع نظرة عامة حول قولبة البيانات ، والتي توفر مناقشة تفصيلية أكثر عن مميزات قولبة البيانات المختلفة.

قوالب عناصر التحكم

فى WPF،ControlTemplateلعنصرالتحكم يغرف مظهر عنصر التحكم. يمكنك تغيير بنية و مظهر عنصر التحكم بواسطة تعريف ControlTemplate جديدة لعنصر التحكم. في كثير من الحالات، يعطيك هذا المرونةً الكافية بحيث لا يلزم كتابة عناصر التحكم المخصصة الخاصة بك. لمزيد من المعلومات، راجع تخصيص مظهر عنصر تحكم موجود قبل إنشاء ControlTemplate.

المشغّلات

إجراءات تعيين خصائص المشغل أو بدء التشغيل، مثل الحركة، عندما تتغير قيمة الخاصية أو عند حدوث حدث ما. Style ،ControlTemplate ، وDataTemplate تحتوي كافة على خاصيةTriggersالتي يمكن أن تحتوي على مجموعة من المشغلات. توجد عدة أنواع من المشغلات.

مشغلات الخصائص

Trigger الذي يعين قيم الخصائص أو بدء تشغيل الإجراءات استناداً إلى قيمة الخاصية التى يتم استدعاءها تسمى مشغّل الخصائص.

لمناقشة كيفية استخدام مشغلات الخصائص، يمكنك جعل كل ListBoxItem شفافة جزئياً ما لم يتم تحديدها. يعين النمط التالي قيمة Opacity الخاصة ب ListBoxItem إلى 0.5. عندما تكون خاصية IsSelected true ، على الرغم من ذلك، يتم تعيين Opacity إلى 1.0:

<Style TargetType="ListBoxItem">
  <Setter Property="Opacity" Value="0.5" />
  <Setter Property="MaxHeight" Value="75" />
  <Style.Triggers>
    <Trigger Property="IsSelected" Value="True">
        <Setter Property="Opacity" Value="1.0" />
    </Trigger>


...


  </Style.Triggers>
</Style>

يستخدم هذا المثال Trigger لتعيين قيمة الخاصية، ولكن لاحظ أن فئة Trigger لها أيضًا EnterActions و خصائص ExitActions التي تمكن المشغل من تنفيذ الإجراءات.

لاحظ أن خاصية MaxHeightالخاصة ب ListBoxItemقد تم تعيينها الى 75. في التوضيح التالي، العنصر الثالث هو العنصر المحدد:

EventTriggers و Storyboards

نوع آخر من المشغل هو EventTrigger ، الذي يبدأ مجموعة من الإجراءات استناداً إلى حدوث الحدث. على سبيل المثال، تحدد كائناتEventTriggerالتالية أنه عند دخول مؤشر الماوس ListBoxItem ، تتحرك خاصية MaxHeight إلى قيمة90 عبر 0.2 فترة ثانية. عند تحريك الماوس بعيداً عن العنصر، ترجع الخاصية الى القيمة الأصلية لمدة 1ثانية. لاحظ كيفية عدم ضروري تحديد قيمة Toالخاصة بحركة MouseLeave . وهذا بسبب أن الحركة قادرة على تعقّب القيمة الأصلية.

        <EventTrigger RoutedEvent="Mouse.MouseEnter">
          <EventTrigger.Actions>
            <BeginStoryboard>
              <Storyboard>
                <DoubleAnimation
                  Duration="0:0:0.2"
                  Storyboard.TargetProperty="MaxHeight"
                  To="90"  />
              </Storyboard>
            </BeginStoryboard>
          </EventTrigger.Actions>
        </EventTrigger>
        <EventTrigger RoutedEvent="Mouse.MouseLeave">
          <EventTrigger.Actions>
            <BeginStoryboard>
              <Storyboard>
                <DoubleAnimation
                  Duration="0:0:1"
                  Storyboard.TargetProperty="MaxHeight"  />
              </Storyboard>
            </BeginStoryboard>
          </EventTrigger.Actions>
        </EventTrigger>

لمزيد من المعلومات، راجع نظرة عامة حول لوحات العمل.

في التوضيح التالي، يشير الماوس الى العنصر الثالث:

multiTriggers و DataTriggers MultiDataTriggers

بالإضافة إلى Triggerو EventTrigger، هناك أنواع غير ذلك من مشغلات. MultiTriggerيسمح لك ب التعيين قيم الخصائص تستند شروط متعددة. استخدام DataTrigger و MultiDataTrigger عندما تكون خاصية الشرط الخاص بك هى البيانات-المنضمة.

الموارد المشاركة والسمات

قد يكون لدى التطبيق النموذجي Windows Presentation Foundation (WPF) عدة موارد لواجهات المستخدم (UI) التي يتم تطبيقها من خلال التطبيق. إجمالاً، يمكن اعتبار هذه المجموعة من موارد السمة الخاصة بالتطبيق. Windows Presentation Foundation (WPF)توفير الدعم لحزم واجهة المستخدم الموارد (واجه المستخدم) كسمة باستخدام قاموس مورد المغلفةResourceDictionaryclass.

يتم تعريف سماتWindows Presentation Foundation (WPF) باستخدام آلية التنسيق و القولبة التي تكشفهاWindows Presentation Foundation (WPF) لتخصيص المرئيات لأي عنصر.

موارد السمةWindows Presentation Foundation (WPF) المخزنة في قواميس الموارد المضمنة. يجب تضمين قواميس الموارد هذه داخل تجميع موقع، و يمكن إما تضمينها في نفس التجميع كتعليمات برمجية أو في تجميع جنباً إلى جنب. في حالة PresentationFramework.dll التجميع الذي يحتوي على عناصر تحكم Windows Presentation Foundation (WPF)،و موارد السمة في سلسلة من التجميع جنباً جنب

تصبح السمة آخر مكان للبحث عند البحث عن نمط عنصرما. بشكل عام، البحث سيبدأ عن طريق ارشاد بحث شجرة العنصر لأعلى عن مورد مناسب ثم البحث في مجموعة موارد التطبيق وأخيراً استعلام النظام. هذا يعطي لمطوري التطبيقات فرصة إعادة تعريف النمط لأي كائن في الشجرة أو مستوى التطبيق قبل الوصول إلى السمة.

يمكنك تعريف قواميس الموارد كملفات فردية تتيح لك إعادة استخدام السمة عبر تطبيقات متعددة. يمكنك أيضاً إنشاء سمات يمكن تمريرها بواسطة تعريف عدة قواميس توفر نفس أنواع الموارد ولكن بقيم مختلفة. اعادة تعريف هذه الأنماط أو موارد أخرى عند مستوى التطبيق هو الأسلوب المستحسن لـتنسيق أحد تطبيقات.

لمشاركة مجموعة من الموارد, بما في ذلك الأنماط والقوالب عبر التطبيقات ، يمكنك إنشاء ملف XAML وتعريف ResourceDictionary. على سبيل المثال، إلقى نظرة على الرسم التوضيحي التالي الذى يُظهر جزء من تنسيقبواسطة نموذج ControlTemplates:

إذا نظرت في ملفات XAML في العينة ، ستلاحظ أن كافة الملفات تحتوي على الإجراءات التالية:

<ResourceDictionary.MergedDictionaries>
  <ResourceDictionary Source="Shared.xaml" />
</ResourceDictionary.MergedDictionaries>

إنها مشاركة shared.xaml ، الذي يحدد ResourceDictionary التي تحتوي على مجموعة من الموارد و فرشاة الموارد التى تمكّن عناصر التحكم في النموذج أن يكون لها مظهر متناسق.

لمزيد من المعلومات، راجع قواميس الموارد المدمجة.

إذا كنت تقوم بإنشاء سمة لعنصر التحكم المخصص الخاص بك, راجع مقطع مكتبة عناصر التحكم الخارجية الخاصة بنظرة عامة على تأليف التحكم.

راجع أيضًا:

المهام

كيفية القيام بما يلي: البحث عن العناصر المنشأة ل ControlTemplate

كيفية القيام بما يلي: البحث عن عناصر منشأة من DataTemplate

المبادئ

حزمة ال URIفى WPF