Bagikan melalui

Panduan: Membuat Tombol dengan Menggunakan XAML

Tujuan dari panduan ini adalah untuk mempelajari cara membuat tombol animasi untuk digunakan dalam aplikasi Windows Presentation Foundation (WPF). Panduan ini menggunakan gaya dan templat untuk membuat sumber daya tombol yang disesuaikan yang memungkinkan penggunaan kembali kode dan pemisahan logika tombol dari deklarasi tombol. Panduan ini ditulis sepenuhnya dalam Extensible Application Markup Language (XAML).

Penting

Panduan ini memandu Anda melalui langkah-langkah untuk membuat aplikasi dengan mengetik atau menyalin dan menempelkan Extensible Application Markup Language (XAML) ke Visual Studio. Jika Anda lebih suka mempelajari cara menggunakan perancang untuk membuat aplikasi yang sama, lihat Membuat Tombol dengan Menggunakan Microsoft Expression Blend.

Gambar berikut menunjukkan tombol yang sudah selesai.

Tombol kustom yang dibuat dengan menggunakan XAML

Buat Tombol Dasar

Mari kita mulai dengan membuat proyek baru dan menambahkan beberapa tombol ke jendela.

Untuk membuat proyek WPF baru dan menambahkan tombol ke jendela

  1. Mulai Visual Studio.

  2. Buat proyek WPF baru: Pada menu File, arahkan ke Baru, lalu klik Proyek. Temukan templat Aplikasi Windows (WPF) dan beri nama proyek "AnimatedButton". Ini akan membuat kerangka untuk aplikasi.

  3. Tambahkan tombol default dasar: Semua file yang Anda butuhkan untuk panduan ini disediakan oleh templat. Buka file Window1.xaml dengan mengkliknya dua kali di Penjelajah Solusi. Secara default, ada Grid elemen di Window1.xaml. Grid Hapus elemen dan tambahkan beberapa tombol ke halaman Extensible Application Markup Language (XAML) dengan mengetik atau menyalin dan menempelkan kode yang disorot berikut ke Window1.xaml:

    <Window x:Class="AnimatedButton.Window1"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  Title="AnimatedButton" Height="300" Width="300"
  Background="Black">
  <!-- Buttons arranged vertically inside a StackPanel. -->
  <StackPanel HorizontalAlignment="Left">
      <Button>Button 1</Button>
      <Button>Button 2</Button>
      <Button>Button 3</Button>
  </StackPanel>
</Window>

    Tekan F5 untuk menjalankan aplikasi; Anda akan melihat sekumpulan tombol yang terlihat seperti gambar berikut.

    Tiga tombol dasar

    Sekarang setelah Anda membuat tombol dasar, Anda selesai bekerja dalam file Window1.xaml. Panduan lainnya berfokus pada file app.xaml, menentukan gaya dan templat untuk tombol.

Atur Properti Dasar

Selanjutnya, mari kita atur beberapa properti pada tombol ini untuk mengontrol tampilan dan tata letak tombol. Daripada mengatur properti pada tombol satu per satu, Anda akan menggunakan sumber daya untuk menentukan properti tombol untuk seluruh aplikasi. Sumber daya aplikasi secara konseptual mirip dengan Cascading Style Sheets (CSS) eksternal untuk halaman Web; namun, sumber daya jauh lebih kuat daripada Cascading Style Sheets (CSS), seperti yang akan Anda lihat di akhir panduan ini. Untuk mempelajari selengkapnya tentang sumber daya, lihat Sumber Daya XAML.

Untuk menggunakan gaya untuk mengatur properti dasar pada tombol

  1. Tentukan blok Application.Resources: Buka app.xaml dan tambahkan markup yang disorot berikut jika belum ada:

    <Application x:Class="AnimatedButton.App"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  StartupUri="Window1.xaml"
  >
  <Application.Resources>
    <!-- Resources for the entire application can be defined here. -->
  </Application.Resources>
