Sdílet prostřednictvím

Návod: Vytvoření tlačítka použitím XAML

Cílem tohoto názorného postupu je naučit se vytvořit animované tlačítko pro použití v aplikaci Windows Presentation Foundation (WPF). Tento názorný postup používá styly a šablonu k vytvoření přizpůsobeného prostředku tlačítka, který umožňuje opakované použití kódu a oddělení logiky tlačítka z deklarace tlačítka. Tento názorný postup je napsán zcela v jazyce XAML (Extensible Application Markup Language).

Důležité

Tento názorný postup vás provede postupem vytvoření aplikace zadáním nebo zkopírováním a vložením jazyka XAML (Extensible Application Markup Language) do sady Visual Studio. Pokud chcete zjistit, jak pomocí návrháře vytvořit stejnou aplikaci, přečtěte si téma Vytvoření tlačítka pomocí aplikace Microsoft Expression Blend.

Následující obrázek znázorňuje hotová tlačítka.

Vlastní tlačítka vytvořená pomocí XAML

Vytvořit základní tlačítka

Začněme vytvořením nového projektu a přidáním několika tlačítek do okna.

Vytvoření nového projektu WPF a přidání tlačítek do okna

  1. Spusťte Visual Studio.

  2. Vytvořte nový projekt WPF: V nabídce Soubor přejděte na příkaz Nový a klepněte na tlačítko Projekt. Vyhledejte šablonu aplikace systému Windows (WPF) a pojmenujte projekt "AnimatedButton". Tím se vytvoří kostra aplikace.

  3. Přidejte základní výchozí tlačítka: Šablona poskytuje všechny soubory, které potřebujete pro tento názorný postup. Otevřete soubor Window1.xaml poklikáním v Průzkumník řešení. Ve výchozím nastavení je Grid v souboru Window1.xaml prvek. Grid Odeberte prvek a přidejte několik tlačítek na stránku XAML (Extensible Application Markup Language) zadáním nebo zkopírováním a vložením následujícího zvýrazněného kódu do 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>

    Stisknutím klávesy F5 spusťte aplikaci; Měli byste vidět sadu tlačítek, která vypadají jako na následujícím obrázku.

    Tři základní tlačítka

    Teď, když jste vytvořili základní tlačítka, jste hotovi v souboru Window1.xaml. Zbytek názorného postupu se zaměřuje na soubor app.xaml a definuje styly a šablonu tlačítek.

Nastavení základních vlastností

V dalším kroku nastavíme některé vlastnosti těchto tlačítek, abychom mohli řídit vzhled a rozložení tlačítka. Místo nastavení vlastností tlačítek jednotlivě použijete prostředky k definování vlastností tlačítek pro celou aplikaci. Prostředky aplikace jsou koncepčně podobné externím šablonám stylů CSS (Css) pro webové stránky; Prostředky jsou však mnohem výkonnější než šablony stylů CSS (Cascading Style Sheet), jak uvidíte na konci tohoto návodu. Další informace o prostředcích najdete v tématu Prostředky XAML.

