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

您还可以使用部分透明的位图（png）。 这样，您可以拥有比渐变更复杂的透明效果。

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>