Question

我想要一个椭圆形的按钮，其中心为'x'，它会改变鼠标上的颜色（'x'的颜色和椭圆的颜色）。

与此相似 enter image description here

以下是我想要的标准外观

    <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属性。它确实有效但仅适用于每个控件。即当我在椭圆上方时，背景变成红色但是当我翻过文本块时，椭圆不再是鼠标，因此它变回标准填充颜色。

我是否需要更改方法，以便椭圆的内容是文本块？

非常感谢

Answer 1

问题在于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'字符。这种方法导致较少的房地产碰撞并产生您所追求的效果。

Answer 2

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

椭圆文本内容和鼠标在颜色上

2 个答案: