CODEWITHSUNDEEP
c#xamluwpuwp-xaml
Pulkit Mehta
Pulkit Mehta

Reputation: 117

Fill a XAML shape with both a ImageBrush and a SolidColorBrush

I have an Ellipse Shape in my UWP app. I want to display an image in this Ellipse. So, I fill it with the ImageBrush. But, since the image I am using has a transparent background, the elements beneath the Ellipse also become visible.

So, I need a way to display the image in the Ellipse and hide the underlying elements beneath the Ellipse. Is there any way to do this. Maybe if I can merge a SolidColorBrush and ImageBrush, then this can be achieved.

Upvotes: 0

Views: 883

Answers (3)

Xie Steven
Xie Steven

Reputation: 8591

You could use the ImageEx XAML Control in Windows Community Toolkit to show the image and set the Background=White, then the elements beneath the Ellipse become invisible.

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

enter image description here

enter image description here

Upvotes: 0

Klaus G&#252;tter
Klaus G&#252;tter

Reputation: 11997

Alternatively to Piwnik's approach (VisualBrush), you could also use the more lightweight DrawingBrush, where the Drawing is a DrawingGroup consisting of a part providing the background (here: a GeometryDrawing) and your image (as 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>

Upvotes: 0

Piwnik
Piwnik

Reputation: 301

For kind of merging brushes you can use VisualBrush. Inside it you can put as many different controls, shapes as you want, to accomplish your needs.

In example bellow I put Rectangle as background filler and in front of it Image with transparent background.

Example:

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

Upvotes: 1

Related Questions