Sdílet prostřednictvím

Ovládání

  • Článek

Windows Presentation Foundation (WPF) se dodává s mnoha běžnými komponentami uživatelského rozhraní, které se používají téměř ve všech aplikacích pro Windows, jako jsou Button, Label, TextBox, Menua ListBox. Tyto objekty byly historicky označovány jako ovládací prvky. Zatímco WPF SDK nadále používá termín "control" ve volném smyslu pro všechny třídy, které představují viditelný objekt v aplikaci, je důležité si uvědomit, že třída nemusí dědit z třídy Control, aby měla viditelnou přítomnost. Třídy, které dědí z třídy Control obsahují ControlTemplate, což umožňuje příjemci ovládacího prvku radikálně změnit vzhled ovládacího prvku, aniž by bylo nutné vytvořit novou podtřídu. Toto téma popisuje, jak se ovládací prvky (jak ty, které dědí z třídy Control, tak ty, které z ní nedědí) běžně používají ve WPF.

Vytvoření instance ovládacího prvku

Ovládací prvek můžete do aplikace přidat pomocí jazyka XAML (Extensible Application Markup Language) nebo kódu. Následující příklad ukazuje, jak vytvořit jednoduchou aplikaci, která uživatele požádá o křestní jméno a příjmení. Tento příklad vytvoří šest ovládacích prvků: dva popisky, dvě textová pole a dvě tlačítka v XAML. Podobně lze vytvořit všechny ovládací prvky.

<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>

Následující příklad vytvoří stejnou aplikaci v kódu. Pro stručnost nebylo vytvoření Grid, grid1zahrnuto do vzorku. grid1 má stejné definice sloupců a řádků, jak je znázorněno v předchozím příkladu 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

Změna vzhledu ovládacího prvku

Vzhled ovládacího prvku se běžně mění tak, aby odpovídal vzhledu a chování aplikace. Vzhled ovládacího prvku můžete změnit provedením některého z následujících postupů v závislosti na tom, co chcete udělat:

  • Změňte hodnotu vlastnosti ovládacího prvku.

  • Vytvořte Style pro ovládací prvek.

  • Vytvořte pro ovládací prvek nový ControlTemplate.

Změna hodnoty vlastnosti ovládacího prvku

Mnoho ovládacích prvků má vlastnosti, které umožňují změnit způsob zobrazení ovládacího prvku, například BackgroundButton. Vlastnosti hodnoty můžete nastavit jak v XAML, tak v kódu. Následující příklad nastaví vlastnosti Background, FontSizea FontWeight na Button v 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>

Následující příklad nastaví stejné vlastnosti v kódu.

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

Vytvoření stylu ovládacího prvku

WPF vám umožňuje určit vzhled ovládacích prvků hromadně, místo abyste nastavovali vlastnosti pro každou instanci v aplikaci zvlášť, a to vytvořením Style. Následující příklad vytvoří Style, který se použije na každý Button v rámci aplikace. Definice Style jsou obvykle tvořeny pomocí XAML v ResourceDictionary, například vlastnost Resources u 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>

Styl můžete také použít pouze u určitých ovládacích prvků určitého typu přiřazením klíče ke stylu a určením tohoto klíče ve vlastnosti Style ovládacího prvku. Další informace o stylech naleznete v tématu Stylování a Šablonování.

Vytvoření ControlTemplate

Style umožňuje nastavit vlastnosti na více ovládacích prvcích najednou, ale někdy můžete chtít přizpůsobit vzhled Control nad rámec toho, co můžete udělat vytvořením Style. Třídy, které dědí z třídy Control mají ControlTemplate, který definuje strukturu a vzhled Control. Vlastnost Template u Control je veřejná, takže můžete dát ControlControlTemplate, která se liší od výchozí hodnoty. Často můžete zadat nový ControlTemplate pro Control a upravit vzhled Control, místo abyste dědili z ovládacího prvku.

Zvažte velmi běžný ovládací prvek, Button. Primárním chováním Button je umožnit aplikaci provést nějakou akci, když na ni uživatel klikne. Ve výchozím nastavení se Button ve WPF zobrazí jako vyvýšený obdélník. Při vývoji aplikace můžete chtít využít chování Button– to znamená, že se postaráte o událost kliknutí na tlačítko – ale vzhled tlačítka můžete změnit nad rámec toho, co můžete udělat změnou vlastností tlačítka. V tomto případě můžete vytvořit novou ControlTemplate.

Následující příklad vytvoří ControlTemplate pro Button. ControlTemplate vytvoří Button se zaoblenými rohy a přechodovým pozadím. ControlTemplate obsahuje Border, jehož Background je LinearGradientBrush se dvěma objekty GradientStop. První GradientStop používá datovou vazbu k propojení vlastnosti Color z GradientStop s barvou pozadí tlačítka. Když nastavíte vlastnost Background pro Button, barva této vlastnosti se použije jako první GradientStop. Další informace o datové vazbě naleznete v tématu Přehled datových vazeb. Příklad také vytvoří Trigger, který změní vzhled Button, když je IsPressedtrue.

<!--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>

Poznámka

Vlastnost Background objektu Button musí být nastavena na hodnotu SolidColorBrush, aby příklad fungoval správně.

Přihlášení k odběru událostí

Událost ovládacího prvku můžete přihlásit k odběru pomocí XAML nebo kódu, ale můžete zpracovat pouze událost v kódu. Následující příklad ukazuje, jak se přihlásit k odběru události Click z 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

Následující příklad zpracovává událost Click z 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

Bohatý obsah v ovládacích prvcích

Většina tříd, které dědí z třídy Control, má schopnost obsahovat bohatý obsah. Například Label může obsahovat libovolný objekt, například řetězec, Imagenebo Panel. Následující třídy poskytují podporu pro bohatý obsah a fungují jako základní třídy pro většinu ovládacích prvků ve WPF.

Další informace o těchto základních třídách naleznete v tématu WPF Content Model.

Viz také