Question

我在WPF应用程序中设计了一个按钮，这个按钮布局将在整个应用程序中使用，但颜色会发生变化。按钮有两个部分，左侧有一个图标和一个背景颜色，然后右侧的文本具有不同的背景颜色。

如何在“触发器”中引用左侧背景颜色，以便当用户将鼠标悬停在按钮上时，它将变为该颜色？

第1面：Name="buttonIcon" 第2面：Name="buttonText"

<Style x:Key="ButtonIcoSmall" TargetType="Button">
            <Setter Property="FontFamily" Value="{StaticResource FontAwesome}" />
            <Setter Property="FontSize" Value="16" />
            <Setter Property="Foreground" Value="White" />
            <Setter Property="Background" Value="#FF22252b" />
            <Setter Property="Padding" Value="8" />
            <Setter Property="Margin" Value="6" />
            <Setter Property="HorizontalAlignment" Value="Left" />
            <Setter Property="TextOptions.TextFormattingMode" Value="Display" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Button">
                        <WrapPanel>
                            <Border Grid.Column="0"
                                    CornerRadius="5 0 0 5" 
                                    BorderThickness="0"
                                    Background="#434953"
                                    Name="buttonIcon">
                                <WrapPanel>
                                    <ContentPresenter Grid.Column="0" 
                                                      HorizontalAlignment="Center" 
                                                      VerticalAlignment="Center" 
                                                      Margin="{TemplateBinding Margin}" />
                                </WrapPanel>
                            </Border>
                            <Border Grid.Column="0"
                                    CornerRadius="0 5 5 0" 
                                    BorderThickness="0"
                                    Background="#FF22252b"
                                    Name="buttonText" >
                                <TextBlock Text="{TemplateBinding Tag}" 
                                                       FontSize="13"
                                                       Foreground="White"
                                                       Padding="{TemplateBinding Padding}" />
                            </Border>
                        </WrapPanel>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsMouseOver" Value="True">
                                <Setter Property="Background" Value="" TargetName="buttonText" />
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
            <Style.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter Property="Background" Value="#757b8d" />
                    <Setter Property="Foreground" Value="White" />
                </Trigger>
            </Style.Triggers>
        </Style>

Answer 1

希望我能正确理解这个问题。如果是，请更改您的ControlTemplate.Triggers部分，为buttonIcon添加Setter，如下所示：

                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter Property="Background" Value="" TargetName="buttonText" />
                            <Setter Property="Background" Value="Blue" TargetName="buttonIcon" />
                        </Trigger>
                    </ControlTemplate.Triggers>

由于您在ControlTemplate中为按钮的两个部分处理IsMouseOVer，您可能不再需要Style.Triggers部分，除非它为边框上方的父图层提供有用的背景。

WPF样式：将鼠标悬停在ControlTemplate Control的背景上

1 个答案: