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>