Xamarin.Forms 和大小调整答案

【问题标题】：Xamarin.Forms and sizingXamarin.Forms 和大小调整
【发布时间】：2020-05-19 08:55:48
【问题描述】：

有人能告诉我为什么这样做吗？如果您知道如何，请告诉我如何定义控件以水平或垂直填充其父级。

此代码中的页面绘制了以下屏幕截图中的内容。我完全不明白发生了什么。我解释说 row-/columndefinitions 中的 * 会强制内容与包含控件一样宽，但这不是正在发生的事情。事实上，如果我将内部网格中的 rowdefinitions 宽度增加到10000*，它就会与容器一样宽，但只有* 使它只有 1 位宽。完全不直观。

外部网格符合我的预期。它只有1/5宽，占高度的1/2。这就是我对*、4* columndefinition 和*、* rowdefinition 的期望。

我真的怀疑这里有一个错误，如果它是一个讨厌的错误。

    <?xml version="1.0" encoding="utf-8" ?>
    <ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
                 xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
                 xmlns:d="http://xamarin.com/schemas/2014/forms/design"
                 xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
                 xmlns:tgb="clr-namespace:TGB.Xamarin.Forms.Controls;assembly=TGB.Xamarin.Forms"
                 mc:Ignorable="d"
                 x:Class="TGB.Xamarin.Forms.TestApp.MainPage">

        <StackLayout VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
            <Grid VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="4*" />
                </Grid.ColumnDefinitions>

                <Grid.RowDefinitions>
                    <RowDefinition Height="*"/>
                    <RowDefinition Height="*"/>
                </Grid.RowDefinitions>

                <AbsoluteLayout BackgroundColor="Green" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
                    <Grid VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="50*" />
                        </Grid.ColumnDefinitions>

                        <Grid.RowDefinitions>
                            <RowDefinition Height="50*"/>
                        </Grid.RowDefinitions>

                        <ContentView BackgroundColor="Orange" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
                        </ContentView>
                    </Grid>
                </AbsoluteLayout>
            </Grid>
        </StackLayout>

    </ContentPage>

编辑：

这符合预期：

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
                     xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
                     xmlns:d="http://xamarin.com/schemas/2014/forms/design"
                     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
                     xmlns:tgb="clr-namespace:TGB.Xamarin.Forms.Controls;assembly=TGB.Xamarin.Forms"
                     mc:Ignorable="d"
                     x:Class="TGB.Xamarin.Forms.TestApp.MainPage">

    <StackLayout VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
        <Grid VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="4*" />
            </Grid.ColumnDefinitions>

            <Grid.RowDefinitions>
                <RowDefinition Height="*"/>
                <RowDefinition Height="*"/>
            </Grid.RowDefinitions>

            <ContentView BackgroundColor="Green" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
                <Grid VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*" />
                    </Grid.ColumnDefinitions>

                    <Grid.RowDefinitions>
                        <RowDefinition Height="*"/>
                        <RowDefinition Height="*"/>
                    </Grid.RowDefinitions>

                    <ContentView BackgroundColor="Orange" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
                    </ContentView>
                </Grid>
            </ContentView>
        </Grid>
    </StackLayout>
</ContentPage>

【问题讨论】：

你想达到什么效果？你可以提供一个屏幕截图。
我正在创建一个自定义滑块。默认滑块只有水平方向。我需要一个垂直的。所以我想我会采用一个 AbsoluteLayout 并在其中放置一个 contentview，我可以在其中滑动。它当然必须自动调整到容器的大小。
我使用 Xamarin.Forms 已有一段时间了，但无法直观地解释它应该如何工作。
你想让橙色的 ContentView 水平填充 AbsoluteLayout 吗？
不，我希望橙色与外部容器一样宽并具有固定高度，比如说 HeighRequest = "150"

标签： xamarin.forms

【解决方案1】：

这是因为你使用了AbsoluteLayout。所以需要在其子元素中设置AbsoluteLayout.LayoutBounds和AbsoluteLayout.LayoutFlags。

另外，如果你想手动设置ContentView的高度，请将行的高度设置为自动，在这个选项中它将适合其子元素的大小。

所以你可以像下面这样改进你的代码。

<StackLayout VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
        <Grid VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="4*" />
            </Grid.ColumnDefinitions>

            <Grid.RowDefinitions>
                <RowDefinition Height="*"/>
                <RowDefinition Height="*"/>
            </Grid.RowDefinitions>

            <AbsoluteLayout BackgroundColor="Green" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
                <Grid AbsoluteLayout.LayoutBounds="0,0,1,1" AbsoluteLayout.LayoutFlags="All" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="50*" />
                    </Grid.ColumnDefinitions>

                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto"/>
                    </Grid.RowDefinitions>


                    <ContentView HeightRequest="100" BackgroundColor="Orange" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
                    </ContentView>
                </Grid>
            </AbsoluteLayout>
        </Grid>
    </StackLayout>

【讨论】：