WPF 오버레이 도움말

Question

이미지 컨트롤 위로 마우스를 움직일 때 이와 같은 오버레이를 만들려고합니다. WPF를 사용하여 어떻게 할 수 있습니까?

당신은 이미지와 오버레이를 모두 만들

Answer 1

조언, 그리고 이미지의 중첩 및 오버레이의 IsMouseOver 속성의 가시성 속성을 결합하십시오.

바인딩 대신 트리거를 사용하여 수행 할 수도 있습니다. 그것은 또한 작동합니다.

업데이트 : 다음은 샘플 코드입니다. XAML은 다음과 같이 표시 될 수 있습니다.

물론 오버레이는 이미지가 아니어야합니다. 방금 샘플에서 이미지를 사용했습니다. 나는 그것이 너무 많이 느꼈다 나는 다른 대답의 복잡성을 좋아하지 않았다

class OverlayVisibilityConverter : IMultiValueConverter 
    { 
     public object Convert(object[] values, Type targetType, object parameter, CultureInfo culture) 
     { 
      var isMouseOverOverlay = (bool)values[0]; 
      var isMouseOverImage = (bool)values[1]; 

      if (isMouseOverImage || isMouseOverOverlay) 
       return Visibility.Visible; 
      else 
       return Visibility.Hidden; 
     } 

     public object[] ConvertBack(object value, Type[] targetTypes, object parameter, CultureInfo culture) 
     { 
      throw new NotImplementedException(); 
     } 
    } 

Answer 2

: 불투명도는 컨버터의 코드는 다음과 같이 할 수

0과 1 무엇이든 할 수있다 뭔가 간단하므로, 나는 MouseEnter과 MouseLeave 이벤트를 사용해 보았는데, 꽤 잘 동작하는 것 같다.

XAML : 첨부 된 코드와

<Grid MouseEnter="Grid_MouseEnter" MouseLeave="Grid_MouseLeave"> 
    <Image x:Name="MainImage" Source="..." /> 
    <Image x:Name="OverlayImage" Source="..." /> 
</Grid> 

: 당신은 오버레이 이미지를 사용할 필요가 없습니다

private void Grid_MouseEnter(object sender, MouseEventArgs e) 
{ 
    OverlayImage.Visibility = System.Windows.Visibility.Visible; 
} 

private void Grid_MouseLeave(object sender, MouseEventArgs e) 
{ 
    OverlayImage.Visibility = System.Windows.Visibility.Collapsed; 
} 

, 그것은 아무것도 할 수있다. 내 실제 경우에는 실제로 편집 및 삭제 버튼이 포함 된 StackPanel 오버레이가 있습니다 (사용자가 이미지를 변경/삭제할 수 있도록)