Как изменить цвет кнопки в зависимости от триггера?

Question

[Ternick]

Здравствуйте)

Мой код на xaml:

<Button Height="30" Width="100" Background="Red">
                        <Button.Triggers>
                            <EventTrigger RoutedEvent="MouseEnter">
                                <BeginStoryboard>
                                    <Storyboard>
                                        <ColorAnimation Storyboard.TargetProperty="(Button.Background).(SolidColorBrush.Color)" To="Purple"/>
                                    </Storyboard>
                                </BeginStoryboard>
                            </EventTrigger>
                            <EventTrigger RoutedEvent="MouseLeave">
                                <BeginStoryboard>
                                    <Storyboard>
                                        <ColorAnimation Storyboard.TargetProperty="(Button.Background).(SolidColorBrush.Color)" To="Red"/>
                                    </Storyboard>
                                </BeginStoryboard>
                            </EventTrigger>
                            <EventTrigger RoutedEvent="MouseDown">
                                <BeginStoryboard>
                                    <Storyboard>
                                        <ColorAnimation Storyboard.TargetProperty="(Button.Background).(SolidColorBrush.Color)" To="Black"/>
                                    </Storyboard>
                                </BeginStoryboard>
                            </EventTrigger>
                        </Button.Triggers>
                    </Button>

Но он не работает как ожидалось:
При наведении цвет кнопки изменяется на синий, а не на фиолетовый:

spoiler

Хотя после отведения указателя от кнопки цвет плавно перетекает из фиолетового в красный:

spoiler

Что можно сделать?

Answer 1

[Дмитрий]

Добрый день. Вам вероятно нужно создать шаблон кнопки. Вот пример сделанный на основе книги Мэтью Мак-Дональда

<Window.Resources>
        <!--шаблон кнопки-->
        <ControlTemplate x:Key="buttonTemplate1" TargetType="{x:Type Button}">         
            <Border Name="border" BorderBrush="Black" BorderThickness="1" CornerRadius="0" Background="Red"  TextBlock.Foreground="Black">
                <Grid>
                    <Rectangle Name="focusCue" Visibility="Hidden" Stroke="Black" StrokeThickness="1" StrokeDashArray="1 2" SnapsToDevicePixels="True"></Rectangle>
                    <ContentPresenter Margin="{TemplateBinding Padding}" HorizontalAlignment="Center"  RecognizesAccessKey="True"></ContentPresenter>
                </Grid>
            </Border>
            <ControlTemplate.Triggers>              
                <EventTrigger RoutedEvent="MouseEnter">
                    <BeginStoryboard>
                        <Storyboard>
                            <ColorAnimation Storyboard.TargetName="border" Storyboard.TargetProperty="Background.Color" To="Purple" >
                            </ColorAnimation>
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
                <EventTrigger RoutedEvent="MouseLeave">
                    <BeginStoryboard>
                        <Storyboard>
                            <ColorAnimation Storyboard.TargetName="border" Storyboard.TargetProperty="Background.Color" >
                            </ColorAnimation>
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
                <Trigger Property="IsPressed" Value="true">
                    <Setter TargetName="border" Property="Background" Value="IndianRed"></Setter>
                    <Setter TargetName="border" Property="BorderBrush" Value="DarkKhaki"></Setter>
                </Trigger>
                <Trigger Property="IsFocused" Value="true">
                    <Setter TargetName="focusCue" Property="Visibility" Value="Visible"></Setter>
                </Trigger>
                <Trigger Property="IsEnabled" Value="false">
                    <Setter TargetName="border" Property="TextBlock.Foreground" Value="Gray"></Setter>
                    <Setter TargetName="border" Property="Background" Value="MistyRose"></Setter>
                </Trigger>
            </ControlTemplate.Triggers>
        </ControlTemplate>
        <Style x:Key="newButtonStyle" TargetType="Button">
            <Setter Property="Control.Template" Value="{StaticResource buttonTemplate1}"></Setter>
        </Style>
    </Window.Resources>
    <StackPanel>      
        <Button Height="30" Width="100" Margin="10" Style="{StaticResource newButtonStyle}">            
        </Button>
    </StackPanel>

Comments

[Ternick]

Спасибо, ещё один вопрос тогда, можно ли все стили прописать в одном xaml файле, а затем их подключить в другой?

[Дмитрий]

Да, почитайте про словари ресурсов. https://metanit.com/sharp/wpf/9.3.php

[Ternick]

Дмитрий, Спасибо