c# - コードの背後にあるWPFでホバー時に画像を動的に変更するにはどうすればよいですか?

Question

コードの背後にある WPF でホバー時に画像を動的に変更するにはどうすればよいですか? db から画像を読み取り、ホバー画像も読み取ります。

Answer 1

MouseEnterとMouseLeaveイベントを利用Image.Sourceしてコード ビハインドで変更することはできますが、isTriggersを変更するために使用しないでください。そのように、マウスがコントロールを離れたときに状態を処理する必要はありません。スタイルを再評価して前の画像ソースに戻すだけだからです。 トリガーの例:Image.SourceIsMouseOvertrue

<ContentControl>
   <ContentControl.Resources>
      <BitmapImage UriSource="ad.png" x:Key="ImgBtnLightbulbOff"/>
      <BitmapImage UriSource="ae.png" x:Key="ImgBtnLightbulbOn"/>
   </ContentControl.Resources>
   <ContentControl.Template>
      <ControlTemplate TargetType="{x:Type ContentControl}">
         <Image Source="{StaticResource ImgBtnLightbulbOff}" x:Name="PART_Image"/>
         <ControlTemplate.Triggers>
            <Trigger Property="IsMouseOver" Value="True">
               <Setter TargetName="PART_Image" Property="Source" Value="{StaticResource ImgBtnLightbulbOn}"/>
            </Trigger>
         </ControlTemplate.Triggers>
      </ControlTemplate>
   </ContentControl.Template>
</ContentControl>

ImageIsMouseOverトリガーは単独で変更Sourceされないため、他のコントロールでラップする必要があります。Image私はResource画像を使用していますが、データバインドなど、どこからでも取得できます。

ただし、コード ビハインドでそれを行う必要がある場合は、次の例をご覧ください:
XAML

<Image Source="{StaticResource ImgBtnLightbulbOff}" 
   MouseEnter="Image_MouseEnter" 
   MouseLeave="Image_MouseLeave"/>

コード：

private void Image_MouseLeave(object sender, MouseEventArgs e)
{
   var img = sender as Image;
   img.Source = (ImageSource)img.FindResource("ImgBtnLightbulbOff");
}

private void Image_MouseEnter(object sender, MouseEventArgs e)
{
   var img = sender as Image;
   img.Source = (ImageSource)img.FindResource("ImgBtnLightbulbOn");
}