xamarin.formsabsolutelayout

Position icon top right hand corner of frame xamarin forms


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

enter image description here

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?


Solution

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