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

用 ImageBrush 和 SolidColorBrush 填充 XAML 形状

Fill a XAML shape with both a ImageBrush and a SolidColorBrush

c#

xaml

uwp

uwp-xaml