根据设备大小调整框架和控件的大小。建议？

Question

我有一个带有 2 个按钮和标签的框架。 确保内部框架和控件的最佳做法是什么 根据屏幕大小调整大小？

无论我尝试过什么似乎都没有做到！ 我认为 flexlayout 可以开箱即用，但无法使其发挥作用。

我使用了绝对布局来调整框架的大小。

任何建议

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

Answer 1

您可以通过绑定值转换器根据您的框架更改宽度和高度。

绑定值转换器： https://docs.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/data-binding/converters

首先为您的 Frame 设置名称。

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

创建 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();
    }
}

设置静态资源。

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

绑定到您的按钮。

  <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}}"/>