Megosztás a következőn keresztül:

Útmutató: Gomb létrehozása az XAML használatával

Az útmutató célja, hogy megismerje, hogyan hozhat létre animált gombot a Windows Presentation Foundation (WPF) alkalmazásokban való használatra. Ez az útmutató stílusokat és sablonokat használ egy testre szabott gomberőforrás létrehozásához, amely lehetővé teszi a kód újrafelhasználását és a gomblogika elválasztását a gombdeklarációtól. Ez az útmutató teljes egészében extensible Application Markup Language (XAML) nyelven íródott.

Fontos

Ez az útmutató végigvezeti az alkalmazás létrehozásának lépésein az Extensible Application Markup Language (XAML) Visual Studióba való beírásával vagy másolásával és beillesztésével. Ha szeretné megtudni, hogyan hozhatja létre ugyanazt az alkalmazást tervezővel, olvassa el Gomb létrehozása a Microsoft Expression Blendhasználatával című témakört.

Az alábbi ábrán a kész gombok láthatók.

XAML használatával létrehozott egyéni gombok

Egyszerű gombok létrehozása

Először hozzunk létre egy új projektet, és adjunk hozzá néhány gombot az ablakhoz.

Új WPF-projekt létrehozása és gombok hozzáadása az ablakhoz

  1. Indítsa el a Visual Studiót.

  2. Új WPF-projekt létrehozása: A Fájl menüben mutasson a Újelemre, majd kattintson a projektelemre. Keresse meg a Windows-alkalmazás (WPF) sablont, és nevezze el az "AnimatedButton" projektet. Ez létrehozza az alkalmazás csontvázát.

  3. Alapszintű alapértelmezett gombok hozzáadása: Az útmutatóhoz szükséges összes fájlt a sablon biztosítja. A Window1.xaml fájl megnyitásához kattintson rá duplán a Megoldáskezelőben. Alapértelmezés szerint van egy Grid elem a Window1.xaml-ben. Távolítsa el a Grid elemet, és adjon hozzá néhány gombot az XAML (Extensible Application Markup Language, XAML) laphoz az alábbi kiemelt kód beírásával vagy másolásával és beillesztésével a Window1.xaml fájlba:

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

    Nyomja le az F5 billentyűt az alkalmazás futtatásához; a következő ábrához hasonló gomboknak kell megjelennie.

    Három alapvető gomb

    Most, hogy létrehozta az alapvető gombokat, befejezte a Windows1.xaml fájlban való munkát. Az útmutató további része az app.xaml fájlra, a stílusok meghatározására és a gombok sablonjára összpontosít.

Alaptulajdonságok beállítása

Ezután állítsunk be néhány tulajdonságot ezeken a gombokon a gomb megjelenésének és elrendezésének szabályozásához. Ahelyett, hogy külön-külön állít be tulajdonságokat a gombokon, erőforrásokat fog használni a teljes alkalmazás gombtulajdonságainak meghatározásához. Az alkalmazáserőforrások fogalmilag hasonlóak a weblapok külső kaszkádolt stíluslapjaihoz (CSS); az erőforrások azonban sokkal hatékonyabbak, mint a kaszkádolt stíluslapok (CSS), ahogy az útmutató végére látni fogja. További információ az erőforrásokról: XAML-erőforrások.

