WPF：圖片與不透明背景掩膜

Question

我一直沒能得到這個工作，但是這是我設想：

從本質上講，我想在WPF控制在背景設置爲帶有不透明蒙版的左對齊圖像，將圖像的右側淡入透明狀態（以便父級的背景色可以透過）

這種類型的東西有可能嗎？以下是我已經試過：

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

Answer 1

這個例子應該讓你開始。

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

Answer 2

像這樣：（替換用U想要的任何圖像的基本矩形）

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

Answer 3

你也可以使用部分透明位圖（PNG）。這樣，您可以擁有比漸變更復雜的透明效果。