Bagikan melalui

Kontrol

  • Artikel

Windows Presentation Foundation (WPF) dikirim dengan banyak komponen UI umum yang digunakan di hampir setiap aplikasi Windows, seperti Button, , LabelTextBox, Menu, dan ListBox. Secara historis, objek-objek ini telah disebut sebagai kontrol. Meskipun WPF SDK terus menggunakan istilah "kontrol" untuk secara longgar berarti kelas apa pun yang mewakili objek yang terlihat dalam aplikasi, penting untuk dicatat bahwa kelas tidak perlu mewarisi dari Control kelas untuk memiliki kehadiran yang terlihat. Kelas yang mewarisi dari kelas Control berisi ControlTemplate, yang memungkinkan konsumen kontrol untuk secara radikal mengubah tampilan kontrol tanpa harus membuat subkelas baru. Topik ini membahas bagaimana kontrol (baik yang mewarisi dari kelas Control maupun yang tidak) biasanya digunakan dalam WPF.

Membuat Instans Kontrol

Anda dapat menambahkan kontrol ke aplikasi dengan menggunakan Extensible Application Markup Language (XAML) atau kode. Contoh berikut menunjukkan cara membuat aplikasi sederhana yang meminta nama depan dan belakang pengguna. Contoh ini membuat enam kontrol: dua label, dua kotak teks, dan dua tombol, di XAML. Semua kontrol dapat dibuat dengan cara yang sama.

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

Contoh berikut membuat aplikasi yang sama dalam kode. Untuk singkatnya, pembuatan Grid, grid1, telah dikecualikan dari sampel. grid1 memiliki definisi kolom dan baris yang sama seperti yang ditunjukkan dalam contoh XAML sebelumnya.

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

Mengubah Tampilan Kontrol

Adalah umum untuk mengubah tampilan kontrol agar sesuai dengan tampilan dan nuansa aplikasi Anda. Anda dapat mengubah tampilan kontrol dengan melakukan salah satu hal berikut ini, bergantung pada apa yang ingin Anda capai:

Mengubah Nilai Properti Kontrol

Banyak kontrol memiliki properti yang memungkinkan Anda mengubah tampilan kontrol, seperti Background dari Button. Anda dapat mengatur properti nilai di XAML dan kode. Contoh berikut mengatur properti Background, FontSize, dan FontWeight pada Button di 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>

Contoh berikut menetapkan properti yang sama dalam kode.

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

Membuat Gaya untuk Kontrol

WPF memberi Anda kemampuan untuk menentukan tampilan grosir kontrol, alih-alih mengatur properti pada setiap instans dalam aplikasi, dengan membuat Style. Contoh berikut membuat Style yang diterapkan ke masing-masing Button dalam aplikasi. Style definisi biasanya didefinisikan dalam XAML dalam ResourceDictionary, seperti properti Resources dari 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>

Anda juga dapat menerapkan gaya hanya ke kontrol tertentu dari jenis tertentu dengan menetapkan kunci ke gaya dan menentukan kunci tersebut di properti Style kontrol Anda. Untuk informasi selengkapnya tentang gaya, lihat Gaya dan Templat.

Membuat ControlTemplate

Style memungkinkan Anda untuk mengatur properti pada beberapa kontrol pada satu waktu, tetapi kadang-kadang Anda mungkin ingin menyesuaikan tampilan melampaui Control apa yang dapat Anda lakukan dengan membuat Style. Kelas yang mewarisi dari kelas Control memiliki ControlTemplate, yang mendefinisikan struktur dan tampilan Control. Properti Template dari Control bersifat publik, jadi Anda dapat memberikan Control a ControlTemplate yang berbeda dari bawaannya. Anda sering dapat menentukan ControlTemplate baru untuk Control alih-alih mewarisi dari kontrol untuk menyesuaikan tampilan Control.

Pertimbangkan kontrol yang sangat umum, Button. Perilaku utama dari adalah Button mengaktifkan aplikasi untuk mengambil beberapa tindakan ketika pengguna mengkliknya. Secara default, Button di WPF muncul sebagai persegi panjang yang dinaikkan. Saat mengembangkan aplikasi, Anda mungkin ingin memanfaatkan perilaku Button--yaitu, dengan menangani peristiwa klik tombol--tetapi Anda dapat mengubah tampilan tombol di luar apa yang dapat Anda lakukan dengan mengubah properti tombol. Dalam hal ini, Anda dapat membuat ControlTemplate.

Contoh berikut membuat ControlTemplate untuk Button. ControlTemplate membuat Button dengan sudut membulat dan latar belakang gradien. ControlTemplate berisi Border yang Background adalah LinearGradientBrush dengan dua GradientStop objek. GradientStop pertama menggunakan pengikatan data untuk mengikat properti Color dari GradientStop ke warna latar belakang tombol. Saat Anda mengatur properti Background dari Button, warna nilai tersebut akan digunakan sebagai GradientStop pertama. Untuk informasi selengkapnya tentang pengikatan data, lihat Gambaran Umum Pengikatan Data. Contoh juga membuat Trigger yang mengubah tampilan Button saat IsPressed adalah 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>

Catatan

Properti Background dari Button harus diatur ke SolidColorBrush agar contoh berfungsi dengan baik.

Berlangganan Peristiwa

Anda dapat berlangganan peristiwa kontrol dengan menggunakan XAML atau kode, tetapi Anda hanya dapat menangani peristiwa dalam kode. Contoh berikut menunjukkan cara berlangganan acara Click dari 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

Contoh berikut menangani peristiwa Click dari 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

Konten Kaya dalam Kontrol

Sebagian besar kelas yang mewarisi dari kelas Control memiliki kapasitas untuk berisi konten yang kaya. Misalnya, Label dapat berisi objek apa pun, seperti string, Image, atau Panel. Kelas berikut memberikan dukungan untuk konten kaya dan bertindak sebagai kelas dasar untuk sebagian besar kontrol di WPF.

Untuk informasi selengkapnya tentang kelas dasar ini, lihat Model Konten WPF.

Baca juga