Заполните форму XAML с помощью ImageBrush и SolidColorBrush

Question

У меня есть форма эллипса в моем приложении UWP.Я хочу отобразить изображение в этом эллипсе.Итак, я заполняю его с помощью ImageBrush.Но поскольку изображение, которое я использую, имеет прозрачный фон, элементы под эллипсом также становятся видимыми.

Итак, мне нужен способ отобразить изображение в эллипсе и скрыть нижележащие элементы под эллипсом.Есть какой-либо способ сделать это.Может быть, если я смогу объединить SolidColorBrush и ImageBrush, этого можно достичь.

Answer 1

В качестве альтернативы подходу Пивника (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 2

Вы можете использовать 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>

Answer 3

Для вида сливающихся кистей вы можете использовать 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>