Элементы управления

Windows Presentation Foundation (WPF) содержит большинство распространенных компонентов пользовательского интерфейса, которые используются практически во всех приложениях Windows, таких как Button, Label, TextBox, Menu и ListBox. Исторически эти объекты называются элементами управления. Хотя пакет SDK для WPF продолжает использовать термин "элемент управления" для общего обозначения любого класса, который представляет видимый объект в приложении, важно отметить, что класс не обязательно должен наследовать от класса Control, чтобы иметь визуальное представление. Классы, наследующие от класса Control, содержат шаблон ControlTemplate, позволяющий пользователю элемента управления существенно изменить внешний вид элемента управления, не создавая новый подкласс. В этом разделе описано, как элементы управления (и наследующие от класса Control, и не наследующие от него) обычно используются в WPF.

Создание экземпляра элемента управления

Элемент управления можно добавить в приложение с помощью 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>

В следующем примере создается такое же приложение в коде. Для краткости создание Grid, grid1, было исключено из примера. grid1 имеет те же определения столбцов и строк, как показано в предыдущем примере XAML.

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>

Следующий пример устанавливает те же самые свойства в коде.

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 дает возможность группового определения внешнего вида элементов управления путем создания 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>

Note

Свойству Background элемента управления Button должно быть присвоено значение SolidColorBrush для правильной работы примера.

Подписка на события

Можно подписаться на событие элемента управления с помощью XAML или кода, но обработать событие можно только в коде. В следующем примере показано, как подписаться на событие Click элемента управления Button.

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

submit.Click += new RoutedEventHandler(submit_Click);

В следующем примере показана обработка события Click элемента управления Button.

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.

Дополнительные сведения об этих базовых классах см. в разделе Модель содержимого WPF.

См. также

• Стилизация и использование шаблонов
• Категории элементов управления
• Библиотека элементов управления
• Общие сведения о шаблонах данных
• Общие сведения о привязке данных
• Ввод
• Включение команды
• Пошаговые руководства. Создание пользовательской анимированной кнопки
• Настройка элементов управления