</Application>

    Cakupan sumber daya ditentukan oleh tempat Anda menentukan sumber daya. Menentukan sumber daya dalam Application.Resources file app.xaml memungkinkan sumber daya digunakan dari mana saja dalam aplikasi. Untuk mempelajari selengkapnya tentang menentukan cakupan sumber daya Anda, lihat Sumber Daya XAML.

  2. Buat gaya dan tentukan nilai properti dasar dengannya: Tambahkan markup berikut ke Application.Resources blok. Markup ini membuat Style yang berlaku untuk semua tombol dalam aplikasi, mengatur Width tombol ke 90 dan Margin ke 10:

    <Application.Resources>
  <Style TargetType="Button">
    <Setter Property="Width" Value="90" />
    <Setter Property="Margin" Value="10" />
  </Style>
</Application.Resources>

    Properti TargetType menentukan bahwa gaya berlaku untuk semua objek jenis Button. Setiap Setter menetapkan nilai properti yang berbeda untuk Style. Oleh karena itu, pada titik ini setiap tombol dalam aplikasi memiliki lebar 90 dan margin 10. Jika Anda menekan F5 untuk menjalankan aplikasi, Anda akan melihat jendela berikut.

    Tombol dengan lebar 90 dan margin 10

    Ada lebih banyak lagi yang dapat Anda lakukan dengan gaya, termasuk berbagai cara untuk menyempurnakan objek apa yang ditargetkan, menentukan nilai properti yang kompleks, dan bahkan menggunakan gaya sebagai input untuk gaya lain. Untuk informasi selengkapnya, lihat Penataan dan Pembuatan Template.

  3. Atur nilai properti gaya ke sumber daya: Sumber daya memungkinkan cara sederhana untuk menggunakan kembali objek dan nilai yang umum ditentukan. Sangat berguna untuk menentukan nilai kompleks menggunakan sumber daya untuk membuat kode Anda lebih modular. Tambahkan markup yang disorot berikut ke app.xaml.

    <Application.Resources>
  <LinearGradientBrush x:Key="GrayBlueGradientBrush" StartPoint="0,0" EndPoint="1,1">
    <GradientStop Color="DarkGray" Offset="0" />
    <GradientStop Color="#CCCCFF" Offset="0.5" />
    <GradientStop Color="DarkGray" Offset="1" />
  </LinearGradientBrush>
  <Style TargetType="{x:Type Button}">
    <Setter Property="Background" Value="{StaticResource GrayBlueGradientBrush}" />
    <Setter Property="Width" Value="80" />
    <Setter Property="Margin" Value="10" />
  </Style>
</Application.Resources>

    Tepat di bawah Application.Resources blok, Anda membuat sumber daya yang disebut "GrayBlueGradientBrush". Sumber daya ini mendefinisikan gradien horizontal. Sumber daya ini dapat digunakan sebagai nilai properti dari mana saja dalam aplikasi, termasuk di dalam setter gaya tombol untuk Background properti . Sekarang, semua tombol memiliki Background nilai properti dari gradien ini.

    Tekan F5 untuk menjalankan aplikasi. Hal itu akan terlihat seperti berikut ini.

    Tombol dengan latar belakang gradien

Membuat Templat yang Menentukan Tampilan Tombol

Di bagian ini, Anda membuat templat yang mengkustomisasi tampilan (presentasi) tombol. Presentasi tombol terdiri dari beberapa objek termasuk persegi panjang dan komponen lain untuk memberi tombol tampilan yang unik.

Sejauh ini, kontrol bagaimana tombol terlihat dalam aplikasi telah terbatas pada mengubah properti tombol. Bagaimana jika Anda ingin membuat perubahan yang lebih radikal pada tampilan tombol? Templat memungkinkan kontrol yang kuat atas presentasi objek. Karena templat dapat digunakan dalam gaya, Anda dapat menerapkan templat ke semua objek yang diterapkan gaya (dalam panduan ini, tombol ).

Untuk menggunakan templat untuk menentukan tampilan tombol

  1. Siapkan templat: Karena kontrol seperti Button memiliki Template properti, Anda dapat menentukan nilai properti templat seperti nilai properti lain yang Style telah kami tetapkan dalam menggunakan Setter. Tambahkan markup yang disorot berikut ke gaya tombol Anda.

    <Application.Resources>
  <LinearGradientBrush x:Key="GrayBlueGradientBrush"
    StartPoint="0,0" EndPoint="1,1">
    <GradientStop Color="DarkGray" Offset="0" />
    <GradientStop Color="#CCCCFF" Offset="0.5" />
    <GradientStop Color="DarkGray" Offset="1" />
  </LinearGradientBrush>
  <Style TargetType="{x:Type Button}">
    <Setter Property="Background" Value="{StaticResource GrayBlueGradientBrush}" />
    <Setter Property="Width" Value="80" />
    <Setter Property="Margin" Value="10" />
    <Setter Property="Template">
      <Setter.Value>
        <!-- The button template is defined here. -->
      </Setter.Value>
    </Setter>
  </Style>
