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>

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

此外，基于可以使用的垂直选项，我希望其中带有按钮的堆栈布局以及我的脚步出现在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

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

您可以使用 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中的空间。只有使用填充选项时，它才会扩展到该空间。

如果您希望“取消”按钮位于同一堆栈布局的开始，而“完成”按钮位于同一堆栈布局的结尾，则需要设置填充选项和支出。我用一个简单的例子来显示。

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

如果您不希望最后两行之间有空格，则需要一个嵌套的stacklayout来做到没有空格。

简单代码：

 <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水平/垂直选项似乎不起作用

2 个答案: