2017-05-02 15 views
2

マウスが別の楕円の上にあるときに楕円の塗りつぶし色を変更するにはどうすればよいですか?マウスが別の楕円の上にあるとき、どのように楕円の塗りつぶし色を変更できますか?

マウスが「外側」楕円の上にあるときに、「内側の」楕円の色を変更したい。この行動を達成する方法は何ですか?

<Canvas 
      HorizontalAlignment="Center" 
      VerticalAlignment="Center" 
      Width="50" Height="50"> 
     <Ellipse x:Name="inner" Width="50" 
       Height="50" 
       Fill="White" 
       Canvas.ZIndex="0" 
       HorizontalAlignment="Center" 
       VerticalAlignment="Center" Stroke="Black"> 
      <Ellipse.Style> 
       <Style TargetType="Ellipse"> 
        <Style.Triggers> 
         <Trigger Property="IsMouseOver" Value="True"> 
          <Trigger.EnterActions> 
           <BeginStoryboard> 
            <Storyboard> 
             <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Ellipse.Fill).(SolidColorBrush.Color)"> 
              <EasingColorKeyFrame KeyTime="0" Value="Black" /> 
             </ColorAnimationUsingKeyFrames> 
            </Storyboard> 
           </BeginStoryboard> 
          </Trigger.EnterActions> 
          <Trigger.ExitActions> 
           <BeginStoryboard> 
            <Storyboard> 
             <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Ellipse.Fill).(SolidColorBrush.Color)"> 
              <EasingColorKeyFrame KeyTime="0" Value="White" /> 
             </ColorAnimationUsingKeyFrames> 
            </Storyboard> 
           </BeginStoryboard> 
          </Trigger.ExitActions> 
         </Trigger> 
        </Style.Triggers> 
       </Style> 
      </Ellipse.Style> 
     </Ellipse> 
    <Ellipse x:Name="outter" Width="44" 
       Height="44" 
       Fill="Blue" 
       Canvas.ZIndex="1" 
       Canvas.Left="3" 
       Canvas.Top="3"> 
    </Ellipse> 
    </Canvas> 

答えて

2

あなたは他の楕円のIsMouseOverプロパティにバインドしてDataTriggerを使用することがあります。

<Canvas> 
    <Ellipse Width="50" Height="50"> 
     <Ellipse.Style> 
      <Style TargetType="Ellipse"> 
       <Setter Property="Fill" Value="White"/> 
       <Style.Triggers> 
        <DataTrigger Binding="{Binding IsMouseOver, ElementName=outer}" 
           Value="True"> 
         <Setter Property="Fill" Value="Black"/> 
        </DataTrigger> 
       </Style.Triggers> 
      </Style> 
     </Ellipse.Style> 
    </Ellipse> 
    <Ellipse x:Name="outer" Canvas.Left="3" Canvas.Top="3" 
      Width="44" Height="44" Fill="Blue"/> 
</Canvas> 
関連する問題