</Application.Resources>

  2. Ubah presentasi tombol: Pada titik ini, Anda perlu menentukan templat. Tambahkan markup yang disorot berikut ini. Markup ini menentukan dua Rectangle elemen dengan tepi bulat, diikuti oleh DockPanel. DockPanel digunakan untuk menghosting ContentPresenter tombol . Menampilkan ContentPresenter konten tombol. Dalam panduan ini, kontennya adalah teks ("Tombol 1", "Tombol 2", "Tombol 3"). Semua komponen templat (persegi panjang dan DockPanel) diletakkan di dalam Grid.

    <Setter.Value>
  <ControlTemplate TargetType="Button">
    <Grid Width="{TemplateBinding Width}" Height="{TemplateBinding Height}" ClipToBounds="True">
      <!-- Outer Rectangle with rounded corners. -->
      <Rectangle x:Name="outerRectangle" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Stroke="{TemplateBinding Background}" RadiusX="20" RadiusY="20" StrokeThickness="5" Fill="Transparent" />
      <!-- Inner Rectangle with rounded corners. -->
      <Rectangle x:Name="innerRectangle" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Stroke="Transparent" StrokeThickness="20" Fill="{TemplateBinding Background}" RadiusX="20" RadiusY="20" />
      <!-- Present Content (text) of the button. -->
      <DockPanel Name="myContentPresenterDockPanel">
        <ContentPresenter x:Name="myContentPresenter" Margin="20" Content="{TemplateBinding  Content}" TextBlock.Foreground="Black" />
      </DockPanel>
    </Grid>
  </ControlTemplate>
</Setter.Value>

    Tekan F5 untuk menjalankan aplikasi. Hal itu akan terlihat seperti berikut ini.

    Jendela dengan 3 tombol

  3. Tambahkan glasseffect ke templat: Selanjutnya Anda akan menambahkan kaca. Pertama, Anda membuat beberapa sumber daya yang membuat efek gradien kaca. Tambahkan sumber daya gradien ini di mana saja dalam Application.Resources blok:

    <Application.Resources>
  <GradientStopCollection x:Key="MyGlassGradientStopsResource">
    <GradientStop Color="WhiteSmoke" Offset="0.2" />
    <GradientStop Color="Transparent" Offset="0.4" />
    <GradientStop Color="WhiteSmoke" Offset="0.5" />
    <GradientStop Color="Transparent" Offset="0.75" />
    <GradientStop Color="WhiteSmoke" Offset="0.9" />
    <GradientStop Color="Transparent" Offset="1" />
  </GradientStopCollection>
  <LinearGradientBrush x:Key="MyGlassBrushResource"
    StartPoint="0,0" EndPoint="1,1" Opacity="0.75"
    GradientStops="{StaticResource MyGlassGradientStopsResource}" />