Použití stylů k nastavení základních vlastností tlačítek

  1. Definujte blok Application.Resources: Otevřete app.xaml a přidejte následující zvýrazněné značky, pokud tam ještě není:

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

    Rozsah prostředků se určuje podle toho, kde prostředek definujete. Definování prostředků v Application.Resources souboru app.xaml umožňuje použití prostředku odkudkoli v aplikaci. Další informace o definování rozsahu vašich prostředků najdete v tématu Prostředky XAML.

  2. Vytvořte styl a definujte základní hodnoty vlastností: Přidejte do Application.Resources bloku následující kód. Tento kód vytvoří Style kód, který se vztahuje na všechna tlačítka v aplikaci, nastavení Width tlačítek na 90 a Margin na 10:

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

    Vlastnost TargetType určuje, že styl platí pro všechny objekty typu Button. Každá Setter nastaví jinou hodnotu vlastnosti .Style V tomto okamžiku má tedy každé tlačítko v aplikaci šířku 90 a okraj 10. Pokud aplikaci spustíte stisknutím klávesy F5, zobrazí se následující okno.

    Tlačítka s šířkou 90 a okrajem 10

    S styly můžete dělat mnohem více, včetně různých způsobů, jak doladit cílené objekty, zadat komplexní hodnoty vlastností a dokonce použít styly jako vstup pro jiné styly. Další informace naleznete v tématu stylování a šablonování.

  3. Nastavte hodnotu vlastnosti stylu na prostředek: Prostředky umožňují jednoduchý způsob opakovaného použití běžně definovaných objektů a hodnot. Je zvlášť užitečné definovat složité hodnoty pomocí prostředků, aby byl kód modulární. Do souboru app.xaml přidejte následující zvýrazněné značky.

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

    Přímo pod Application.Resources blokem jste vytvořili prostředek s názvem GrayBlueGradientBrush. Tento prostředek definuje vodorovný přechod. Tento prostředek lze použít jako hodnotu vlastnosti odkudkoli v aplikaci, včetně nastavení stylu tlačítka pro Background vlastnost. Teď mají Background všechna tlačítka hodnotu vlastnosti tohoto přechodu.

    Stisknutím klávesy F5 spusťte aplikaci. Mělo by to vypadat následovně.

    Tlačítka s přechodovým pozadím

Vytvoření šablony, která definuje vzhled tlačítka

V této části vytvoříte šablonu, která přizpůsobí vzhled tlačítka (prezentaci). Prezentace tlačítka se skládá z několika objektů včetně obdélníků a dalších součástí, aby bylo tlačítko jedinečné.

Zatím bylo řízení vzhledu tlačítek v aplikaci omezeno na změnu vlastností tlačítka. Co když chcete udělat radikálnější změny vzhledu tlačítka? Šablony umožňují výkonnou kontrolu nad prezentací objektu. Vzhledem k tomu, že šablony lze použít v rámci stylů, můžete šablonu použít pro všechny objekty, na které se styl vztahuje (v tomto názorném postupu, tlačítko).

Použití šablony k definování vzhledu tlačítka

  1. Nastavení šablony: Protože ovládací prvky jako Button mají Template vlastnost, můžete definovat hodnotu vlastnosti šablony stejně jako ostatní hodnoty vlastností, které jsme nastavili pomocí StyleSetter. Do stylu tlačítka přidejte následující zvýrazněné značky.

    <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. Změnit prezentaci tlačítek: V tomto okamžiku je potřeba definovat šablonu. Přidejte následující zvýrazněnou značku. Tento kód určuje dva Rectangle prvky se zaoblenými hranami, za kterými následuje .DockPanel Slouží DockPanel k hostování ContentPresenter tlačítka. A ContentPresenter zobrazí obsah tlačítka. V tomto názorném postupu je obsah textem (Tlačítko 1, Tlačítko 2, Tlačítko 3). Všechny součásti šablony (obdélníky a DockPanel) jsou rozloženy uvnitř .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>

    Stisknutím klávesy F5 spusťte aplikaci. Mělo by to vypadat následovně.

    Okno s 3 tlačítky

  3. Přidejte do šablony sklo: Dále přidáte sklo. Nejprve vytvoříte některé prostředky, které vytvoří efekt přechodu ze skla. Přidejte tyto prostředky přechodu kamkoli do Application.Resources bloku:

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

    Tyto prostředky se používají jako Fill obdélník, který vložíme do Grid šablony tlačítka. Do šablony přidejte následující zvýrazněný kód.

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

    Všimněte si, že Opacity obdélník s x:Name vlastností "glassCube" je 0, takže při spuštění vzorku nevidíte překryvný obdélník skla nahoře. Důvodem je to, že později do šablony přidáme triggery, kdy uživatel s tlačítkem pracuje. Teď ale uvidíte, jak tlačítko vypadá, změnou Opacity hodnoty na 1 a spuštěním aplikace. Podívejte se na následující obrázek. Než budete pokračovat k dalšímu kroku, změňte Opacity zpět na 0.

    Vlastní tlačítka vytvořená pomocí XAML

