Wskazówki: Tworzenie przycisku przy użyciu XAML

  • Artykuł

Celem tego przewodnika jest nauczenie się, jak utworzyć animowany przycisk do użycia w aplikacji Windows Presentation Foundation (WPF). W tym przewodniku użyto stylów i szablonu, aby utworzyć dostosowany zasób przycisku, który umożliwia ponowne użycie kodu i oddzielenie logiki przycisku od deklaracji przycisku. Ten przewodnik jest napisany w całości w języku XAML (Extensible Application Markup Language).

Ważne

Ten przewodnik przeprowadzi Cię przez kroki tworzenia aplikacji przez wpisanie lub kopiowanie i wklejanie języka Extensible Application Markup Language (XAML) do programu Visual Studio. Jeśli wolisz dowiedzieć się, jak używać projektanta do tworzenia tej samej aplikacji, zobacz Tworzenie przycisku przy użyciu programu Microsoft Expression Blend.

Na poniższej ilustracji przedstawiono gotowe przyciski.

Custom buttons that were created by using XAML

Tworzenie przycisków podstawowych

Zacznijmy od utworzenia nowego projektu i dodania kilku przycisków do okna.

Aby utworzyć nowy projekt WPF i dodać przyciski do okna

  1. Uruchom program Visual Studio.

  2. Utwórz nowy projekt WPF: w menu Plik wskaż polecenie Nowy, a następnie kliknij pozycję Projekt. Znajdź szablon Aplikacja systemu Windows (WPF) i nadaj projektowi nazwę "AnimatedButton". Spowoduje to utworzenie szkieletu aplikacji.

  3. Dodaj podstawowe przyciski domyślne: wszystkie pliki potrzebne do tego przewodnika są dostarczane przez szablon. Otwórz plik Window1.xaml, klikając go dwukrotnie w Eksplorator rozwiązań. Domyślnie w pliku Window1.xaml znajduje Grid się element . Grid Usuń element i dodaj kilka przycisków do strony Extensible Application Markup Language (XAML), wpisując lub wklejając następujący wyróżniony kod do pliku 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>

    Naciśnij klawisz F5, aby uruchomić aplikację; Powinien zostać wyświetlony zestaw przycisków, które wyglądają jak na poniższym rysunku.

    Three basic buttons

    Po utworzeniu przycisków podstawowych skończysz pracę w pliku Window1.xaml. Pozostała część przewodnika koncentruje się na pliku app.xaml, zdefiniowaniu stylów i szablonie przycisków.

Ustawianie właściwości podstawowych

Następnie ustawmy niektóre właściwości na tych przyciskach, aby kontrolować wygląd i układ przycisku. Zamiast ustawiać właściwości przycisków osobno, użyjesz zasobów do zdefiniowania właściwości przycisku dla całej aplikacji. Zasoby aplikacji są koncepcyjnie podobne do zewnętrznych kaskadowych arkuszy stylów (CSS) dla stron sieci Web; jednak zasoby są znacznie bardziej zaawansowane niż kaskadowe arkusze stylów (CSS), jak zobaczysz na końcu tego przewodnika. Aby dowiedzieć się więcej o zasobach, zobacz Zasoby XAML.

