I would like to position an icon at the top right corner of a frame. I have to admit that I read about absolute layout multiple times but obviously is not going in my head.
As you can see from the pic the icon is a bit out and this is the code
Sample code that is wrong!
<AbsoluteLayout>
<Frame
Margin="10"
Padding="10"
AbsoluteLayout.LayoutBounds="0,0,1,1"
AbsoluteLayout.LayoutFlags="All"
BorderColor="Blue"
CornerRadius="5"
HasShadow="False">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Label Grid.Row="0" Text="sample" />
<Label Grid.Row="1" Text="sample2" />
</Grid>
</Frame>
<ContentView AbsoluteLayout.LayoutBounds="1, 0, -1, -1"
AbsoluteLayout.LayoutFlags="PositionProportional">
<Image Source="myIcon.png" />
</ContentView>
</AbsoluteLayout>
Any suggestions?
Give your icon a specific width and height and set Frame's margin a proportional value. You can change Frame's margin value to make it fit as you like:
<AbsoluteLayout>
<Frame
Margin="10"
Padding="10"
AbsoluteLayout.LayoutBounds="0,0,1,1"
AbsoluteLayout.LayoutFlags="All"
BorderColor="Blue"
CornerRadius="5"
HasShadow="False">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Label Grid.Row="0" Text="sample" />
<Label Grid.Row="1" Text="sample2" />
</Grid>
</Frame>
<Image AbsoluteLayout.LayoutBounds="1, 0, 25, 25"
AbsoluteLayout.LayoutFlags="PositionProportional"
Source="myIcon.png" Aspect="AspectFit" />
</AbsoluteLayout>