Question

我有一个XAML ResourceDictionary，我尝试为程序中的所有按钮定义一致的设计。

我设法为他们制作了一个设计，使用以下代码：

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Style TargetType="{x:Type Button}">
        <Setter Property="OverridesDefaultStyle" Value="True" />
        <Setter Property="SnapsToDevicePixels" Value="True" />
        <Setter Property="Foreground" Value="MidnightBlue" />
        <Setter Property="Background" Value="White" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate x:Name="tmpltButton">
                    <Grid>
                        <Border x:Name="ButtonBorder" 
                            CornerRadius="7,7,7,7" 
                            BorderBrush="MidnightBlue"
                            BorderThickness="2">
                        </Border>

                        <ContentPresenter x:Name="ButtonContent"
                            Content="{Binding Path=Content, 
                            RelativeSource={RelativeSource TemplatedParent}}" 
                            HorizontalAlignment="center" 
                            VerticalAlignment="center">
                        </ContentPresenter>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</ResourceDictionary>

但是当用户按下按钮或将鼠标悬停在按钮上时，它会删除默认行为。尽管我努力想找到一种方法，但我找不到办法。

如何在鼠标悬停时更改按钮设计？

Answer 1

您缺少Trigger的{{1}}属性。只需将其放在ControlTemplate元素中即可。这是默认的：

tmpltButton

但是，如果要设置任何组件的样式，我建议在设计器视图中右键单击该组件，然后单击<ControlTemplate.Triggers> <Trigger Property="IsDefaulted" Value="true"> <Setter Property="BorderBrush" TargetName="border" Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}"/> </Trigger> <Trigger Property="IsMouseOver" Value="true"> <Setter Property="Background" TargetName="border" Value="{StaticResource Button.MouseOver.Background}"/> <Setter Property="BorderBrush" TargetName="border" Value="{StaticResource Button.MouseOver.Border}"/> </Trigger> <Trigger Property="IsPressed" Value="true"> <Setter Property="Background" TargetName="border" Value="{StaticResource Button.Pressed.Background}"/> <Setter Property="BorderBrush" TargetName="border" Value="{StaticResource Button.Pressed.Border}"/> </Trigger> <Trigger Property="IsEnabled" Value="false"> <Setter Property="Background" TargetName="border" Value="{StaticResource Button.Disabled.Background}"/> <Setter Property="BorderBrush" TargetName="border" Value="{StaticResource Button.Disabled.Border}"/> <Setter Property="TextElement.Foreground" TargetName="contentPresenter" Value="{StaticResource Button.Disabled.Foreground}"/> </Trigger> </ControlTemplate.Triggers>，以便从划痕开始设置样式。

为了完整起见，正如Mike所说，Microsoft提供了Expression Blend这是Visual Studio包中包含的工具。它允许更多的设计功能，当然值得一试。

Answer 2

你应该使用样式触发器来自己控制它。

要更改背景颜色，您需要在Button上设置样式触发器，然后在控件模板中使用模板绑定来设置背景。

这是一个简单的例子，我在3种情况下将按钮背景设置为不同颜色 - IsPressed，MouseOver = True和MouseOver = False：

<Style TargetType="{x:Type Button}">
    <Style.Triggers>
        <Trigger Property="IsMouseOver" Value="True">
            <Setter Property="Background" Value="Pink"/>
        </Trigger>
        <Trigger Property="IsMouseOver" Value="False">
            <Setter Property="Background" Value="Orange"/>
        </Trigger>
        <Trigger Property="IsPressed" Value="True">
            <Setter Property="Background" Value="IndianRed"/>
        </Trigger>
    </Style.Triggers>

    <Setter Property="SnapsToDevicePixels" Value="True" />
    <Setter Property="Foreground" Value="MidnightBlue" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate x:Name="tmpltButton">
                <Grid Background="{TemplateBinding Background}">
                    <Border x:Name="ButtonBorder" CornerRadius="7,7,7,7" BorderBrush="MidnightBlue" BorderThickness="2"/>
                    <ContentPresenter x:Name="ButtonContent" Content="{Binding Path=Content, RelativeSource={RelativeSource TemplatedParent}}" 
                                      HorizontalAlignment="Center" VerticalAlignment="Center"/>

                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

当鼠标光标在它上面时，XAML按钮模板会发生变化

2 个答案: