1

我想要一个带有居中“x”的椭圆的按钮，它会在鼠标悬停时改变它的颜色（“x”的颜色和椭圆的颜色）。

与此类似 在此处输入图像描述

以下得到我想要的标准外观

    <Grid>
    <Grid.Resources>
        <Style x:Key="CloseButtonBackgroundStyle" TargetType="{x:Type Ellipse}">
            <Setter Property="Width" Value="25" />
            <Setter Property="Height" Value="25" />
            <Setter Property="Fill" Value="#f4f4f4" />
            <Style.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter Property="Fill" Value="Red" />
                </Trigger>
            </Style.Triggers>
        </Style>

        <Style x:Key="CloseButtonForegroundStyle" TargetType="{x:Type TextBlock}">
            <Setter Property="Foreground" Value="#898989" />
            <Setter Property="HorizontalAlignment" Value="Center" />
            <Setter Property="VerticalAlignment" Value="Center" />
            <Setter Property="FontSize" Value="16" />
            <Setter Property="Padding" Value="0 0 0 4" />

            <Style.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter Property="Foreground" Value="#f9ebeb" />
                </Trigger>
            </Style.Triggers>
        </Style>            
    </Grid.Resources>

    <Ellipse Style="{StaticResource CloseButtonBackgroundStyle}" />

    <TextBlock Text="x"
               Style="{StaticResource CloseButtonForegroundStyle}"/>
</Grid>

问题在于使用 IsMouseOver 属性。它确实有效，但仅适用于每个控件。即，当我越过椭圆时，背景变为红色，但是当我越过文本块时，椭圆不再是鼠标悬停，因此它变回标准填充颜色。

我是否需要更改方法以使椭圆的内容成为文本块？

非常感谢

4

2 回答 2

3

问题是 TextBlock 实际上比“x”覆盖了更多的空间，因为字体在构成字母的像素周围有内在的填充。因此，鼠标实际上可能位于 TextBlock 上方（而不仅仅是“x”字符的像素），这将阻止您的其他触发器触发。这将解释您正在经历的非此即彼的影响。

在其他方法中，一种可能性是将两个元素包装到一个控件模板中......

<Grid>
    <Grid.Resources>
        <ControlTemplate x:Key="EllipseWithText" TargetType="{x:Type Button}">
            <Grid x:Name="MainGrid">
                <Rectangle x:Name="MainRectangle" Fill="#00000000" RadiusX="5" RadiusY="5"/>
                <ContentPresenter x:Name="Presenter" 
                              HorizontalAlignment="Center"  VerticalAlignment="Center" 
                              TextBlock.Foreground="#BB225588"/>
                <Path x:Name="Cross" Data="M0,0 L1,1 M0,1 L1,0" 
                              Stretch="Fill" Stroke="Black" 
                              StrokeThickness="2" Width="8" Height="8" />
            </Grid>
            <ControlTemplate.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter TargetName="MainRectangle" Property="Fill" Value="Red"/>
                    <Setter TargetName="MainRectangle" Property="Stroke" Value="Transparent"/>
                    <Setter TargetName="Cross" Property="Stroke" Value="White" />
                </Trigger>
            </ControlTemplate.Triggers>
        </ControlTemplate>
    </Grid.Resources>
    <Button Height="15" Width="15" Template="{StaticResource EllipseWithText}"/>
</Grid>

这将给您想要的效果，让椭圆变成红色，而“x”变成不同的颜色。请注意，此模板不使用 TextBlock，而是使用 Path。Path 模拟一个“x”字符。这种方法导致更少的房地产碰撞并产生您所追求的效果。

于 2011-12-19T11:09:53.307 回答
1

我知道我对此有点晚了，但我现在遇到了同样的问题。我得出的结论是，IsHitTestVisible="False"在 TextBlock 上设置 是解决此问题的更简单方法。

于 2012-07-18T09:00:14.403 回答