椭圆文本内容和鼠标移过颜色

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

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

非常感谢

来源

2011-12-19 obaylis

的问题是，实际的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'字符。这种方法导致更少的房地产相互碰撞并产生效果。

来源

2011-12-19 11:09:53

非常好，这正是我一直在寻找的。谢谢。 – obaylis 2011-12-19 14:00:23

很高兴这一切工作！ – 2011-12-19 15:43:43

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

来源

2012-07-18 09:00:14

椭圆文本内容和鼠标移过颜色

回答

相关问题