根据设备大小.Suggestions调整帧和控件的大小？

Question

我有一个有两个按钮和标签的框架。确保根据屏幕大小调整帧和内部控制的最佳实践是什么？

不管我做了什么，似乎都做不到！我认为柔性布局可以做到这一点，但不能让它发挥作用。

我使用绝对布局来调整帧的大小。

任何建议

 <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://learn.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/data-binding/converters

首先将名称设置为框架.

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

设置StaticResource.

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