楕円のテキストコンテンツとマウスオーバーカラー

Question

「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プロパティを使用していたいの標準的な外観を取得します。それは動作しますが、各コントロールに対してのみ機能します。すなわち、私が楕円の上にいるときに、背景が赤く変わりますが、テキストブロックを越えると、楕円はもはやマウスの上になくなり、標準的な塗りつぶしの色に戻ります。

楕円の内容がテキストブロックになるように私のアプローチを変更する必要がありますか？

感謝

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は 'x'文字をシミュレートします。このアプローチは、不動産の衝突を少なくし、後になっている効果をもたらします。

Answer 2

私はこれでちょっと遅かったと知っていますが、私は今同じ問題を抱えていました。 TextBlockにIsHitTestVisible="False"を設定すると、この問題がより簡単に解決されたという結論に達しました。