Stílusok használata a gombok alaptulajdonságainak beállításához

  1. Application.Resources-blokk definiálása: Nyissa meg az app.xaml fájlt, és adja hozzá a következő kiemelt jelölést, ha az még nincs megadva:

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

    Az erőforrás hatókörét az határozza meg, hogy hol definiálja az erőforrást. Az app.xaml fájlban lévő Application.Resources erőforrások definiálása lehetővé teszi, hogy az erőforrás az alkalmazás bármely pontjáról használható legyen. Az erőforrások hatókörének meghatározásáról további információt az XAML-erőforrások című témakörben talál.

  2. Stílus létrehozása és alaptulajdonságértékek definiálása: Adja hozzá a következő korrektúrát a Application.Resources blokkhoz. Ez a korrektúra létrehoz egy Style-t, amely az alkalmazás összes gombjára vonatkozik, a gombok Width értékét 90-re, a Margin értékét pedig 10-re állítva.

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

    A TargetType tulajdonság azt határozza meg, hogy a stílus minden Buttontípusú objektumra vonatkozik. Minden Setter a Styleeltérő tulajdonságértéket állít be. Ezért ezen a ponton az alkalmazás minden gombja 90 szélességű és 10 margóval rendelkezik. Ha az alkalmazás futtatásához nyomja le az F5 billentyűt, az alábbi ablak jelenik meg.

    Gombok, amelyek szélessége 90, és margója 10

    A stílusokkal sokkal többet is elvégezhet, többek között többféleképpen finomhangolhatja a megcélzott objektumokat, összetett tulajdonságértékeket adhat meg, vagy akár stílusokat is használhat más stílusok bemeneteként. További információ: Stílus és sablonkészítés.

  3. Stílustulajdonság értékének beállítása erőforrásra: Az erőforrások egyszerű módot tesznek lehetővé a gyakran definiált objektumok és értékek újrafelhasználására. Különösen hasznos összetett értékeket definiálni erőforrások használatával, hogy a kód modulárisabb legyen. Adja hozzá az alábbi kiemelt jelölést az app.xaml-hez.

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

    Közvetlenül a Application.Resources blokk alatt létrehozott egy "GrayBlueGradientBrush" nevű erőforrást. Ez az erőforrás vízszintes színátmenetet határoz meg. Ez az erőforrás az alkalmazás bármely pontjáról használható tulajdonságértékként, beleértve a Background tulajdonság gombstílus-beállítójában is. Most az összes gomb rendelkezik a színátmenet Background tulajdonságértékével.

    Nyomja le az F5 billentyűt az alkalmazás futtatásához. Úgy kell kinéznie, mint a következő.

    Színátmenetes háttérrel rendelkező gombok

A gomb megjelenését meghatározó sablon létrehozása

Ebben a szakaszban létrehoz egy sablont, amely testre szabja a gomb megjelenését (bemutatóját). A gombbemutató több objektumból áll, köztük téglalapokból és más összetevőkből, hogy egyedi megjelenést kölcsönözzen a gombnak.

Eddig a gombok alkalmazásbeli megjelenésének szabályozása a gomb tulajdonságainak módosítására korlátozódott. Mi a teendő, ha radikálisabb módosításokat szeretne végezni a gomb megjelenésén? A sablonok hatékony vezérlést tesznek lehetővé egy objektum bemutatója felett. Mivel a sablonok stílusokon belül is használhatók, sablont alkalmazhat az összes objektumra, amelyekre a stílus vonatkozik (ebben az útmutatóban a gombot).

A sablon használata a gomb megjelenésének meghatározásához

  1. A sablon beállítása: Mivel az Button vezérlőelemeknek van Template tulajdonságuk, a sablon tulajdonság értékét ugyanúgy meghatározhatja, mint a többi tulajdonságértéket, ahogy azt korábban a Style esetében tettük egy Setterhasználatával. Adja hozzá a következő kiemelt jelölést a gombstílushoz.

    <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. Alter button presentation: Ezen a ponton meg kell határoznia a sablont. Adja hozzá az alábbi kiemelt jelöléseket. Ez a jelölés két Rectangle elemet határoz meg lekerekített élekkel, majd egy DockPanelelemet. A DockPanel a gomb ContentPresenter üzemeltetésére szolgál. Egy ContentPresenter megjeleníti a gomb tartalmát. Ebben az útmutatóban a tartalom szöveg ("1. gomb", "2. gomb", "3. gomb"). Az összes sablonösszetevő (a téglalapok és a DockPanel) egy Gridbelül vannak elhelyezve.

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

    Nyomja le az F5 billentyűt az alkalmazás futtatásához. Úgy kell kinéznie, mint a következő.

    Ablak 3 gombbal

  3. Üveghatás hozzáadása a sablonhoz: Ezután hozzáadja az üveget. Először hozzon létre néhány erőforrást, amelyek egy üvegátmenetes effektust hoznak létre. Adja hozzá ezeket a színátmenetes erőforrásokat a Application.Resources blokkon belül:

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

    Ezek az erőforrások a téglalap Fill-ként használatosak, amelyet a gombsablon Grid-jébe illesztünk be. Adja hozzá a következő kiemelt jelölést a sablonhoz.

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

    Figyelje meg, hogy a "glassCube" Opacity tulajdonságú téglalap x:Name értéke 0, így amikor futtatja a mintát, nem látható a tetején az átlátszó téglalap. Ennek az az oka, hogy később eseményindítókat adunk hozzá a sablonhoz, amikor a felhasználó használja a gombot. Az Opacity érték 1 értékre való módosításával és az alkalmazás futtatásával azonban láthatja, hogyan néz ki most a gomb. Lásd az alábbi ábrát. A következő lépés előtt állítsa vissza a Opacity-t 0-ra.

    XAML használatával létrehozott egyéni gombok

