타원 텍스트 콘텐츠 및 마우스 오버 색상

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 문자의 픽셀뿐만 아니라) 위에있을 수 있습니다. 그러면 다른 트리거가 실행되지 않습니다. 이는 귀하가 경험하고있는 효과를 설명합니다. 다른 방법 중

은 하나의 가능성이 타원이 빨간색으로 필요없이 원하는 효과를주고 '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를 사용합니다. Path는 'x'문자를 시뮬레이트합니다. 이 접근법은 부동산이 충돌하지 않게하여 이후의 효과를줍니다.

Answer 2

나는이와 조금 늦었 알고 있지만 지금 같은 문제가 발생했다. TextBlock에 IsHitTestVisible="False"을 설정하는 것이이 문제에 대한보다 쉬운 해결책이라는 결론에 도달했습니다.