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>

- Andrew Burgess

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>

- Dave White

Answer 2

你也可以使用半透明位图（png）。这样，你就可以拥有比渐变更复杂的透明效果。

- Emond

Answer 3

像这样：（用任何您想要的图像替换下面的矩形）

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

- Elad Katz