Stack Layout layout nightmare with Xamarin XAML forms

Question

I have the following code:

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

It all loads fine but when the app loads it is showing, but the Switch is not flush right. Why? It's really annoying, seems really inconsistent I've looked at http://forums.xamarin.com/discussion/21226/how-to-right-align-a-view-inside-a-list-item but this doesn't work for me.

Any ideas?

Answer 1

Use this

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

Answer 2

This is well-known issue with combination of StackLayout and Label:

• Bugzilla #28650
• Bugzilla #31128
• Bugzilla #33841

You could use workaround described by JamesMontemagno. The point is to use Grid instead of StackLayout in that case.