Question

我是XAML的新人。我在资源文件中拥有自己的样式，该样式将自动应用于我的应用程序中的所有按钮。但是有些情况已经改变，我要做的是如果应用程序中存在任何删除按钮，将鼠标悬停颜色更改为白色其他按钮鼠标悬停颜色保持不变。我试过但鼠标悬停事件改变了所有按钮背景颜色，但我想要的只是删除按钮颜色应该改变我只需要设计方

Before Mouse Hover

after Mouse Hover

我的代码是：

<Style x:Key="BaseButtonStyle" TargetType="Button">
        <Setter Property="Background" Value="{StaticResource ButtonBackgroundBrush1}" />
        <Setter Property="BorderBrush" Value="{StaticResource ButtonBorderBrush}" />
        <Setter Property="Foreground" Value="White" />
        <Setter Property="Padding" Value="3" />
        <Setter Property="Cursor" Value="Hand" />
        <Setter Property="BorderThickness" Value="2">
        </Setter>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type Button}">
                    <Border Background="{TemplateBinding Background}">
                        <ContentPresenter />
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
        <Style.Triggers>
            <DataTrigger Binding="{Binding  Path=Content, RelativeSource={RelativeSource Self}}" Value="DELETE">
                <Setter Property="Background" Value="#990000"></Setter>
            </DataTrigger>
            <DataTrigger Binding="{Binding  Path=Content, RelativeSource={RelativeSource Self}}" Value="Log out">
                <Setter Property="Background" Value="#990000"></Setter>
            </DataTrigger>

            <DataTrigger Binding="{Binding ElementName=delete,  Path=IsMouseOver}" Value="True">
                <Setter Property="Background" Value="White"/>

                <Setter Property="BorderBrush" Value="Red"/>
            </DataTrigger>
        </Style.Triggers>
    </Style>

<Style BasedOn="{StaticResource BaseButtonStyle}" TargetType="Button">
        <Setter Property="FontSize" Value="16"></Setter>
        <Setter Property="FontWeight" Value="Bold"></Setter>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Button">
                    <Grid>
                         <Border x:Name="BaseShape" CornerRadius="10" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" />
                        <Rectangle x:Name="ButtonHighlight" Margin="1" RadiusX="9" RadiusY="9" Stroke="{StaticResource ButtonHoverHighlightBorderBrush}" StrokeThickness="1" Grid.ColumnSpan="2" Opacity="0" />
                        <ContentPresenter x:Name="contentPresenter" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}" />
                        <Rectangle x:Name="FocusedVisualElement" Stroke="{StaticResource ButtonFocusedBorderBrush}" StrokeThickness="1"  RadiusX="10" RadiusY="10" Opacity="0" />
                        <Rectangle x:Name="DisabledVisualElement" Fill="Chartreuse" IsHitTestVisible="false" RadiusX="10" RadiusY="10" Opacity="0" />
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
<Grid>
    <Button Content="Delete" Name="delete" Width="50" Height="50" HorizontalAlignment="Right" Margin="0,70.121,170.028,0" VerticalAlignment="Top" d:LayoutOverrides="Height"/>
    <Button x:Name="button" Content="Kii" Width="50" Height="50" HorizontalAlignment="Left" Margin="186.349,70.121,0,0" VerticalAlignment="Top" d:LayoutOverrides="Height"/>
    <Button x:Name="button1" Content="ZeKiillo" Width="50" Height="50" HorizontalAlignment="Left" Margin="82.075,70.121,0,0" VerticalAlignment="Top"></Button>
</Grid>

Answer 1

像这样：

        <Style x:Key="BaseButtonStyle" TargetType="Button">
            <Setter Property="Background" Value="Green" />
            <Setter Property="BorderBrush" Value="Blue" />
            <Setter Property="Foreground" Value="White" />
            <Setter Property="Padding" Value="3" />
            <Setter Property="Cursor" Value="Hand" />
            <Setter Property="BorderThickness" Value="2">
            </Setter>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type Button}">
                        <Border Background="{TemplateBinding Background}">
                            <ContentPresenter />
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
            <Style.Triggers>
                <DataTrigger Binding="{Binding  Path=Content, RelativeSource={RelativeSource Self}}" Value="Delete">
                    <Setter Property="Background" Value="#990000"></Setter>
                </DataTrigger>
                <DataTrigger Binding="{Binding  Path=Content, RelativeSource={RelativeSource Self}}" Value="Log out">
                    <Setter Property="Background" Value="#990000"></Setter>
                </DataTrigger>
                <MultiDataTrigger>
                    <MultiDataTrigger.Conditions>
                        <Condition Binding="{Binding
                                   RelativeSource={
                                   RelativeSource Mode=FindAncestor, AncestorType={x:Type Button}},
                                   Path=IsMouseOver}" Value="True"/>
                        <Condition Binding="{Binding Content}" Value="Delete"/>
                    </MultiDataTrigger.Conditions>
                    <Setter Property="Background" Value="White"/>
                    <Setter Property="BorderBrush" Value="Red"/>
                </MultiDataTrigger>
            </Style.Triggers>
        </Style>

<MultiDataTrigger RelativeResource解决了此问题

Answer 2

您可以使用检查MultiTrigger和IsMouseOver属性的Content：

<Style x:Key="BaseButtonStyle" TargetType="Button">
    <Setter Property="Background" Value="{StaticResource ButtonBackgroundBrush1}" />
    <Setter Property="BorderBrush" Value="{StaticResource ButtonBorderBrush}" />
    <Setter Property="Foreground" Value="White" />
    <Setter Property="Padding" Value="3" />
    <Setter Property="Cursor" Value="Hand" />
    <Setter Property="BorderThickness" Value="2">
    </Setter>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type Button}">
                <Border Background="{TemplateBinding Background}">
                    <ContentPresenter />
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
    <Style.Triggers>
        <DataTrigger Binding="{Binding  Path=Content, RelativeSource={RelativeSource Self}}" Value="Delete">
            <Setter Property="Background" Value="#990000"></Setter>
        </DataTrigger>
        <DataTrigger Binding="{Binding  Path=Content, RelativeSource={RelativeSource Self}}" Value="Log out">
            <Setter Property="Background" Value="#990000"></Setter>
        </DataTrigger>
        <MultiTrigger>
            <MultiTrigger.Conditions>
                <Condition Property="IsMouseOver" Value="True" />
                <Condition Property="Content" Value="Delete" />
            </MultiTrigger.Conditions>
            <Setter Property="Background" Value="White"/>
            <Setter Property="BorderBrush" Value="Red"/>
        </MultiTrigger>
    </Style.Triggers>
</Style>

请记住，值区分大小写。 “DELETE”与“删除”的值不同。

如何更改鼠标悬停时的按钮颜色

2 个答案: