نظرة عامة حول عناصر التحكم

مقالة
11/01/2010

Windows Presentation Foundation (WPF) يأتي مع العديد من مكونات واجهة المستخدم الشائعة المستخدمة في كل تطبيقات Windows تقريباً, مثلButton ،Label ،TextBox ،Menu ، وListBox. من وجهة تاريخية، هذه الكائنات تم الإشارة إليها كعناصر التحكم. فى حين WPF SDيستمر فى استخدام المصطلح "تحكم" لكى يعني بسهولة أي فئة يمثل كائن مرئي في تطبيق ما، فإنه من المهم ملاحظة أن الفئات لا تحتاج إلى أن ترث من فئة Control لكى يكون وجوده مرئياً. الفئات التي ترث من فئة Control تحتوي على ControlTemplate, الذي يسمح للمستهلك لعنصر تحكم بالتغيير جوهرياً مظهر عنصر التحكم دون الحاجة إلى إنشاء فئة فرعية جديدة. يناقش هذا الموضوع كيف تقوم عناصر التحكم (كل تلك التي ترث من فئة Control وتلك التي لا ترث) شائعة الاستخدام في WPF.

إنشاء مثيل من عنصر تحكم.

يمكنك إضافة عنصر تحكم إلى تطبيق ما إما باستخدام Extensible Application Markup Language (XAML) أو كود. المثال التالي يوضح كيفية إنشاء تطبيق بسيط يطلب من المستخدم ادخال الاسم الأول والاسم الأخير. ينشئ هذا المثال ستة عناصر: تسمياتان نصيتان، و مربعي نص، و زرين في XAML. يمكن إنشاء كافة عناصر التحكم بشكل مشابه.

<Grid>
  <Grid.RowDefinitions>
    <RowDefinition Height="30"/>
    <RowDefinition Height="30"/>
    <RowDefinition Height="30"/>
    <RowDefinition/>
  </Grid.RowDefinitions>
  <Grid.ColumnDefinitions>
    <ColumnDefinition/>
    <ColumnDefinition/>
  </Grid.ColumnDefinitions>

  <Label>
    Enter your first name:
  </Label>
  <TextBox Grid.Row="0" Grid.Column="1" 
           Name="firstName" Margin="0,5,10,5"/>

  <Label Grid.Row="1" >
    Enter your last name:
  </Label>
  <TextBox Grid.Row="1" Grid.Column="1" 
           Name="lastName" Margin="0,5,10,5"/>

  <Button Grid.Row="2" Grid.Column="0" 
          Name="submit" Margin="2">
    View message
  </Button>

  <Button Grid.Row="2" Grid.Column="1" 
          Name="Clear" Margin="2">
    Clear Name
  </Button>
</Grid>

يقوم المثال التالي بإنشاء نفس التطبيق في التعليمات البرمجية. ل brevity، وإنشاء Grid، grid1، لقد تم استبعادها من نموذج. grid1h كـ ملفات تعريف الأعمدة والصفوف نفس كـ في السابقXAMLمثال.

Private firstNameLabel As Label
Private lastNameLabel As Label
Private firstName As TextBox
Private lastName As TextBox
Private submit As Button
Private clear As Button

Sub CreateControls()
    firstNameLabel = New Label()
    firstNameLabel.Content = "Enter your first name:"
    grid1.Children.Add(firstNameLabel)

    firstName = New TextBox()
    firstName.Margin = New Thickness(0, 5, 10, 5)
    Grid.SetColumn(firstName, 1)
    grid1.Children.Add(firstName)

    lastNameLabel = New Label()
    lastNameLabel.Content = "Enter your last name:"
    Grid.SetRow(lastNameLabel, 1)
    grid1.Children.Add(lastNameLabel)

    lastName = New TextBox()
    lastName.Margin = New Thickness(0, 5, 10, 5)
    Grid.SetColumn(lastName, 1)
    Grid.SetRow(lastName, 1)
    grid1.Children.Add(lastName)

    submit = New Button()
    submit.Content = "View message"
    Grid.SetRow(submit, 2)
    grid1.Children.Add(submit)

    clear = New Button()
    clear.Content = "Clear Name"
    Grid.SetRow(clear, 2)
    Grid.SetColumn(clear, 1)
    grid1.Children.Add(clear)


End Sub 'CreateControls

Label firstNameLabel;
Label lastNameLabel;
TextBox firstName;
TextBox lastName;
Button submit;
Button clear;

