Resizing frame and controls according to device size .Suggestions?

Question

I have a frame with 2 buttons and label. What is the best practice to make sure the frame and controls inside resize according to the screen size?

Whatever I have tried doesnt seem to do it!!! I thought that flexlayout could do it out of the box ,but cannot make it work.

I have used absolute layout to resize the frame.

Any suggestions

 <AbsoluteLayout  HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" BackgroundColor="Lavender">
    <Frame Margin="20" 
               AbsoluteLayout.LayoutBounds="0.5,.05,0.9,0.4" AbsoluteLayout.LayoutFlags="All"  
               HorizontalOptions="FillAndExpand" 
               VerticalOptions="FillAndExpand" 
               BackgroundColor="WhiteSmoke" 
               BorderColor="DarkGray" 
               CornerRadius="10">
        <FlexLayout
            Padding="0"
            AlignContent="Center"
            AlignItems="Center"
            Direction="Column"
            JustifyContent="Center"
            Wrap="NoWrap">
            <Label Text="Label1" FontAttributes="Bold"  FlexLayout.AlignSelf="Center" />
            <Grid FlexLayout.AlignSelf="Center" ColumnSpacing="30">
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto"></RowDefinition>
                    <RowDefinition Height="Auto"></RowDefinition>
                    <RowDefinition Height="Auto"></RowDefinition>
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto"></ColumnDefinition>
                    <ColumnDefinition Width="Auto"></ColumnDefinition>
                </Grid.ColumnDefinitions>
                <Button Grid.Row="0" 
                        Grid.Column="0"
                            Text="A" 
                            MinimumHeightRequest="50" 
                            MinimumWidthRequest="50" 
                            HeightRequest="50" 
                            WidthRequest="50"></Button>
                <Button Grid.Row="0" Grid.Column="1"
                        Text="B" 
                        MinimumHeightRequest="50"
                        MinimumWidthRequest="50" 
                        HeightRequest="50" 
                        WidthRequest="50" />
                <Label Grid.Row="1" Grid.Column="0" Text="Label2" HorizontalTextAlignment="Center"></Label>
                <Label Grid.Row="1" Grid.Column="1" Text="Label3" HorizontalTextAlignment="Center"></Label>
            </Grid>
        </FlexLayout>
    </Frame>
</AbsoluteLayout>

look at this posts: https://forums.xamarin.com/discussion/82719/how-to-handle-different-screen-sizes https://www.youtube.com/watch?v=ccU1a7CgxqI — Nehl-IT, Nov 22 '19 at 05:30
@Nehl-IT I did and made total sense but could not make it work with percentage either — developer9969, Nov 22 '19 at 05:44

score 1 · Accepted Answer · answered Nov 26 '19 at 08:21

You could change the width and height according to your frame via binding Value Converters.

Binding Value Converters: https://learn.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/data-binding/converters

Set the name to your Frame first.

    <Frame
 …………
x:Name="frame"/>

Create the MyConverter. MyConverter.cs

public class MyConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        return (double)value / 3.0;
    }

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
    {
        throw new NotImplementedException();
    }
}

Set the StaticResource.

 <ContentPage.Resources>
    <ResourceDictionary>
        <local:MyConverter x:Key="MyConverter" />
    </ResourceDictionary>
</ContentPage.Resources>

Binding to your button.

  <Button Grid.Row="0" Grid.Column="0" Text="A" 
                        WidthRequest="{Binding Source={x:Reference frame},Path=Width,Converter={StaticResource MyConverter}}"
                        HeightRequest="{Binding Source={x:Reference frame},Path=Height,Converter={StaticResource MyConverter}}"></Button>
                <Button Grid.Row="0" Grid.Column="1" Text="B"  
                        WidthRequest="{Binding Source={x:Reference frame},Path=Width,Converter={StaticResource MyConverter}}"
                        HeightRequest="{Binding Source={x:Reference frame},Path=Height,Converter={StaticResource MyConverter}}"/>

Zang thanks for your reply. I have to say that I have never considered using converters for this purpose.. I have an open mind I usually do all in styles , but however how do you tell which size to use.. it does not seem the way to do it, there must be a better way , how does everyone do it? Surely supporting multiple device size must be very common... — developer9969, Nov 26 '19 at 14:44
According to the code you provided, the button you set the width and height to 50. Sometimes, the buttons looks small on device. The Converter set the width and height of button according to the width and height of frame. It would fix the width and height of frame automatically and would not perform the buttoms too small in frame of device. — Wendy Zang - MSFT, Nov 27 '19 at 08:23
I am going to do a small spike and see if works and I would extremely grateful if it does — developer9969, Nov 27 '19 at 08:50
Apologies for the delay it does indeed work and I have to admit that I didnt think of solving the issue this way but it works!! I really thought flexlayout would have sorted the issue somehow and i was keen to learn how to do it using flex — developer9969, Dec 03 '19 at 17:57

Resizing frame and controls according to device size .Suggestions?

1 Answers1

Linked