根据设备大小调整框架和控件的大小.建议? [英] Resizing frame and controls according to device size .Suggestions?

问题描述

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

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?

我尝试过的似乎都没有成功！！！我认为 flexlayout 可以开箱即用，但不能让它工作.

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.

任何建议

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

推荐答案

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

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

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

首先将名称设置为您的框架.

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

创建 MyConverter. MyConverter.cs

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

设置静态资源.

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

这篇关于根据设备大小调整框架和控件的大小.建议?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！