<!-- Styles and other resources below here. -->

    Sumber daya ini digunakan sebagai Fill untuk persegi panjang yang kita sisipkan ke Grid dalam templat tombol. Tambahkan markup yang disorot berikut ke templat.

    <Setter.Value>
  <ControlTemplate TargetType="{x:Type Button}">
    <Grid Width="{TemplateBinding Width}" Height="{TemplateBinding Height}"
      ClipToBounds="True">

    <!-- Outer Rectangle with rounded corners. -->
    <Rectangle x:Name="outerRectangle" HorizontalAlignment="Stretch"
      VerticalAlignment="Stretch" Stroke="{TemplateBinding Background}"
      RadiusX="20" RadiusY="20" StrokeThickness="5" Fill="Transparent" />

    <!-- Inner Rectangle with rounded corners. -->
    <Rectangle x:Name="innerRectangle" HorizontalAlignment="Stretch"
      VerticalAlignment="Stretch" Stroke="Transparent" StrokeThickness="20"
      Fill="{TemplateBinding Background}" RadiusX="20" RadiusY="20" />

    <!-- Glass Rectangle -->
    <Rectangle x:Name="glassCube" HorizontalAlignment="Stretch"
      VerticalAlignment="Stretch"
      StrokeThickness="2" RadiusX="10" RadiusY="10" Opacity="0"
      Fill="{StaticResource MyGlassBrushResource}"
      RenderTransformOrigin="0.5,0.5">
      <Rectangle.Stroke>
        <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
          <LinearGradientBrush.GradientStops>
            <GradientStop Offset="0.0" Color="LightBlue" />
            <GradientStop Offset="1.0" Color="Gray" />
          </LinearGradientBrush.GradientStops>
        </LinearGradientBrush>
      </Rectangle.Stroke>
      <!-- These transforms have no effect as they are declared here.
      The reason the transforms are included is to be targets
      for animation (see later). -->
      <Rectangle.RenderTransform>
        <TransformGroup>
          <ScaleTransform />
          <RotateTransform />
        </TransformGroup>
      </Rectangle.RenderTransform>
      <!-- A BevelBitmapEffect is applied to give the button a "Beveled" look. -->
      <Rectangle.BitmapEffect>
        <BevelBitmapEffect />
      </Rectangle.BitmapEffect>
    </Rectangle>

    <!-- Present Text of the button. -->
    <DockPanel Name="myContentPresenterDockPanel">
      <ContentPresenter x:Name="myContentPresenter" Margin="20"
        Content="{TemplateBinding  Content}" TextBlock.Foreground="Black" />
    </DockPanel>
  </Grid>
</ControlTemplate>
</Setter.Value>

    Perhatikan bahwa Opacity persegi panjang dengan x:Name properti "glassCube" adalah 0, jadi ketika Anda menjalankan sampel, Anda tidak melihat persegi panjang kaca dilapisi di atasnya. Ini karena kita nantinya akan menambahkan pemicu ke templat ketika pengguna berinteraksi dengan tombol . Namun, Anda dapat melihat seperti apa tombol sekarang dengan mengubah Opacity nilai menjadi 1 dan menjalankan aplikasi. Lihat gambar berikut. Sebelum melanjutkan ke langkah berikutnya, ubah kembali Opacity ke 0.

    Tombol kustom yang dibuat dengan menggunakan XAML

Buat Interaktivitas Tombol

Di bagian ini, Anda akan membuat pemicu properti dan pemicu peristiwa untuk mengubah nilai properti dan menjalankan animasi sebagai respons terhadap tindakan pengguna seperti memindahkan penunjuk mouse di atas tombol dan mengklik.

Cara mudah untuk menambahkan interaktivitas (mouse-over, mouse-leave, klik, dan sebagainya) adalah dengan menentukan pemicu dalam templat atau gaya Anda. Untuk membuat Trigger, Anda menentukan properti "kondisi" seperti: Nilai properti tombol IsMouseOver sama dengan true. Anda kemudian menentukan setter (tindakan) yang terjadi saat kondisi pemicu benar.