Gomb interaktivitás létrehozása

Ebben a szakaszban tulajdonság-eseményindítókat és eseményindítókat fog létrehozni a tulajdonságértékek módosításához, és animációkat futtat a felhasználói műveletekre válaszul, például az egérmutatót a gombra mozgatva és kattintással.

Az interaktivitás (egérmutató, egérút, kattintás stb.) hozzáadásának egyszerű módja az eseményindítók sablonon vagy stíluson belüli definiálása. Triggerlétrehozásához meg kell adnia egy "feltétel" tulajdonságot, például: A gomb IsMouseOver tulajdonság értéke megegyezik true. Ezután definiálhatja azokat a beállítókat (műveleteket), amelyek akkor történnek, amikor az eseményindító feltétel teljesül.

Gomb interaktivitásának létrehozása

  1. Sablonindítók hozzáadása: A kiemelt jelölések hozzáadása a sablonhoz.

    <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. Tulajdonság triggerek hozzáadása: A kiemelt jelöléskód hozzáadása a ControlTemplate.Triggers blokkhoz:

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

    Nyomja le az F5 billentyűt az alkalmazás futtatásához, és tekintse meg az effektust, amikor az egérmutatót a gombok fölé viszi.

  3. Fókusz eseményindító hozzáadása: Következő lépésként hozzáadunk néhány hasonló beállítót az eset kezeléséhez, ha a gomb fókuszban van (például miután a felhasználó rákattint rá).

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

    Nyomja le az F5 billentyűt az alkalmazás futtatásához, és kattintson az egyik gombra. Figyelje meg, hogy a gomb a kattintás után is kiemelt marad, mert még mindig fókuszban van. Ha egy másik gombra kattint, az új gomb fókuszba kerül, míg az utolsó elveszíti azt.

  4. MouseEnter ésMouseLeaveanimációinak hozzáadása: Ezután hozzáadunk néhány animációt az eseményindítókhoz. Adja hozzá az alábbi jelölést a ControlTemplate.Triggers blokkba.

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

    Az üveg téglalap kisebb lesz, amikor az egérmutató a gomb fölé mozdul, és visszaáll eredeti méretére, amikor a mutató távozik.

    Két animáció aktiválódik, amikor az egérmutató átmegy a gombon (MouseEnter esemény fel van emelve). Ezek az animációk az X és az Y tengely mentén zsugorítják az üveg téglalapot. Figyelje meg a tulajdonságokat a DoubleAnimation elemeken – Duration és By. A Duration azt határozza meg, hogy az animáció fél másodperc alatt történik, By pedig azt adja meg, hogy az üveg 10%kicsinyedik.

    A második eseményindító (MouseLeave) egyszerűen leállítja az elsőt. Ha leállítja a Storyboard, az összes animált tulajdonság visszatér az alapértelmezett értékekhez. Ezért amikor a felhasználó áthelyezi az egérmutatót a gombról, a gomb visszakerül az addigihoz, mint azelőtt, hogy az egérmutató a gomb fölé került volna. További információ az animációkról: Animáció áttekintése.

  5. Animáció hozzáadása a gombra kattintáskor: Az utolsó lépés egy eseményindító hozzáadása, amikor a felhasználó a gombra kattint. Adja hozzá a következő jelölést a ControlTemplate.Triggers blokkon belül:

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

    Az alkalmazás futtatásához nyomja le az F5 billentyűt, majd kattintson az egyik gombra. Ha egy gombra kattint, az üveg téglalapja forog.

Összefoglalás

Ebben az útmutatóban a következő gyakorlatokat hajtotta végre:

  • A Style célzott egy objektumtípusra (Button).

  • A teljes alkalmazásban a gombok alapvető tulajdonságainak szabályozása a Stylehasználatával történt.

  • Olyan erőforrásokat hozott létre, mint a színátmenetek, amelyeket a Style-beállítók tulajdonságértékeihez használhat.

  • Testre szabta a gombok megjelenését a teljes alkalmazásban, ha sablont alkalmaz a gombokra.

  • A gombok egyéni viselkedése az animációs effektusokat tartalmazó felhasználói műveletekre (például MouseEnter, MouseLeaveés Click) reagálva.

Lásd még

  • Last updated on