Текстовое содержимое эллипса и мышь над цветами

Question

Я хочу, чтобы кнопка представляла собой эллипс с центрированной буквой "х", который изменит свои цвета при наведении мыши (как на цвет "х", так и на цвет эллипса).

Похоже на это

Следующее получает стандартный внешний вид, который я хочу

    <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>

Это даст желаемый эффект, когда эллипс станет красным, а "х" - другим цветом. Обратите внимание, что этот шаблон не использует TextBlock, но вместо этого использует путь. Путь имитирует символ "х". Этот подход вызывает меньше столкновения с недвижимостью и дает эффект, который вы ищете.

Answer 2

Я знаю, что немного опоздал с этим, но у меня возникла та же проблема. Я пришел к выводу, что установка IsHitTestVisible="False" на TextBlock было более легкое решение этой проблемы.