void CreateControls()
{
    firstNameLabel = new Label();
    firstNameLabel.Content = "Enter your first name:";
    grid1.Children.Add(firstNameLabel);

    firstName = new TextBox();
    firstName.Margin = new Thickness(0, 5, 10, 5);
    Grid.SetColumn(firstName, 1);
    grid1.Children.Add(firstName);

    lastNameLabel = new Label();
    lastNameLabel.Content = "Enter your last name:";
    Grid.SetRow(lastNameLabel, 1);
    grid1.Children.Add(lastNameLabel);

    lastName = new TextBox();
    lastName.Margin = new Thickness(0, 5, 10, 5);
    Grid.SetColumn(lastName, 1);
    Grid.SetRow(lastName, 1);
    grid1.Children.Add(lastName);

    submit = new Button();
    submit.Content = "View message";
    Grid.SetRow(submit, 2);
    grid1.Children.Add(submit);

    clear = new Button();
    clear.Content = "Clear Name";
    Grid.SetRow(clear, 2);
    Grid.SetColumn(clear, 1);
    grid1.Children.Add(clear);

}

تغيير المظهر لعنصر تحكم

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

تغيير قيمة خاصية عنصر التحكم.
إنشاء Style لعنصر التحكم.
إنشاء ControlTemplate جديد لعنصر التحكم.

تغيير قيمة خاصية لعنصر التحكم

تحتوي العديد من عناصر التحكم على خصائص تسمح لك بتغيير كيفية ظهور عنصرالتحكم مثل Background الخاص ب Button. يمكنك تعيين قيم الخصائص في كلا من XAML و التعليمات البرمجية. يقوم المثال التالي بإعداد Background ، FontSize ، و خصائص FontWeight على Button في XAML.

<Button FontSize="14" FontWeight="Bold">
  <!--Set the Background property of the Button to
    a LinearGradientBrush.-->
  <Button.Background>
    <LinearGradientBrush StartPoint="0,0.5" 
                            EndPoint="1,0.5">
      <GradientStop Color="Green" Offset="0.0" />
      <GradientStop Color="White" Offset="0.9" />
    </LinearGradientBrush>

  </Button.Background>
  View message
</Button>

يقوم المثال التالي بإعداد نفس الخصائص في التعليمات البرمجية.

Dim buttonBrush As New LinearGradientBrush()
buttonBrush.StartPoint = New Point(0, 0.5)
buttonBrush.EndPoint = New Point(1, 0.5)
buttonBrush.GradientStops.Add(New GradientStop(Colors.Green, 0))
buttonBrush.GradientStops.Add(New GradientStop(Colors.White, 0.9))

submit.Background = buttonBrush
submit.FontSize = 14
submit.FontWeight = FontWeights.Bold

LinearGradientBrush buttonBrush = new LinearGradientBrush();
buttonBrush.StartPoint = new Point(0, 0.5);
buttonBrush.EndPoint = new Point(1, 0.5);
buttonBrush.GradientStops.Add(new GradientStop(Colors.Green, 0));
buttonBrush.GradientStops.Add(new GradientStop(Colors.White, 0.9));

submit.Background = buttonBrush;
submit.FontSize = 14;
submit.FontWeight = FontWeights.Bold;

إنشاء نمط لعنصر التحكم.

WPF يوفر لك إمكانية تحديد مظهر عناصر التحكم wholesale ، بدلاً من تعيين الخصائص على كل مثيل في التطبيق، عن طريق إنشاءStyle. يقوم المثال التالي بإنشاء Style الذي يتم تطبيقه على كل Button في التطبيق. تعريفات Style عادةً معرّفة فيXAML فيResourceDictionary, مثل خاصية Resources الخاصة ب FrameworkElement.

<Style TargetType="Button">
  <Setter Property="FontSize" Value="14"/>
  <Setter Property="FontWeight" Value="Bold"/>
  <Setter Property="Background">
    <Setter.Value>
      <LinearGradientBrush StartPoint="0,0.5" 
                              EndPoint="1,0.5">
        <GradientStop Color="Green" Offset="0.0" />
        <GradientStop Color="White" Offset="0.9" />
      </LinearGradientBrush>

    </Setter.Value>
  </Setter>
</Style>

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

إنشاء ControlTemplate

Style يسمح لك بتعيين الخصائص على عناصر تحكم متعددة في وقت ما، ولكن أحياناً قد تحتاج إلى تخصيص مظهر Control متجاوزاً ما يمكنك القيام به عن طريق إنشاء Style. الفئات التي ترث من فئة Control لها ControlTemplate ، والذي يعرّف بنية و مظهر Control. خاصية Template الخاصة ب Control عمومية, بحيث يمكنك منح Control ControlTemplate يختلف عن الافتراضي الخاص به. يمكنك غالباً تحديد ControlTemplate جديد إلى Control بدلاً من يرث من عنصر التحكم لتخصيص مظهر Control.

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

يقوم المثال التالي بإنشاء ControlTemplate إلى Button. ControlTemplate ينشء Button بزوايا دائرية و خلفية متدرجة. ControlTemplate يحتوي على Border له Background هو LinearGradientBrush بكائنين GradientStop . الأول GradientStop يستخدم ربط البيانات لربط خاصية Color الخاصة ب GradientStop إلى لون خلفية الزر. عند تعيين خاصية Background الخاصة ب Button ، يُستخدم لون تلك القيمة كـ الأول GradientStop. لمزيد من المعلومات حول ربط البيانات، راجع نظرة عامة لربط البيانات. المثال أيضاً يقوم بإنشاء Trigger الذي يغير من مظهر Button عند IsPressed يتم true.

