الإرشادات التفصيلية: محتوى WPF styling

توضح هذه معاينة كيفية إلى يطبق styling إلى عنصر تحكم "البنية الأساسية لبرامج" العروض التقديمية Windows (WPF) التي تتم استضافتها تشغيل نموذج Windows.

في هذه الإرشادات التفصيلية, تؤدى المهام التالية:

• إنشىء المشروع.

• إنشاء WPF عنصر تحكم النوع.

• يطبق النمط على WPF عنصر تحكم.

ملاحظة

قد تختلف مربعات الحوار وأوامر القائمة التى تشاهدها الان عن تلك الموصوفة في التعليمات اعتماداً على الإعدادات النشطة أو الإصدار الخاص بك. لتغيير الإعدادات الخاصة بك, اختر إعدادات الاستيراد و التصدير ضمن القائمة أدوات . لمزيد من المعلومات، راجع العمل مع إعدادات.

المتطلبات الأساسية

تحتاج إلى المكونات التالية لاستكمال هذه الإرشادات التفصيلية:

• Visual Studio 2010.

إنشاء المشروع

الخطوة الأولى هو لإنشاء مشروع Windows Forms.

ملاحظة

عندما يستضيف WPF محتوى، يتم اعتماد المشاريع C# و Visual أساسى.

لإنشاء المشروع

• إنشاء يسمى مشروع تطبيق Windows Forms جديد في Visual أساسى أو Visual C# من StylingWpfContent. لمزيد من المعلومات، راجع كيفية القيام بما يلي: إنشاء مشروع تطبيقات Windows.

قم بإنشاء أنواع عنصر تحكم WPF

بعد إضافة نوع عنصر تحكم WPF إلى المشروع، يمكنك استضافة به في على ElementHostعنصر التحكم.

لإنشاء WPF عنصر تحكم أنواع

1. إضافة WPF جديد UserControlمشروع إلى الحل. استخدام الاسم الافتراضي عنصر تحكم اكتب UserControl1.xaml. لمزيد من المعلومات، راجع الإرشادات التفصيلية: قم بإنشاء محتوى WPF جديد في Windows Forms في وقت التصميم.

2. في عرض "تصميم"، تأكد من أن UserControl1هو المحدد. لمزيد من المعلومات، راجع كيفية: حدد "و" تحريك العناصر على سطح التصميم.

3. في الإطار خصائص التعيين القيمة Widthو Heightالخصائص إلى 200 .

4. إضافة System.Windows.Controls.Buttonعنصر تحكم UserControlثم قم بتعيين القيمة Contentخاصية إلى "إلغاء الأمر".

5. إضافة ثاني System.Windows.Controls.Buttonعنصر تحكم UserControlثم قم بتعيين القيمة Contentخاصية إلى ‏‏موافق.

6. إنشاء المشروع.

قم بتطبيق النمط WPF عنصر تحكم

يمكنك يطبق styling مختلفة إلى عنصر تحكم WPF إلى تغيير المظهر والسلوك الخاص به.

إلى تطبيق النمط إلى عنصر تحكم WPF

1. افتح Form1 في مصمم Windows Forms .

2. في إلى olbox ، انقر نقراً مزدوجاً فوق UserControl1إلى إنشاء مثيل ل UserControl1تشغيل النموذج.

   مثيل UserControl1هو التي تتم استضافتها في جديد ElementHostعنصر التحكم المسمى elementHost1.

3. في علامة ذكية لوحة ل elementHost1، انقر فوق تحرير المحتوى Hosted من المنسدلة-لأسفل القائمة.

   UserControl1فتح فيمصمم WPF.

4. في عرض XAML، قم بإدراج XAML التالية بعد <UserControl>فتح علامة.

   ينشئ هذا XAML تدرج مع حد متدرج المتباينة. عند عنصر التحكم هو النقر فوقه، يتم تم تغييره التدرجات لإنشاء مظهر زر مضغوطاً. لمزيد من المعلومات، راجع styling و Templating.

    <UserControl.Resources>
        <LinearGradientBrush x:Key="NormalBrush" EndPoint="0,1" StartPoint="0,0">
            <GradientStop Color="#FFF" Offset="0.0"/>
            <GradientStop Color="#CCC" Offset="1.0"/>
        </LinearGradientBrush>
        <LinearGradientBrush x:Key="PressedBrush" EndPoint="0,1" StartPoint="0,0">
            <GradientStop Color="#BBB" Offset="0.0"/>
            <GradientStop Color="#EEE" Offset="0.1"/>
            <GradientStop Color="#EEE" Offset="0.9"/>
            <GradientStop Color="#FFF" Offset="1.0"/>
        </LinearGradientBrush>
        <LinearGradientBrush x:Key="NormalBorderBrush" EndPoint="0,1" StartPoint="0,0">
            <GradientStop Color="#CCC" Offset="0.0"/>
            <GradientStop Color="#444" Offset="1.0"/>
        </LinearGradientBrush>
        <LinearGradientBrush x:Key="BorderBrush" EndPoint="0,1" StartPoint="0,0">
            <GradientStop Color="#CCC" Offset="0.0"/>
            <GradientStop Color="#444" Offset="1.0"/>
        </LinearGradientBrush>
        <LinearGradientBrush x:Key="PressedBorderBrush" EndPoint="0,1" StartPoint="0,0">
            <GradientStop Color="#444" Offset="0.0"/>
            <GradientStop Color="#888" Offset="1.0"/>
        </LinearGradientBrush>
        
        <Style x:Key="SimpleButton" TargetType="{x:Type Button}" BasedOn="{x:Null}">
            <Setter Property="Background" Value="{StaticResource NormalBrush}"/>
            <Setter Property="BorderBrush" Value="{StaticResource NormalBorderBrush}"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type Button}">
                        <Grid x:Name="Grid">
                            <Border x:Name="Border" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Padding="{TemplateBinding Padding}"/>
                            <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" RecognizesAccessKey="True"/>
                        </Grid>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsPressed" Value="true">
                                <Setter Property="Background" Value="{StaticResource PressedBrush}" TargetName="Border"/>
                                <Setter Property="BorderBrush" Value="{StaticResource PressedBorderBrush}" TargetName="Border"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </UserControl.Resources>

1. يطبق SimpleButtonالنمط المحدد في الخطوة السابقة 'إلغاء الأمر' زر بواسطة إدراج XAML التالية في <Button>علامة من "إلغاء الأمر" زر.

   Style="{StaticResource SimpleButton}
   

   سوف تشبه إعلان زر XAML التالية.

<Button Height="23" Margin="41,52,98,0" Name="button1" VerticalAlignment="Top"
                Style="{StaticResource SimpleButton}">Cancel</Button>

1. إنشاء المشروع.

2. افتح Form1 في مصمم Windows Forms .

3. النمط الجديد هو تطبيقها على عنصر تحكم الزر.

4. من قائمة تصحيح ، تحديد تصحيح يبدأ لتشغيل تطبيق.

5. انقر فوق الزرين "‏‏موافق" و "إلغاء الأمر" و عرض الاختلافات.

راجع أيضًا:

المرجع

ElementHost

WindowsFormsHost

المبادئ

نظرة عامة حول XAML

styling و Templating

موارد أخرى

ترحيل و إمكانية التشغيل المتداخل

استخدام عناصر تحكم WPF

مصمم WPF