Xamarin Forms 水平/垂直选项似乎不起作用

Question

我的 Xamarin Forms 项目中有以下 XAML

    <StackLayout x:Name="slFullPage" Orientation="Vertical" HorizontalOptions="Fill" VerticalOptions="FillAndExpand" Margin="0,0,0,0" BackgroundColor="AliceBlue">
        <localapp:PageHeader x:Name="pgHeader" VerticalOptions="Start" HorizontalOptions="Fill" />
        <combobox:SfComboBox x:Name="cmbLanguage" DataSource="{Binding LangaugesByAppLanguage}" TextSize="Micro" 
                             TextColor="#283655" SelectionChanged="cmbLanguage_SelectionChanged"
                             Watermark="{localapp:Translate SelectValue}" DropDownItemHeight="25" WidthRequest="250" HeightRequest="30"
                             DropDownTextSize="Micro" BackgroundColor="White" HorizontalOptions="Center" VerticalOptions="Start"
                             DisplayMemberPath="LanguageName" SelectedValuePath="ISO_639_1_Code">
        </combobox:SfComboBox>
        <StackLayout Orientation="Horizontal" HorizontalOptions="FillAndExpand" VerticalOptions="End" BackgroundColor="Aqua">
            <buttons:SfButton x:Name="btnCancel" Text="{localapp:Translate Cancel}" HorizontalOptions="Start" VerticalOptions="End" Margin="8,0,4,0"/>
            <buttons:SfButton x:Name="btnDone" Text="{localapp:Translate Done}" HorizontalOptions="End" VerticalOptions="End" Margin="4,0,8,0"/>
        </StackLayout>
        <localapp:AppFooter x:Name="pgFooter" VerticalOptions="End" HorizontalOptions="Fill" />
    </StackLayout>

根据我对可以在对象上指定的水平选项的理解，我希望“取消”按钮位于水平堆栈布局的开头，而“完成”按钮位于同一堆栈的末尾布局。

此外，根据可以使用的垂直选项，我希望其中包含按钮的堆栈布局以及我的 appfoot 出现在我的 slFullPage 堆栈布局的底部。然而，这些事情都没有发生。

下面是我得到的：

你可以看到整个页面堆栈布局一直到屏幕底部，但我的按钮和页脚不在底部。

此外，您可以看到水平堆栈布局 (aqua) 一直贯穿整个屏幕，但按钮的位置并未基于其水平选项。

有什么想法吗？？仅供参考 - 我是运行作为 UWP 应用程序的项目。

Answer 1

您不想使用 StackLayout（嗯 2 StackLayout），而是 Grid:

布局更方便，性能也更高。

<Grid ColumnSpacing="0" RowSpacing="0">
    <Grid.RowDefinitions>
        <RowDefinition Height="50" />
        <RowDefinition Height="40" />
        <RowDefinition Height="40" />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinition>
        <ColumnDefinition Width="80" />
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="80" />
    </Grid.ColumnDefinition>

    <localapp:PageHeader Grid.Row="0" x:Name="pgHeader" />

    <combobox:SfComboBox Grid.Row="1" x:Name="cmbLanguage" DataSource="{Binding LangaugesByAppLanguage}" TextSize="Micro" 
                         TextColor="#283655" SelectionChanged="cmbLanguage_SelectionChanged"
                         Watermark="{localapp:Translate SelectValue}" DropDownItemHeight="25" WidthRequest="250"
                         DropDownTextSize="Micro" BackgroundColor="White" HorizontalOptions="Center"
                         DisplayMemberPath="LanguageName" SelectedValuePath="ISO_639_1_Code">
    </combobox:SfComboBox>

    <buttons:SfButton Grid.Row="2" Grid.Column="0" 
                      x:Name="btnCancel" Text="{localapp:Translate Cancel}"  Margin="8,0,4,0"/>
    <buttons:SfButton Grid.Row="2" Grid.Column="2" 
                      x:Name="btnDone" Text="{localapp:Translate Done}" Margin="4,0,8,0"/>
</Grid>

Answer 2

Based on my understanding of the horizontal options that can be specified on an object, I would expect the Cancel button to be at the start of my horizontal stack layout and my Done button to be at the end of the same stack layout.

您可以使用 AbsoluteLayout 使按钮位于视图中的任何位置。

<AbsoluteLayout BackgroundColor="LightBlue" HeightRequest="60" VerticalOptions="EndAndExpand">
        <Button Text="Cancel" Margin="10,10" BackgroundColor="DarkBlue" TextColor="White"/>
        <Button Text="Done" Margin="10,10" AbsoluteLayout.LayoutBounds="1, 0, AutoSize, AutoSize" AbsoluteLayout.LayoutFlags="PositionProportional" BackgroundColor="DarkBlue" TextColor="White"/>
</AbsoluteLayout>

并使用 VerticalOptions="EndAndExpand" 使其出现在其父项的末尾并展开。

更新：

我不知道之前是什么，但现在，它实际上并没有填满StackLayout中的space。只有在使用 fill 选项时，它才会扩展为 space.

当您希望取消按钮位于开始而完成按钮位于同一堆栈布局的末尾时，需要设置填充选项和扩展。我用简单的例子来展示。

<StackLayout Orientation="Horizontal" HorizontalOptions="FillAndExpand" VerticalOptions="EndAndExpand" BackgroundColor="Aqua">
            <Button x:Name="btnCancel" Text="Cancel" HorizontalOptions="StartAndExpand" Margin="8,0,4,0"/>
            <Button x:Name="btnDone" Text="Done" HorizontalOptions="EndAndExpand" Margin="4,0,8,0"/>
</StackLayout>

如果你不想在最后两行之间 space，你需要一个嵌套的堆栈布局来做到这一点，而不需要 space。

简单代码：

 <StackLayout BackgroundColor="LightGray">
    <StackLayout>
        <Entry  x:Name="pgHeader" Text="pgHeader"  HorizontalOptions="FillAndExpand" />
        <Entry x:Name="cmbLanguage" Text="cmbLanguage" WidthRequest="250" HeightRequest="30"
                          BackgroundColor="Red" HorizontalOptions="CenterAndExpand" ></Entry>

    </StackLayout>

    <StackLayout  HorizontalOptions="FillAndExpand" VerticalOptions="EndAndExpand">
        <StackLayout Orientation="Horizontal"  BackgroundColor="Aqua">
            <Button x:Name="btnCancel" Text="Cancel" HorizontalOptions="StartAndExpand" Margin="8,0,4,0"/>
            <Button x:Name="btnDone" Text="Done" HorizontalOptions="EndAndExpand" Margin="4,0,8,0"/>
        </StackLayout>
        <Entry x:Name="pgFooter" Text="pgFooter"/>
    </StackLayout>
</StackLayout>

Xamarin Forms 水平/垂直选项似乎不起作用

Xamarin Forms Horizontal / Vertical options don' seem to be working

xamarin.forms

xamarin.uwp

stacklayout