'Display part of an Image, inside a Frame, in Xamarin.Forms
In Xamarin.Forms, how can I display only a specific part of a larger Image (i.e. crop the Image), inside a Frame?
Lets say that I e.g. want to display the right lower quadrant, like this:
Image:
Frame:
The part I want (e.g. right lower quadrant):
To Display (the Frame with part of the Image inside):
My Code (the double Frames are just for thicker borders):
<Frame BorderColor="#880014" BackgroundColor="#880014" Padding="4">
<Frame BorderColor="#880014" BackgroundColor="#FFFFFF" Padding="0">
<!--
An Image something like this...
<Image Source="{local:ImageResource SGC.Resources.SGCLogo.png}" Aspect="Fill" ... />
-->
</Frame>
</Frame>
Solution 1:[1]
The solution is to use an <AbsoluteLayout> with Proportional values inside the <Frame>.
<AbsoluteLayout>
<Image Source="{local:ImageResource SGC.Resources.SGCLogo.png}"
AbsoluteLayout.LayoutBounds="1, 1, 2, 2"
AbsoluteLayout.LayoutFlags="All"
Aspect="Fill"/>
</AbsoluteLayout>
Set the LayoutFlags to treat all values as Proportional:AbsoluteLayout.LayoutFlags="All".
And use LayoutBounds to set Proportional values for "X, Y, Width, Height" i.e.:
(AbsoluteLayout.LayoutBounds="1, 1, 2, 2")
Where "1, 1..." is the right lower quadrant.
(use "0, 1..." for left lower quadrant):
And "...2, 2" crops the Image to 1/4 of its size (two columns and two rows).
(use "...8, 8" for 1/64 Image size or "...2, 4" for 1/8 size like this):
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 |