Aby użyć stylów, aby ustawić podstawowe właściwości na przyciskach

  1. Zdefiniuj blok Application.Resources: Otwórz plik app.xaml i dodaj następujący wyróżniony znacznik, jeśli jeszcze nie istnieje:

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

    Zakres zasobów jest określany przez miejsce definiowania zasobu. Definiowanie zasobów w Application.Resources pliku app.xaml umożliwia użycie zasobu z dowolnego miejsca w aplikacji. Aby dowiedzieć się więcej na temat definiowania zakresu zasobów, zobacz Zasoby XAML.

  2. Utwórz styl i zdefiniuj za jego pomocą podstawowe wartości właściwości: Dodaj następujący znacznik do Application.Resources bloku. Ten znacznik tworzy element Style , który ma zastosowanie do wszystkich przycisków w aplikacji, ustawiając Width przyciski na 90 i Margin 10:

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

    Właściwość TargetType określa, że styl ma zastosowanie do wszystkich obiektów typu Button. Każda z nich Setter ustawia inną wartość właściwości dla elementu Style. W związku z tym każdy przycisk w aplikacji ma szerokość 90 i margines 10. Jeśli naciśnij klawisz F5, aby uruchomić aplikację, zostanie wyświetlone następujące okno.

    Buttons with a width of 90 and a margin of 10

    Istnieje o wiele więcej możliwości w przypadku stylów, w tym różne sposoby dostosowywania obiektów docelowych, określania złożonych wartości właściwości, a nawet używania stylów jako danych wejściowych dla innych stylów. Aby uzyskać więcej informacji, zobacz Styling and Templating (Styling and Templating).

  3. Ustaw wartość właściwości stylu na zasób: Zasoby umożliwiają proste użycie często zdefiniowanych obiektów i wartości. Szczególnie przydatne jest definiowanie złożonych wartości przy użyciu zasobów w celu zwiększenia modułu kodu. Dodaj następujący wyróżniony znacznik do pliku 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>

    Bezpośrednio pod blokiem Application.Resources utworzono zasób o nazwie "GrayBlueGradientBrush". Ten zasób definiuje gradient poziomy. Ten zasób może służyć jako wartość właściwości z dowolnego miejsca w aplikacji, w tym wewnątrz ustawiania stylu przycisku dla Background właściwości. Teraz wszystkie przyciski mają Background wartość właściwości tego gradientu.

    Naciśnij klawisz F5, aby uruchomić aplikację. Powinno to wyglądać tak.

    Buttons with a gradient background

Tworzenie szablonu definiującego wygląd przycisku

W tej sekcji utworzysz szablon, który dostosowuje wygląd (prezentację) przycisku. Prezentacja przycisku składa się z kilku obiektów, w tym prostokątów i innych składników w celu nadania przyciskowi unikatowego wyglądu.

Do tej pory kontrola wyglądu przycisków w aplikacji została ograniczona do zmiany właściwości przycisku. Co zrobić, jeśli chcesz wprowadzić bardziej radykalne zmiany wyglądu przycisku? Szablony umożliwiają zaawansowaną kontrolę nad prezentacją obiektu. Ponieważ szablony mogą być używane w stylach, można zastosować szablon do wszystkich obiektów, do których ma zastosowanie styl (w tym przewodniku, przycisku).

Aby użyć szablonu do zdefiniowania wyglądu przycisku

  1. Skonfiguruj szablon: ponieważ kontrolki, takie jak Button właściwość, Template można zdefiniować wartość właściwości szablonu tak samo jak inne wartości właściwości ustawione w Style obiekcie przy użyciu elementu Setter. Dodaj następujący wyróżniony znacznik do stylu przycisku.

    <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. Zmień prezentację przycisku: w tym momencie należy zdefiniować szablon. Dodaj następujący wyróżniony znacznik. Ten znacznik określa dwa Rectangle elementy z zaokrąglonymi krawędziami, po których następuje DockPanelznak . Element DockPanel jest używany do hostowania ContentPresenter przycisku . Obiekt ContentPresenter wyświetla zawartość przycisku. W tym przewodniku zawartość to tekst ("Przycisk 1", "Przycisk 2", "Przycisk 3"). Wszystkie składniki szablonu (prostokąty i DockPanel) są ułożone wewnątrz elementu 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>

    Naciśnij klawisz F5, aby uruchomić aplikację. Powinno to wyglądać tak.

    Window with 3 buttons

  3. Dodaj glasseffect do szablonu: Następnie dodasz szkło. Najpierw należy utworzyć niektóre zasoby, które tworzą efekt gradientu szkła. Dodaj te zasoby gradientowe w dowolnym miejscu bloku Application.Resources :

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

    Te zasoby są używane jako Fill prostokąt wstawiany do Grid szablonu przycisku. Dodaj następujący wyróżniony znacznik do szablonu.

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

    Zwróć uwagę, że Opacity prostokąt z x:Name właściwością "glassCube" wynosi 0, więc po uruchomieniu próbki nie widać przeklejenia szklanego prostokąta na górze. Dzieje się tak, ponieważ później dodamy wyzwalacze do szablonu, gdy użytkownik wchodzi w interakcję z przyciskiem. Możesz jednak zobaczyć, jak wygląda teraz przycisk, zmieniając Opacity wartość na 1 i uruchamiając aplikację. Zobacz poniższą ilustrację. Przed przejściem do następnego kroku zmień wartość z Opacity powrotem na 0.

    Custom buttons that were created by using XAML