Interaktivita tlačítka Vytvořit

V této části vytvoříte triggery vlastností a triggery událostí, které změní hodnoty vlastností a spustí animace v reakci na akce uživatele, jako je přesunutí ukazatele myši na tlačítko a kliknutí.

Snadný způsob, jak přidat interaktivitu (najetí myší, opuštění myši, kliknutí atd.) je definovat triggery v rámci šablony nebo stylu. Chcete-li vytvořit Trigger, definujete vlastnost "podmínka", například: Hodnota vlastnosti tlačítka IsMouseOver je rovna true. Pak definujete settery (akce), které se provádějí, když je podmínka triggeru pravdivá.

Vytvoření interaktivity tlačítek

  1. Přidání triggerů šablony: Přidejte do šablony zvýrazněné značky.

    <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. Aktivační události pro přidání vlastností: Přidejte zvýrazněné značky 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/>

    Stisknutím klávesy F5 spusťte aplikaci a zobrazte efekt při spuštění ukazatele myši nad tlačítky.

  3. Přidejte trigger fokusu: V dalším kroku přidáme několik podobných setter pro zpracování případu, když má tlačítko fokus (například po kliknutí uživatele).

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

    Stisknutím klávesy F5 spusťte aplikaci a klikněte na jedno z tlačítek. Všimněte si, že tlačítko zůstane po kliknutí zvýrazněné, protože je stále fokus. Pokud kliknete na jiné tlačítko, nové tlačítko získá fokus, zatímco poslední tlačítko ztratí.

  4. Přidání animací proMouseEnterMouseLeave Další přidáme některé animace do aktivačních událostí. Přidejte následující kód kamkoli do 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>

    Obdélník skla se zmenší, když se ukazatel myši přesune přes tlačítko a vrátí se zpět k normální velikosti, když ukazatel opustí.

    Existují dvě animace, které se aktivují, když ukazatel přejde na tlačítko (MouseEnter vyvolá se událost). Tyto animace zmenšují obdélník skla podél osy X a Y. Všimněte si vlastností DoubleAnimation prvků – Duration a By. Určuje Duration , že animace probíhá více než půl sekundy a By určuje, že se sklo zmenší o 10 %.

    Druhý trigger události (MouseLeave) jednoduše zastaví první. Když zastavíte , Storyboardvšechny animované vlastnosti se vrátí k výchozím hodnotám. Proto když uživatel přesune ukazatel mimo tlačítko, tlačítko se vrátí zpět na způsob, jakým byl před přesunutím ukazatele myši na tlačítko. Další informace o animacích najdete v tématu Přehled animací.

  5. Přidání animace pro kliknutí na tlačítko: Posledním krokem je přidání triggeru, když uživatel klikne na tlačítko. Do bloku přidejte následující kód:ControlTemplate.Triggers

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

    Stisknutím klávesy F5 spusťte aplikaci a klikněte na jedno z tlačítek. Když kliknete na tlačítko, sklápěcí obdélník se roztáčí kolem.

Shrnutí

V tomto názorném postupu jste provedli následující cvičení:

  • Cílí Style na typ objektu (Button).

  • Řízené základní vlastnosti tlačítek v celé aplikaci pomocí .Style

  • Vytvořené prostředky, jako jsou přechody, které se použijí pro hodnoty Style vlastností setter.

  • Přizpůsobili jsme vzhled tlačítek v celé aplikaci použitím šablony u tlačítek.

  • Přizpůsobené chování tlačítek v reakci na akce uživatele (například MouseEnter, MouseLeavea Click) zahrnující animační efekty.

Viz také