<!--Define a template that creates a gradient-colored button.-->
<Style TargetType="Button">
  <Setter Property="Template">
    <Setter.Value>
      <ControlTemplate TargetType="Button">
        <Border 
          x:Name="Border"  
          CornerRadius="20" 
          BorderThickness="1"
          BorderBrush="Black">
          <Border.Background>
            <LinearGradientBrush StartPoint="0,0.5" 
                                 EndPoint="1,0.5">
              <GradientStop Color="{Binding Background.Color, 
                    RelativeSource={RelativeSource TemplatedParent}}" 
                            Offset="0.0" />
              <GradientStop Color="White" Offset="0.9" />
            </LinearGradientBrush>
          </Border.Background>
          <ContentPresenter 
            Margin="2"
            HorizontalAlignment="Center"
            VerticalAlignment="Center"
            RecognizesAccessKey="True"/>
        </Border>
        <ControlTemplate.Triggers>
          <!--Change the appearance of
          the button when the user clicks it.-->
          <Trigger Property="IsPressed" Value="true">
            <Setter TargetName="Border" Property="Background">
              <Setter.Value>
                <LinearGradientBrush StartPoint="0,0.5" 
                                     EndPoint="1,0.5">
                  <GradientStop Color="{Binding Background.Color, 
                    RelativeSource={RelativeSource TemplatedParent}}" 
                                Offset="0.0" />
                  <GradientStop Color="DarkSlateGray" Offset="0.9" />
                </LinearGradientBrush>
              </Setter.Value>
            </Setter>
          </Trigger>

        </ControlTemplate.Triggers>
      </ControlTemplate>
    </Setter.Value>
  </Setter>
</Style>


...


<Button Grid.Row="2" Grid.ColumnSpan="2" Name="submitName"
        Background="Green">View message</Button>

ملاحظة
خاصية Background الخاصة ب Button يجب تعيينها إلى SolidColorBrush للمثال لكى يعمل بشكل صحيح.

الاشتراك فى الأحداث

يمكنك الاشتراك فى الحدث لعنصر التحكم باستخدام إما XAML أو التعليمات البرمجية، ولكن يمكنك التعامل فقط ى أحد أحداث في التعليمات البرمجية. المثال التالي يوضح كيفية الاشتراك فى حدث Click الخاص ب Button.

<Button Grid.Row="2" Grid.ColumnSpan="2" Name="submitName" Click="submit_Click"
  Background="Green">View message</Button>

AddHandler submit.Click, AddressOf submit_Click

submit.Click += new RoutedEventHandler(submit_Click);

يتعامل المثال التالي مع حدث Click الخاص ب Button.

Private Sub submit_Click(ByVal sender As Object, ByVal e As RoutedEventArgs)
    MessageBox.Show("Hello, " + firstName.Text + " " + lastName.Text)

End Sub 'submit_Click

void submit_Click(object sender, RoutedEventArgs e)
{
    MessageBox.Show("Hello, " + firstName.Text + " " + lastName.Text);
}

المحتوى الغنى في عناصر التحكم

معظم الفئات التي ترث من فئة Control لديها السعة لإحتواء محتوى المنسق. على سبيل المثال، Label يمكن أن تحتوي على أي كائن مثل سلسلة، أو Image, أو Panel. توفر الفئات التالية دعمًا للمحتوى الغني و تعمل كفئات أساسية لمعظم عناصر التحكم في WPF.

--ContentControl بعض الأمثلة عن الفئات التي ترث من هذة الفئة تكون Label ،Button ، وToolTip.
--ItemsControl بعض الأمثلة عن الفئات التي ترث من هذة الفئة تكون ListBox ،Menu ، وStatusBar.
--HeaderedContentControl بعض الأمثلة عن الفئات التي ترث من هذة الفئة تكون TabItem ،GroupBox ، وExpander.
--HeaderedItemsControl بعض الأمثلة عن الفئات التي ترث من هذة الفئة تكون MenuItem ،TreeViewItem ، وToolBar.

راجع أيضًا:

مشاركة عبر

نظرة عامة حول عناصر التحكم

إنشاء مثيل من عنصر تحكم.

تغيير المظهر لعنصر تحكم

تغيير قيمة خاصية لعنصر التحكم

إنشاء نمط لعنصر التحكم.

إنشاء ControlTemplate

الاشتراك فى الأحداث

المحتوى الغنى في عناصر التحكم

راجع أيضًا:

المهام

المرجع

المبادئ

موارد أخرى

الموارد الإضافية