How to spread Labels horizontally in Xamarin Forms

user_8339263 0
Viewed 717

I want to output 3 controls, a Label, an ImageButton, and another Label, and have the first Label on the left of my layout and have the ImageButton and the second label on the right, but always grouped together. I have tried several ways to do this and none will maintain the left/right orientation of the Label and the ImageButton/Label. In one of my attempts I did the following:

        <StackLayout>
            <!-- Header -->
            <headersAndFooters:MainHeaderSmall ConfigName="IdCard"/>
            <!-- Body -->
            <ScrollView>
                    <StackLayout Margin="-10, 0, -10, 0" HeightRequest="614"  >
                        <!--  -->
                        <Label LineHeight="19"
                               Margin="24, 21, 0, 0"
                               Text="ID Card for 2019 Jeep Wrangler"
                               FontFamily="{StaticResource HBold}" 
                               FontSize="{StaticResource Font16}" 
                               TextColor="{StaticResource NGIC_DarkGray}"/>
                        <FlexLayout x:Name="Problem" Direction="Row" 
                                    Margin="24, 4, 0, 0">
                            <Label LineHeight="18"
                                   Text="Back Side"                            
                                   FontFamily="{StaticResource HNRegular}" 
                                   FontSize="{StaticResource Font14}" 
                                   TextColor="{StaticResource NGIC_GrayishBlue}"/>
                            <StackLayout Orientation="Horizontal">
                                <ImageButton Margin="200, 0, 0, 0" BackgroundColor="Transparent"
                                             WidthRequest="11"
                                             HeightRequest="11" 
                                             Aspect="AspectFit"
                                             HorizontalOptions="Start"
                                             VerticalOptions="Center">
                                    <ImageButton.Source>
                                        <FontImageSource
                                            FontFamily="FAProSolid"
                                            Glyph="{x:Static local:IconFontsFAProRegular.Sync}"
                                            Size="{StaticResource Font11}"
                                            Color="{StaticResource NGIC_Red}"  />
                                    </ImageButton.Source>
                                </ImageButton>
                                <Label Margin="3, 0,0,0"
                                       Text="See Front" 
                                       LineHeight="16"
                                       HorizontalTextAlignment="End"
                                       TextDecorations="Underline"
                                       FontFamily="{StaticResource HNRegular}" 
                                       FontSize="{StaticResource Font13}" 
                                       TextColor="{StaticResource NGIC_Red}"/>
                            </StackLayout>
                        </FlexLayout>
                </StackLayout>
            </ScrollView>
        </StackLayout>

The output from this layout looks fine at lower device resolutions, but the ImageButton and the right side Label are not at the end of the right side.

enter image description here

On a wider device the ImageButton/Label don't even come close to being at the far right of the layout.

enter image description here

I also tried using a Grid inside of the StackLayout (the one named "Problem"), and this didn't work either. right side ImageButton/Label don't stay oriented on the right side of the layout at higher resolutions.

UPDATE:

                                <Grid>
                                    <Grid.RowDefinitions>
                                        <RowDefinition Height="18*" />
                                    </Grid.RowDefinitions>
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="251*" />
                                        <ColumnDefinition Width="73*" />
                                    </Grid.ColumnDefinitions>
                                    <Label Grid.Row="0" 
                                           Grid.Column="0" 
                                           LineHeight="18"
                                           Text="Back Side"                            
                                           FontFamily="{StaticResource HNRegular}" 
                                           FontSize="{StaticResource Font14}" 
                                           TextColor="{StaticResource NGIC_GrayishBlue}"/>
                                    <ImageButton Grid.Row="0" Grid.Column="1" BackgroundColor="Transparent"
                                                 WidthRequest="11"
                                                 HeightRequest="11" 
                                                 Aspect="AspectFit"
                                                 HorizontalOptions="Start"
                                                 VerticalOptions="Center">
                                        <ImageButton.Source>
                                            <FontImageSource
                                                FontFamily="FAProSolid"
                                                Glyph="{x:Static local:IconFontsFAProRegular.Sync}"
                                                Size="{StaticResource Font11}"
                                                Color="{StaticResource NGIC_Red}"  />
                                        </ImageButton.Source>
                                    </ImageButton>
                                    <Label Grid.Row="0" Grid.Column="1" Margin="3, 0,0,0"
                                           Text="See Front" 
                                           LineHeight="16"
                                           HorizontalTextAlignment="End"
                                           TextDecorations="Underline"
                                           FontFamily="{StaticResource HNRegular}" 
                                           FontSize="{StaticResource Font13}" 
                                           TextColor="{StaticResource NGIC_Red}"/>
                                </Grid>
xamarin.forms
1 Answers

here's a simple example that does what you want. When debugging layouts it can be very helpful to set background colors on the different layers so you can visualize how each element is laid out within its parent

<ContentPage BackgroundColor="Blue" 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" mc:Ignorable="d" x:Class="LayoutTest.MainPage">
    <Grid Padding="10,50,10,10" BackgroundColor="Green">
        <Grid.RowDefinitions>
            <RowDefinition Height="200" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="50*" />
            <ColumnDefinition Width="50*" />
        </Grid.ColumnDefinitions>
        <Label BackgroundColor="Yellow" Grid.Row="0" Grid.Column="0" Text="Left Align" />
        <StackLayout BackgroundColor="Orange" Grid.Row="0" Grid.Column="1">
            <Label BackgroundColor="Purple" HorizontalOptions="End" Text="Right Align" />
            <Button BackgroundColor="Red" HorizontalOptions="End" Text="Right Align" />
        </StackLayout>
    </Grid>
</ContentPage>

enter image description here

to align them vertically, try this

<Label BackgroundColor="Yellow" VerticalOptions="Center" Grid.Row="0" Grid.Column="0" Text="Left Align" />
<StackLayout Orientation="Horizontal" VerticalOptions="Center" HorizontalOptions="End" BackgroundColor="Orange" Grid.Row="0" Grid.Column="1">
    <Label BackgroundColor="Purple" VerticalOptions="Center"  Text="Right Align" />
    <Button BackgroundColor="Red" VerticalOptions="Center" Text="Right Align" />
</StackLayout>

enter image description here

Jason_13380
Related