How to make a fixed element width (frame or stacklayout)

Issue

I made a frame on Android Xamarin.Forms using an absoluteLayOut! My goal is to set little space from the device width! But when I try it on two device there was total reduction from the height and and width of the frame..

https://i.stack.imgur.com/8kjzD.jpg

<AbsoluteLayout>
    <Frame AbsoluteLayout.LayoutBounds="0.5,0.5,310,340" AbsoluteLayout.LayoutFlags="PositionProportional" CornerRadius="15" Padding="0">

        <AbsoluteLayout BackgroundColor="Black">
            <Label Text="mos.Softs" FontAttributes="Bold" FontSize="16" TextColor="Wheat"
                   AbsoluteLayout.LayoutBounds="0.5,0.011" AbsoluteLayout.LayoutFlags="PositionProportional"></Label>
            
            <Label x:Name="lblWidth" FontAttributes="Bold" FontSize="16" TextColor="Wheat"
                   AbsoluteLayout.LayoutBounds="0.5,0.5" AbsoluteLayout.LayoutFlags="PositionProportional"></Label>

            <Button Padding="0" CornerRadius="5" Text="Click me" TextTransform="None"
                    AbsoluteLayout.LayoutBounds="0.5,0.98, 100,40" AbsoluteLayout.LayoutFlags="PositionProportional"></Button>
        </AbsoluteLayout>
    </Frame>
</AbsoluteLayout>

Solution

You could use the converter to fit the size instead of AbsoluteLayout.

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 for the frame value:

 <Frame x:Name="frame" >
        <StackLayout BackgroundColor="Gray" VerticalOptions="CenterAndExpand" WidthRequest="{Binding Source={x:Reference frame},Path=Width,Converter={StaticResource MyConverter}}"
                    HeightRequest="{Binding Source={x:Reference frame},Path=Height,Converter={StaticResource MyConverter}}" >
            
            <Label Text="mos.Softs" FontAttributes="Bold" FontSize="16" TextColor="Wheat"
                    HorizontalOptions="CenterAndExpand" VerticalOptions="StartAndExpand" ></Label>

            <Label  Text="Device Height" x:Name="lblWidth" FontAttributes="Bold" FontSize="16" TextColor="Wheat"
                    HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand"></Label>

            <Button Padding="0" CornerRadius="5" Text="Click me" TextTransform="None"
                    HorizontalOptions="CenterAndExpand" VerticalOptions="EndAndExpand" ></Button>

        </StackLayout>
    </Frame>

Answered By - Wendy Zang - MSFT