Рычаги управления

Статья
12/17/2024

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

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

Элемент управления можно добавить в приложение с помощью языка разметки расширяемых приложений (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);
}

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

Изменение внешнего вида элемента управления

Обычно можно изменить внешний вид элемента управления, чтобы он соответствовал внешнему виду и виду приложения. Вы можете изменить внешний вид элемента управления, выполнив одно из следующих действий в зависимости от того, что вы хотите выполнить:

Измените значение свойства элемента управления.
Создайте 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;

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

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

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>

Заметка

Свойство 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);

AddHandler submit.Click, AddressOf submit_Click

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

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

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

End Sub

Богатое содержимое в элементах управления

Большинство классов, наследующих от класса Control, имеют емкость для хранения богатого содержимого. Например, Label может содержать любой объект, например строку, Imageили Panel. Следующие классы обеспечивают поддержку расширенного содержимого и выполняют роль базовых классов для большинства элементов управления в WPF.

ContentControl- Некоторые примеры классов, наследуемых от этого класса, — Label, Buttonи ToolTip.
ItemsControl- Некоторые примеры классов, наследуемых от этого класса, — ListBox, Menuи StatusBar.
HeaderedContentControl- Некоторые примеры классов, наследуемых от этого класса, — TabItem, GroupBoxи Expander.
HeaderedItemsControl--Некоторые примеры классов, наследуемых от этого класса, являются MenuItem, TreeViewItemи ToolBar.

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

См. также

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

Поделиться через