2011-03-31 19 views
5

no he sido capaz de conseguir que esto funcione, pero esto es lo que visualizo:WPF: imagen como fondo con máscara de opacidad

Esencialmente, quiero tener un control en WPF donde el fondo se establece en una imagen alineada a la izquierda con una máscara de opacidad que desvanece el lado derecho de la imagen en transparencia (para mostrar el color de fondo del padre)

¿Es posible este tipo de cosas? Esto es lo que he intentado:

<DockPanel x:Name="ContentPanel" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"> 
    <DockPanel.Background>      
     <ImageBrush ImageSource="test.jpg" Stretch="None" AlignmentX="Left" AlignmentY="Center" /> 
    </DockPanel.Background> 
    <DockPanel.OpacityMask> 
     <LinearGradientBrush EndPoint="1,0.5" StartPoint="0,0.5"> 
     <GradientStop Color="Black" Offset="0"/> 
     <GradientStop Color="White" Offset="0.5"/> 
     </LinearGradientBrush> 
    </DockPanel.OpacityMask> 
</DockPanel> 

Respuesta

8

Este ejemplo debería comenzar.

<Grid> 
    <Grid.Resources> 
    <Image x:Key="myImage" Source="test.jpg"> 
     <Image.OpacityMask> 
     <LinearGradientBrush StartPoint="0,0.5" EndPoint="1,0.5" > 
      <GradientStop Offset="0.0" Color="#00000000" /> 
      <GradientStop Offset="1.0" Color="#FF000000" /> 
     </LinearGradientBrush> 
     </Image.OpacityMask> 
    </Image> 
    <VisualBrush x:Key="myBrush" Visual="{StaticResource myImage}"/> 
    </Grid.Resources> 

    <DockPanel x:Name="ContentPanel" Width="550" 
      HorizontalAlignment="Left" 
      Background="{StaticResource myBrush}"/> 
</Grid> 
0

De esta manera: (sustituir el rectángulo subyacente con cualquier imagen u quiere)

<Grid x:Name="LayoutRoot"> 
    <Rectangle Margin="187,91,147,101" Stroke="Black"> 
     <Rectangle.Fill> 
      <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"> 
       <GradientStop Color="Black" Offset="0"/> 
       <GradientStop Color="White" Offset="1"/> 
      </LinearGradientBrush> 
     </Rectangle.Fill> 
    </Rectangle> 
    <Rectangle Margin="254,164,196,158" Stroke="Black" Fill="Red"> 
     <Rectangle.OpacityMask> 
      <LinearGradientBrush EndPoint="1,0" StartPoint="0,0"> 
       <GradientStop Color="#00000000"/> 
       <GradientStop Color="White" Offset="1"/> 
      </LinearGradientBrush> 
     </Rectangle.OpacityMask> 
    </Rectangle> 
</Grid> 
1

También es posible usar un mapa de bits parcialmente transparente (png). De esta forma, puede tener efectos de transparencia más complejos que solo un degradado.

Cuestiones relacionadas