Xamarin XAML 表单的堆栈布局布局噩梦答案

【问题标题】：Stack Layout layout nightmare with Xamarin XAML formsXamarin XAML 表单的堆栈布局布局噩梦
【发布时间】：2016-07-13 08:52:22
【问题描述】：

我有以下代码：

  <StackLayout Orientation="Horizontal" HorizontalOptions="FillAndExpand" Margin="0,10,0,10" BackgroundColor="Green" Padding="5,5,5,5">
        <StackLayout Orientation="Vertical" HorizontalOptions="FillAndExpand" Margin="0,0,0,0" BackgroundColor="Blue">
              <Label Text="SHOW COMPLETED TASKS" BackgroundColor="Red" Style="{StaticResource lblSubHeading_Black}" />
        </StackLayout>
        <Switch x:Name="CompletedJobsSwitch" Toggled="CompletedJobsSwitch_Toggled" HorizontalOptions="EndAndExpand" IsToggled="{Binding isOn}" BackgroundColor="Yellow"/>
  </StackLayout>

一切正常，但是当应用程序加载时它会显示，但 Switch 不正确。为什么？真的很烦，好像真的很不协调我看过 http://forums.xamarin.com/discussion/21226/how-to-right-align-a-view-inside-a-list-item 但这对我不起作用。

有什么想法吗？

【问题讨论】：

并不矛盾。 StackLayout 只占用所需的空间。尝试在其最高级别周围放置Grid。
当我说不稳定时，我的意思是 Xamarin 表单的 XAML，但我将 StackLayout 设置为填充和扩展，为什么不这样做？添加网格似乎是在解决问题。
您不必添加网格，只需将您的顶级 StackLayout 替换为网格即可。

标签： c# xaml xamarin xamarin.forms

【解决方案1】：

使用这个

<Grid BackgroundColor="Green">
  <Grid.RowDefinitions>
    <RowDefinition Height="auto" />
  </Grid.RowDefinitions>

  <Grid.ColumnDefinitions>
    <ColumnDefinition Width="*" />
    <ColumnDefinition Width="auto" />
  </Grid.ColumnDefinitions>
  <Label Text="SHOW COMPLETED TASKS" BackgroundColor="Red" />
  <Switch x:Name="CompletedJobsSwitch" BackgroundColor="Yellow" Grid.Column="1" />
</Grid>

【讨论】：

这个解决方案对我也很有效。我在使用 Orientation="Horizontal" 的 StackLayout 时遇到了非常相似的问题，最后一项是使用 HorizontalOptions="End" 设置的开关。它在所有尺寸的 Android 屏幕和更宽的 IOS 屏幕上都可以正常工作（将开关在屏幕上向右对齐），但在较小的 IOS 屏幕上，如您所描绘的那样，开关向左滑动。上面的网格方法在我测试过的所有屏幕上都可以正常工作。

【解决方案2】：

这是StackLayout 和Label 组合的众所周知的问题：

您可以使用JamesMontemagno 描述的解决方法。关键是在这种情况下使用Grid 而不是StackLayout。

【讨论】：

【解决方案3】：

也许我参加聚会太晚了，一些错误已经修复，但对于其他通过搜索到达这里的人：

对于左侧项目，使用 HorizontalOptions="StartAndExpand"
对于右对齐项目，请使用 HorizontalOptions="End"
开关是一个固定长度的组件，所以你不想使用扩展。如果你使用 EndAndExpand，它会在右边添加一些填充，破坏你的右对齐。
标签想要填满剩余的空间，所以告诉它展开。

 <StackLayout VerticalOptions="Start" Orientation="Horizontal" Margin="0,10,0,10" BackgroundColor="Green" Padding="5,5,5,5">
            <Label Text="SHOW COMPLETED TASKS" BackgroundColor="Red"  HorizontalOptions="StartAndExpand"  />
            <Switch x:Name="CompletedJobsSwitch"  HorizontalOptions="End" IsToggled="false" BackgroundColor="Yellow"/>
</StackLayout>

【讨论】：