Tworzenie interakcyjności przycisku

W tej sekcji utworzysz wyzwalacze właściwości i wyzwalacze zdarzeń, aby zmienić wartości właściwości i uruchomić animacje w odpowiedzi na akcje użytkownika, takie jak przeniesienie wskaźnika myszy nad przyciskiem i kliknięcie.

Łatwym sposobem dodawania interakcyjności (myszy, pozostawienia myszy, kliknięcia itd.) jest zdefiniowanie wyzwalaczy w szablonie lub stylu. Aby utworzyć obiekt Trigger, należy zdefiniować właściwość "warunek", taką jak: wartość właściwości przycisku IsMouseOver jest równa true. Następnie zdefiniuj metody ustawiające (akcje), które mają miejsce, gdy warunek wyzwalacza ma wartość true.

Aby utworzyć interakcyjność przycisku

  1. Dodaj wyzwalacze szablonu: dodaj wyróżniony znacznik do szablonu.

    <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. Dodaj wyzwalacze właściwości: Dodaj wyróżniony znacznik do ControlTemplate.Triggers bloku:

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

    Naciśnij klawisz F5, aby uruchomić aplikację i zobaczyć efekt podczas uruchamiania wskaźnika myszy nad przyciskami.

  3. Dodaj wyzwalacz fokusu: Następnie dodamy kilka podobnych setterów, aby obsłużyć przypadek, gdy przycisk ma fokus (na przykład po kliknięciu go przez użytkownika).

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

    Naciśnij klawisz F5, aby uruchomić aplikację i kliknij jeden z przycisków. Zwróć uwagę, że przycisk pozostaje wyróżniony po kliknięciu go, ponieważ nadal ma fokus. Jeśli klikniesz inny przycisk, nowy przycisk uzyska fokus, podczas gdy ostatni utraci go.

  4. Dodaj animacje dlaMouseEnteriMouseLeave: Następnie dodamy kilka animacji do wyzwalaczy. Dodaj następujący znacznik w dowolnym miejscu w ControlTemplate.Triggers bloku.

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

    Szklany prostokąt zmniejsza się, gdy wskaźnik myszy przesuwa się nad przyciskiem i wraca do normalnego rozmiaru, gdy wskaźnik odchodzi.

    Istnieją dwie animacje, które są wyzwalane, gdy wskaźnik przechodzi przez przycisk (MouseEnter zdarzenie jest zgłaszane). Te animacje zmniejszają prostokąt szkła wzdłuż osi X i Y. Zwróć uwagę na właściwości elementów DoubleAnimation — Duration i By. Określa Duration , że animacja występuje ponad pół sekundy i By określa, że szkło zmniejsza się o 10%.

    Drugi wyzwalacz zdarzenia (MouseLeave) po prostu zatrzymuje pierwszy. Gdy zatrzymasz element Storyboard, wszystkie animowane właściwości powrócą do ich wartości domyślnych. W związku z tym, gdy użytkownik przenosi wskaźnik z przycisku, przycisk wraca do sposobu, w jaki wskaźnik myszy został przeniesiony przez przycisk. Aby uzyskać więcej informacji na temat animacji, zobacz Omówienie animacji.

  5. Dodaj animację po kliknięciu przycisku: ostatnim krokiem jest dodanie wyzwalacza po kliknięciu przycisku przez użytkownika. Dodaj następujący znacznik w dowolnym miejscu w ControlTemplate.Triggers bloku:

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

    Naciśnij klawisz F5, aby uruchomić aplikację, a następnie kliknij jeden z przycisków. Po kliknięciu przycisku szklany prostokąt obraca się wokół.

Podsumowanie

W tym przewodniku wykonano następujące ćwiczenia:

  • Obiekt docelowy Style typu obiektu (Button).

  • Kontrolowane podstawowe właściwości przycisków w całej aplikacji przy użyciu .Style

  • Utworzone zasoby, takie jak gradienty do użycia dla wartości Style właściwości ustawiających.

  • Dostosowywanie wyglądu przycisków w całej aplikacji przez zastosowanie szablonu do przycisków.

  • Dostosowane zachowanie przycisków w odpowiedzi na akcje użytkownika (takie jak MouseEnter, MouseLeavei Click), które obejmowały efekty animacji.

Zobacz też