Question

我试图在XAML中设置按钮样式。下面你可以看到我到目前为止创建的内容。

<Style TargetType="{x:Type Button}">
    <Setter Property="Background" Value="#f2f2f7"/>
    <Setter Property="Padding" Value="6,4"/>
    <Setter Property="Foreground" Value="#222222" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Button">
                <Border CornerRadius="1" Background="{TemplateBinding Background}" BorderThickness="1" BorderBrush="#b1b1c0">
                    <Border CornerRadius="1" Background="{TemplateBinding Background}" BorderThickness="1,1,1,0" BorderBrush="#f8f8fa" Padding="{TemplateBinding Padding}">
                        <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center">
                        </ContentPresenter>
                    </Border>
                </Border>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsMouseOver" Value="True">
                        <Setter Property="Background" Value="#8e8eba" />
                        <Setter Property="Foreground" Value="#f2f291" />
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

问题是，这个按钮有两个<Border>元素相互嵌套。我想在激活BorderBrush=""触发器时使用不同的IsMouseOver属性。例如，当我将鼠标放在按钮上时，内边框将变为红色，外边框将为蓝色。

你能帮帮我吗？

Answer 1

尝试设置边框名称并在触发器中使用TargetName，如下所示：

<Style TargetType="{x:Type Button}">
    <Setter Property="Background" Value="#f2f2f7"/>
    <Setter Property="Padding" Value="6,4"/>
    <Setter Property="Foreground" Value="#222222" />

    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Button">
                <Border Name="OuterBorder" CornerRadius="1" Background="{TemplateBinding Background}" BorderThickness="1" BorderBrush="#b1b1c0">
                    <Border Name="InnerBorder" CornerRadius="1" Background="{TemplateBinding Background}" BorderThickness="1,1,1,0" BorderBrush="#f8f8fa" Padding="{TemplateBinding Padding}">
                        <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" />
                    </Border>
                </Border>

                <ControlTemplate.Triggers>
                    <Trigger Property="IsMouseOver" Value="True">
                        <Setter Property="Background" Value="#8e8eba" />
                        <Setter Property="Foreground" Value="#f2f291" />

                        <!-- Here use TargetName -->
                        <Setter TargetName="OuterBorder" Property="BorderBrush" Value="Red" />
                        <Setter TargetName="InnerBorder" Property="BorderBrush" Value="Blue" />
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

<强> Some notes

TargetName只能在<ControlTemplate.Triggers>中设置，而不能在<Style.Triggers>
TargetName仅在ControlTemplate部分

Answer 2

为边框指定名称，并在触发器设置器上使用 TargetName 属性。

<Setter TargetName="MyBorderName" Property="BorderBrush" Value="Red" />

ControlTemplate.Triggers中更灵活的setter

2 个答案: