1

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?

bart
  • 1,003
  • 11
  • 24
developer9969
  • 4,628
  • 6
  • 40
  • 88

1 Answers1

0

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>
VahidShir
  • 2,066
  • 2
  • 17
  • 27
  • thanks for your reply that did not work the icon totally dissappered – developer9969 Jul 06 '19 at 06:14
  • CORRECTION . The icon does not dissapear but appears inside the frame when I want to be on top of the right hand corner. – developer9969 Jul 06 '19 at 06:23
  • thanks for your help. Can you explain what you did. That worked – developer9969 Jul 06 '19 at 06:59
  • There needed to be an amount of space between AbsoluteLayout and Frame so that our icon be placed a little above and right of Frame which you already did it by setting a `Margin="10"` to Frame(The value needs to be nearly a half of the width/height value of the icon). Then we put the icon at top-right of AbsoluteLayout and gave a 25 value as its width and height. – VahidShir Jul 06 '19 at 07:08