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

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 фактически охватывает больше недвижимости, чем «х», потому что шрифты имеют внутренние отступы вокруг пикселов, которые образуют букву. Таким образом, мышь действительно может быть над 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, но вместо этого использует Path. Путь имитирует символ «x». Этот подход приводит к тому, что менее реальная недвижимость сталкивается и дает эффект, которым вы пользуетесь.

Answer 2

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