WPF-Overlay-Hilfe

Question

Ich versuche ein solches Overlay zu erstellen, wenn die Maus über die Bildsteuerung bewegt wird. Wie mache ich es mit WPF?

bitte Rat

Answer 1

Sie legen sowohl das Bild und das Overlay, und binden die Sichtbarkeitseigenschaft des Overlays auf das Bild, das und die IsMouseOver Eigenschaft Overlay.

Sie können es auch mit Triggern tun, anstatt zu binden. Es funktioniert auch.

Aktualisierung: Hier ist Beispielcode. Das XAML kann so aussehen:

<Grid> 
    <Grid.Resources> 
     <local:OverlayVisibilityConverter x:Key="OverlayVisibilityConverter" /> 
    </Grid.Resources> 
    <Image x:Name="myImage" Source="MyImage.JPG" /> 
    <Image x:Name="myOverlay" 
      Source="MyOverlay.jpg" 
      VerticalAlignment="Center" 
      Opacity="0.2"> 
     <Image.Visibility> 
      <MultiBinding Converter="{StaticResource OverlayVisibilityConverter}"> 
       <Binding ElementName="myOverlay" Path="IsMouseOver" /> 
       <Binding ElementName="myImage" Path="IsMouseOver" /> 
      </MultiBinding> 
     </Image.Visibility> 
    </Image> 
</Grid> 

Natürlich darf das Overlay kein Bild sein und kann alles sein. Ich habe gerade ein Bild in der Probe verwendet. Die Trübung kann alles sein zwischen 0 und 1

Der Code für den Konverter wie folgt aussehen:

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

ich nicht die Komplexität der andere Antwort nicht mochte, wie ich fühlte es war zu viel für etwas so einfaches, so versuchte ich es mit MouseEnter und MouseLeave Ereignisse und es scheint ganz gut zu funktionieren.

XAML:

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

Mit Begleit Code:

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; 
} 

Sie brauchen nicht ein Bild für das Overlay zu verwenden, kann es alles sein. In meinem realen Fall hatte ich tatsächlich eine StackPanel Überlagerung, die Tasten für redigieren und löschte (also konnte der Benutzer das Bild ändern/entfernen)