Untuk membuat interaktivitas tombol

  1. Menambahkan pemicu templat: Tambahkan markup yang disorot ke templat Anda.

    <Setter.Value>
  <ControlTemplate TargetType="{x:Type Button}">
    <Grid Width="{TemplateBinding Width}"
      Height="{TemplateBinding Height}" ClipToBounds="True">

      <!-- Outer Rectangle with rounded corners. -->
      <Rectangle x:Name="outerRectangle" HorizontalAlignment="Stretch"
      VerticalAlignment="Stretch" Stroke="{TemplateBinding Background}"
      RadiusX="20" RadiusY="20" StrokeThickness="5" Fill="Transparent" />

      <!-- Inner Rectangle with rounded corners. -->
      <Rectangle x:Name="innerRectangle" HorizontalAlignment="Stretch"
        VerticalAlignment="Stretch" Stroke="Transparent"
        StrokeThickness="20"
        Fill="{TemplateBinding Background}" RadiusX="20" RadiusY="20"
      />

      <!-- Glass Rectangle -->
      <Rectangle x:Name="glassCube" HorizontalAlignment="Stretch"
        VerticalAlignment="Stretch"
        StrokeThickness="2" RadiusX="10" RadiusY="10" Opacity="0"
        Fill="{StaticResource MyGlassBrushResource}"
        RenderTransformOrigin="0.5,0.5">
        <Rectangle.Stroke>
          <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
            <LinearGradientBrush.GradientStops>
              <GradientStop Offset="0.0" Color="LightBlue" />
              <GradientStop Offset="1.0" Color="Gray" />
            </LinearGradientBrush.GradientStops>
          </LinearGradientBrush>
        </Rectangle.Stroke>

        <!-- These transforms have no effect as they
             are declared here.
             The reason the transforms are included is to be targets
             for animation (see later). -->
        <Rectangle.RenderTransform>
          <TransformGroup>
            <ScaleTransform />
            <RotateTransform />
          </TransformGroup>
        </Rectangle.RenderTransform>

          <!-- A BevelBitmapEffect is applied to give the button a
               "Beveled" look. -->
        <Rectangle.BitmapEffect>
          <BevelBitmapEffect />
        </Rectangle.BitmapEffect>
      </Rectangle>

      <!-- Present Text of the button. -->
      <DockPanel Name="myContentPresenterDockPanel">
        <ContentPresenter x:Name="myContentPresenter" Margin="20"
          Content="{TemplateBinding  Content}" TextBlock.Foreground="Black" />
      </DockPanel>
    </Grid>

    <ControlTemplate.Triggers>       <!-- Set action triggers for the buttons and define            what the button does in response to those triggers. -->     </ControlTemplate.Triggers>
  </ControlTemplate>
</Setter.Value>

  2. Menambahkan pemicu properti: Tambahkan markup yang disorot ke ControlTemplate.Triggers blok:

    <ControlTemplate.Triggers>

  <!-- Set properties when mouse pointer is over the button. -->   <Trigger Property="IsMouseOver" Value="True">     <!-- Below are three property settings that occur when the           condition is met (user mouses over button).  -->     <!-- Change the color of the outer rectangle when user           mouses over it. -->     <Setter Property ="Rectangle.Stroke" TargetName="outerRectangle"       Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}" />     <!-- Sets the glass opacity to 1, therefore, the           glass "appears" when user mouses over it. -->     <Setter Property="Rectangle.Opacity" Value="1" TargetName="glassCube" />     <!-- Makes the text slightly blurry as though you           were looking at it through blurry glass. -->     <Setter Property="ContentPresenter.BitmapEffect"        TargetName="myContentPresenter">       <Setter.Value>         <BlurBitmapEffect Radius="1" />       </Setter.Value>     </Setter>   </Trigger>

<ControlTemplate.Triggers/>

    Tekan F5 untuk menjalankan aplikasi dan melihat efek saat Anda menjalankan penunjuk mouse di atas tombol.

  3. Tambahkan pemicu fokus: Selanjutnya, kita akan menambahkan beberapa setter serupa untuk menangani kasus ketika tombol memiliki fokus (misalnya, setelah pengguna mengkliknya).

    <ControlTemplate.Triggers>

  <!-- Set properties when mouse pointer is over the button. -->
  <Trigger Property="IsMouseOver" Value="True">

    <!-- Below are three property settings that occur when the
         condition is met (user mouses over button).  -->
    <!-- Change the color of the outer rectangle when user          mouses over it. -->
    <Setter Property ="Rectangle.Stroke" TargetName="outerRectangle"
      Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}" />

    <!-- Sets the glass opacity to 1, therefore, the          glass "appears" when user mouses over it. -->
    <Setter Property="Rectangle.Opacity" Value="1"       TargetName="glassCube" />

    <!-- Makes the text slightly blurry as though you were          looking at it through blurry glass. -->
    <Setter Property="ContentPresenter.BitmapEffect"       TargetName="myContentPresenter">
      <Setter.Value>
        <BlurBitmapEffect Radius="1" />
      </Setter.Value>
    </Setter>
  </Trigger>
  <!-- Set properties when button has focus. -->   <Trigger Property="IsFocused" Value="true">     <Setter Property="Rectangle.Opacity" Value="1"       TargetName="glassCube" />     <Setter Property="Rectangle.Stroke" TargetName="outerRectangle"       Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}" />     <Setter Property="Rectangle.Opacity" Value="1" TargetName="glassCube" />   </Trigger>

