使用ImageBrush和SolidColorBrush填充XAML形状

Question

我的UWP应用中有一个椭圆形状。我想在此椭圆中显示图像。因此，我用ImageBrush填充它。但是，由于我使用的图像具有透明背景，因此椭圆下方的元素也变得可见。

因此，我需要一种在“椭圆”中显示图像并将隐藏在“椭圆”下方的基础元素的方法。有什么办法可以做到这一点。也许如果我可以合并SolidColorBrush和ImageBrush，那么就可以实现。

Answer 1

对于某种合并画笔，可以使用VisualBrush。 在其中可以放置任意数量的控件，形状来满足您的需求。

在下面的示例中，我将Rectangle用作背景填充物，并在Image前面放置了透明背景。

示例：

 <Ellipse>
        <Ellipse.Fill>
            <VisualBrush>
                <VisualBrush.Visual>
                    <Grid >
                        <Rectangle Fill="White" />
                        <Image Source="Media/top_logo.png" Stretch="Uniform" />
                    </Grid>
                </VisualBrush.Visual>
            </VisualBrush>
        </Ellipse.Fill>
    </Ellipse>

Answer 2

除了Piwnik的方法（VisualBrush），您还可以使用更轻量的DrawingBrush，其中Drawing是一个DrawingGroup，由提供背景（此处为GeometryDrawing）和图像（如ImageDrawing）的部分组成：

<Ellipse Width="200" Height="200" >
  <Ellipse.Fill>
    <DrawingBrush>
      <DrawingBrush.Drawing>
        <DrawingGroup>
          <GeometryDrawing Brush="White">
            <GeometryDrawing.Geometry>
              <RectangleGeometry Rect="0,0,1,1"/>
            </GeometryDrawing.Geometry>
          </GeometryDrawing>
          <ImageDrawing Rect="0,0,1,1" ImageSource="Img.png"/>
        </DrawingGroup>
      </DrawingBrush.Drawing>
    </DrawingBrush>
  </Ellipse.Fill>

Answer 3

您可以使用ImageEx XAML Control中的Windows Community Toolkit来显示图像并设置Background=White，然后椭圆下方的元素将变得不可见。

<Page
x:Class="AppEllipse.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:AppEllipse"
xmlns:controls="using:Microsoft.Toolkit.Uwp.UI.Controls"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

<Grid>
    <TextBlock Text="hello UWP!" Margin="0 20 0 0"></TextBlock>
    <controls:ImageEx x:Name="ImageExControl3" Background="White"
                              CornerRadius="999"
                              IsCacheEnabled="True"
                              Source="/Assets/alpha_channel_example.png" Width="100" Height="100" VerticalAlignment="Top" HorizontalAlignment="Left"/>
</Grid>