Стиль Xaml для кнопки “крестик”

169

29 сентября 2019, 05:30

В триггерах, сеттерах и т д не очень силён, подскажите пожалуйста, как можно реализовать стиль, чтобы при наведении на кнопку, она постепенно , слегка поменяла цвет, например с белого на чутка сероватый, и т.д P.s моя кнопка, это изображение "крестик" - то есть tile brush , и мне нужно чтобы стиль работал так, чтобы не сама область кнопки по стилю работала, а именно изображение этого крестика в кнопке, как то это можно сделать? Или есть проще способ?

Answer 1

Создадим новый стиль, в TargetType задаем {x:Type Button}. Внутри стиля зададим задний фон и фон текста:
```
<Style TargetType="{x:Type Button}">
    <Setter Property="Background" Value="Transparent"/>
    <Setter Property="Foreground" Value="CadetBlue"/>
</Style>
```

Далее переопределим шаблон кнопки, пусть это будет векторное изображение, которое будет автоматически подстраиваться под объект. Все цвета и размеры мы возьмем от шаблона:

<Style TargetType="{x:Type Button}">
    <Setter Property="Background" Value="Transparent"/>
    <Setter Property="Foreground" Value="CadetBlue"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate>
                <Border Background="{TemplateBinding Background}">
                    <Viewbox>
                        <Canvas Width="24" Height="24" x:Name="Canvas">
                            <Path Data="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z" Fill="{TemplateBinding Foreground}" />
                        </Canvas>
                    </Viewbox>
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Теперь остается сделать анимацию при наведении/потери фокуса мыши. Так, как вы хотите сделать "слегка сероватый" цвет, то тут отлично подойдет анимация прозрачности. Нам нужно создать два EventTrigger внутри ControlTemplate, которые проиграют нужную нам анимацию:

<ControlTemplate.Triggers>
    <EventTrigger RoutedEvent="MouseEnter">
        <BeginStoryboard>
            <Storyboard>
                <DoubleAnimation 
                    Storyboard.TargetName="Canvas"
                    Storyboard.TargetProperty="Opacity" To=".5" Duration="0:0:.8" />
            </Storyboard>
        </BeginStoryboard>
    </EventTrigger>
    <EventTrigger RoutedEvent="MouseLeave">
        <BeginStoryboard>
            <Storyboard>
                <DoubleAnimation 
                    Storyboard.TargetName="Canvas"
                    Storyboard.TargetProperty="Opacity" To="1" Duration="0:0:.8" />
            </Storyboard>
        </BeginStoryboard>
    </EventTrigger>
</ControlTemplate.Triggers>

Можно заметить, что с помощью Storyboard.TargetName мы меняем только прозрачность самого "креста" (векторной графики). Если вам нужно менять прозрачность всей кнопки, то уберите это, либо задайте имя на другой элемент стиля.

Результат: