How to set background image to a shape

Question

I am new to Xamarin Forms, I am from WPF background. In WPF it's easy to set background image(remote) to a shape. Is there any equivalent thing in Xamarin Forms?

Answer 1

After Shapes and Paths were introduced to Xamarin.Forms you can achieve it inside a Grid:

<Grid HorizontalOptions="Center" VerticalOptions="Center">
    <Ellipse Stroke="blue" StrokeThickness="5" Fill="Black" Aspect="Fill"/>
    <Image Source="xamarin.png" WidthRequest="300" HeightRequest="300"/>
</Grid>

---

Rounded corners with Frame:

<Grid HorizontalOptions="Center" VerticalOptions="Center">
    <Frame WidthRequest="200" CornerRadius="80"
           BackgroundColor="Black" HeightRequest="200"/>
    <Image Source="xamarin.png" WidthRequest="200" HeightRequest="200"/>
</Grid>

---

Using Path:

<Grid HorizontalOptions="Center" VerticalOptions="Center">
    <Path Stroke="blue"
          Data="m123.87668,219.80811l21.30223,-42.92685l36.89384,-24.78565l42.60447,0l36.89384,24.78565l21.30223,42.92685l0,49.57131l-21.30223,42.92685l-36.89384,24.78564l-42.60447,0l-36.89384,-24.78564l-21.30223,-42.92685l0,-49.57131z"
          StrokeThickness="5" WidthRequest="200" HeightRequest="200"
          Aspect="Fill" Fill="Black"/>

    <Image Source="xamarin.png" WidthRequest="200" HeightRequest="200"/>
</Grid>

---

Related Documentation

• Microsoft Blog: Drawing UI with Xamarin.Forms Shapes and Paths.

• Microsoft Official documentation: Xamarin.Forms Shapes.

• GitHub: Specifications: Shapes & Paths