</ControlTemplate.Triggers>

    Tekan F5 untuk menjalankan aplikasi dan klik salah satu tombol. Perhatikan bahwa tombol tetap disorot setelah Anda mengkliknya karena masih memiliki fokus. Jika Anda mengklik tombol lain, tombol baru mendapatkan fokus sementara yang terakhir kehilangannya.

  4. Tambahkan animasi untukMouseEnterMouseLeave Selanjutnya kita menambahkan beberapa animasi ke pemicu. Tambahkan markup berikut di mana saja di ControlTemplate.Triggers dalam blok.

    <!-- Animations that start when mouse enters and leaves button. -->
<EventTrigger RoutedEvent="Mouse.MouseEnter">
  <EventTrigger.Actions>
    <BeginStoryboard Name="mouseEnterBeginStoryboard">
      <Storyboard>
      <!-- This animation makes the glass rectangle shrink in the X direction. -->
        <DoubleAnimation Storyboard.TargetName="glassCube"
          Storyboard.TargetProperty=
          "(Rectangle.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)"
          By="-0.1" Duration="0:0:0.5" />
        <!-- This animation makes the glass rectangle shrink in the Y direction. -->
        <DoubleAnimation
        Storyboard.TargetName="glassCube"
          Storyboard.TargetProperty=
          "(Rectangle.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)"
          By="-0.1" Duration="0:0:0.5" />
      </Storyboard>
    </BeginStoryboard>
  </EventTrigger.Actions>
</EventTrigger>
<EventTrigger RoutedEvent="Mouse.MouseLeave">
  <EventTrigger.Actions>
    <!-- Stopping the storyboard sets all animated properties back to default. -->
    <StopStoryboard BeginStoryboardName="mouseEnterBeginStoryboard" />
  </EventTrigger.Actions>
</EventTrigger>

    Persegi panjang kaca menyusut ketika penunjuk mouse bergerak di atas tombol dan kembali ke ukuran normal saat penunjuk pergi.

    Ada dua animasi yang dipicu ketika penunjuk melewati tombol (MouseEnter peristiwa dinaikkan). Animasi ini menyusutkan persegi panjang kaca di sepanjang sumbu X dan Y. Perhatikan properti pada DoubleAnimation elemen - Duration dan By. Duration menentukan bahwa animasi terjadi lebih dari setengah detik, dan By menentukan bahwa kaca menyusut sebesar 10%.

    Pemicu peristiwa kedua (MouseLeave) hanya menghentikan yang pertama. Saat Anda menghentikan Storyboard, semua properti animasi kembali ke nilai defaultnya. Oleh karena itu, ketika pengguna memindahkan penunjuk dari tombol, tombol kembali ke cara sebelum penunjuk mouse bergerak di atas tombol. Untuk informasi selengkapnya tentang animasi, lihat Gambaran Umum Animasi.

  5. Tambahkan animasi saat tombol diklik: Langkah terakhir adalah menambahkan pemicu saat pengguna mengklik tombol. Tambahkan markup berikut di mana saja di ControlTemplate.Triggers dalam blok:

    <!-- Animation fires when button is clicked, causing glass to spin.  -->
<EventTrigger RoutedEvent="Button.Click">
  <EventTrigger.Actions>
    <BeginStoryboard>
      <Storyboard>
        <DoubleAnimation Storyboard.TargetName="glassCube"
          Storyboard.TargetProperty=
          "(Rectangle.RenderTransform).(TransformGroup.Children)[1].(RotateTransform.Angle)"
          By="360" Duration="0:0:0.5" />
      </Storyboard>
    </BeginStoryboard>
  </EventTrigger.Actions>
</EventTrigger>

    Tekan F5 untuk menjalankan aplikasi, dan klik salah satu tombol. Saat Anda mengklik tombol, persegi panjang kaca berputar.

Ringkasan

Dalam panduan ini, Anda melakukan latihan berikut:

  • Menargetkan Style ke jenis objek (Button).

  • Properti dasar yang dikontrol dari tombol di seluruh aplikasi menggunakan Style.

  • Membuat sumber daya seperti gradien yang akan digunakan untuk nilai Style properti setter.

  • Menyesuaikan tampilan tombol di seluruh aplikasi dengan menerapkan templat ke tombol.

  • Perilaku yang disesuaikan untuk tombol sebagai respons terhadap tindakan pengguna (seperti MouseEnter, , MouseLeavedan Click) yang menyertakan efek animasi.

Lihat juga