使用 ImageBrush 和 SolidColorBrush 填充 XAML 形状答案

【问题标题】：Fill a XAML shape with both a ImageBrush and a SolidColorBrush使用 ImageBrush 和 SolidColorBrush 填充 XAML 形状
【发布时间】：2019-02-06 12:53:54
【问题描述】：

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

所以，我需要一种方法来在椭圆中显示图像并隐藏椭圆下方的底层元素。有没有办法做到这一点。也许如果我可以合并一个 SolidColorBrush 和 ImageBrush，那么这可以实现。

【问题讨论】：

为什么不在椭圆上设置背景？
椭圆等形状元素没有背景属性-docs.microsoft.com/en-us/uwp/api/windows.ui.xaml.shapes.ellipse
我没有提到背景属性
我是 XAML 的新手。我还能如何将椭圆的背景设置为白色。如果我们能做到这一点，它将解决我的目的。
在带有图像的椭圆形状下，您可以放置额外的椭圆，但填充白色背景，因此在透明图像位置下您会看到这个新添加的白色背景

标签： c# xaml uwp uwp-xaml

【解决方案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>

【讨论】：

UWP 中不存在 VisualBrush 元素。

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

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

【讨论】：

UWP 中不存在 DrawingBrush
@PulkitMehta 确实，很抱歉我错过了。