Denetimler

Windows Presentation Foundation (WPF), , , TextBox, Menuve ListBoxgibi ButtonLabelhemen her Windows uygulamasında kullanılan birçok ortak kullanıcı arabirimi bileşeniyle birlikte sağlanır. Geçmişte bu nesnelere denetimler adı verilmiştir. WPF SDK'sı bir uygulamadaki görünür nesneyi temsil eden herhangi bir sınıfı gevşek bir şekilde ifade etmek için "denetim" terimini kullanmaya devam etse de, görünür bir varlığı olması için sınıfın sınıftan Control devralması gerekmediğine dikkat etmek önemlidir. Control sınıfından devralan sınıflar, kullanıcısının yeni bir alt sınıf oluşturmak zorunda kalmadan denetimin görünümünü kökten değiştirmesine olanak tanıyan bir ControlTemplate içerir. Bu konu başlığı altında denetimlerin (gerek Control sınıfından devralanlar gerekse devralmayanlar) WPF'de yaygın olarak nasıl kullanıldığı açıklanmaktadır.

Denetimin Örneğini Oluşturma

Genişletilebilir Uygulama Biçimlendirme Dili (XAML) veya kod kullanarak bir uygulamaya denetim ekleyebilirsiniz. Aşağıdaki örnekte, kullanıcıdan adını ve soyadını soran basit bir uygulamanın nasıl oluşturulacağı gösterilmektedir. Bu örnek altı denetim oluşturur: XAML'de iki etiket, iki metin kutusu ve iki düğme. Tüm denetimler benzer şekilde oluşturulabilir.

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

Aşağıdaki örnek, kodda aynı uygulamayı oluşturur. Kısa tutmak için Grid, grid1 öğesinin oluşturulması örneğe dahil edilmemiştir. grid1, önceki XAML örneğinde gösterilen ile aynı sütun ve satır tanımlarına sahiptir.

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

Denetimin Görünümünü Değiştirme

Bir denetimin görünümünü uygulamanızın genel görünümüne uyacak şekilde değiştirmek yaygın bir uygulamadır. Ne yapmak istediğinize bağlı olarak aşağıdakilerden birini yaparak denetimin görünümünü değiştirebilirsiniz:

  • Denetimin bir özelliğinin değerini değiştirme.

  • Denetim için bir Style oluşturma.

  • Denetim için yeni bir ControlTemplate oluşturma.

Denetimin Özellik Değerini Değiştirme

Birçok denetimde, Button için Background gibi denetimin görünümünü değiştirmenize olanak tanıyan özellikler vardır. Gerek XAML gerekse kodda değer özelliklerini ayarlayabilirsiniz. Aşağıdaki örnek, XAML'da bir Button üzerindeki Background, FontSize ve FontWeight özelliklerini ayarlar.

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

Aşağıdaki örnek, aynı özellikleri kodda ayarlar.

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

Denetim için Stil Oluşturma

WPF, bir Style oluşturarak uygulamadaki her örnekte özellikleri ayarlamak yerine denetimlerin görünümünü toptan belirleme olanağı sunar. Aşağıdaki örnek, uygulamadaki her Button öğesine uygulanan bir Style oluşturur. Style tanımları genellikle XAML'da bir ResourceDictionary içinde tanımlanır, örneğin FrameworkElement için Resources özelliği.

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

Ayrıca stile bir anahtar atayarak ve denetiminizin Style özelliğinde bu anahtarı belirterek stili yalnızca belirli türdeki belirli denetimlere uygulayabilirsiniz. Stiller hakkında daha fazla bilgi için bkz. Stil ve Şablon Oluşturma.

ControlTemplate Oluşturma

Bir Style aynı anda birden çok denetimde özellik ayarlamanıza olanak tanır, ancak bazen bir Controlöğesinin görünümünü bir Style oluşturarak yapabileceklerinizin ötesinde özelleştirmek isteyebilirsiniz. Control sınıfından devralan sınıfların, bir Control'un yapısını ve görünümünü tanımlayan bir ControlTemplate'ı vardır. Bir ControlTemplate özelliği ortak olduğundan, Control öğesine varsayılanından farklı bir ControlTemplate verebilirsiniz. Bir Control öğesinin görünümünü özelleştirmek için, denetimden devralmak yerine sıklıkla Control için yeni bir ControlTemplate belirtebilirsiniz.

Çok yaygın kullanılan Button denetimini ele alalım. Birincil Button davranışı, kullanıcı tıkladığında bir uygulamanın bazı eylemler gerçekleştirmesini sağlamaktır. Varsayılan olarak, WPF içindeki Button yükseltilmiş bir dikdörtgen olarak görünür. Uygulama geliştirirken, düğmenin tıklama olayını işleyerek bir Button öğesinin davranışından yararlanmak isteyebilirsiniz, ancak düğmenin görünümünü düğmenin özelliklerini değiştirerek yapabileceğinizin ötesinde değiştirebilirsiniz. Bu durumda yeni bir ControlTemplate oluşturabilirsiniz.

Aşağıdaki örnek, Button için bir ControlTemplate oluşturur. ControlTemplate, yuvarlatılmış köşeleri ve dalgalı bir arka planı olan bir Button oluşturur. ControlTemplate, Background özelliği iki GradientStop nesne içeren bir LinearGradientBrush olan bir Border içerir. Birinci GradientStop, GradientStop öğesinin Color özelliğini düğmenin arka planının rengine bağlamak için veri bağlama kullanır. Button öğesinin Background özelliğini ayarladığınızda, o değerin rengi ilk GradientStopolarak kullanılır. Veri bağlama hakkında daha fazla bilgi için bkz. Veri Bağlamaya Genel Bakış. Örnek, IsPressedtrue olduğunda Button öğesinin görünümünü değiştiren bir Trigger de oluşturur.

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

Dekont

Örneğin düzgün çalışması için ButtonBackground özelliği SolidColorBrush olarak ayarlanmalıdır.

Olaylara Abone Olma

XAML veya kod kullanarak bir denetimin olayına abone olabilirsiniz, ancak bir olayı yalnızca kodda işleyebilirsiniz. Aşağıdaki örnekte bir Button öğesinin Click olayına nasıl abone olunacağı gösterilmektedir.

<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

Aşağıdaki örnek bir Button öğesinin Click olayını işler.

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

Denetimlerde Zengin İçerik

Control sınıfından devralan sınıfların çoğu zengin içerik içerebilecek kapasiteye sahiptir. Örneğin bir Label dizesi bir Image veya bir Panel gibi herhangi bir nesne içerebilir. Aşağıdaki sınıflar zengin içerik için destek sağlar ve WPF'deki denetimlerin çoğu için temel sınıf görevini görür.

Bu temel sınıflar hakkında daha fazla bilgi için bkz. WPF İçerik Modeli.

Ayrıca bkz.