Photoshop Question posted in
The official user guide can be found here.

Overflowing text onto the next line in a Grid – Photoshop

I have a Grid where I have defined the Height as 50, and then displaying a bunch of labels bound to a List. How can I overflow the Labels from row to row instead of what’s happening now which is squeezing the Labels vertically?

public List LabelList { get; set; } = new List
{
“Cat”,
“Dog”,
“Fox”,
“Leopard”,
“Bear”,
“Monkey”,
“Lion”,
“Bison”,
“Alpaca”,
“Sheep”,
“Ant”,
“Fox”,
“Tiger”,
“Elephant”,
“Mouse”,
“Eagle”,
“Coyote”
};

<Grid.RowDefinitions>
    <RowDefinition Height="20" />
    <RowDefinition Height="50" />
    <RowDefinition Height="20" />
</Grid.RowDefinitions>


<StackLayout Grid.Row="0" BackgroundColor="Aquamarine" />

<StackLayout
    Grid.Row="1"
    BackgroundColor="Beige"
    BindableLayout.ItemsSource="{Binding LabelList}"
    Orientation="Horizontal">

    <Label
        Padding="2"
        BackgroundColor="Blue"
        FontSize="Large"
        Text="{Binding}" />
</StackLayout>


<StackLayout Grid.Row="2" BackgroundColor="Aquamarine" />

What is happening now:
enter image description here

What I want to achieve (this is photoshopped):
enter image description here

Tags:

3

Answers


  1. Chosen as BEST ANSWER
    0

    I had to use FlexLayout instead of StackLayout

        <FlexLayout
        Grid.Row="1"
        BackgroundColor="Beige"
        BindableLayout.ItemsSource="{Binding LabelList}"
        Wrap="Wrap">

        <Label
            Padding="2"
            BackgroundColor="Blue"
            FontSize="Large"
            HorizontalOptions="StartAndExpand"
            Text="{Binding}" />
    </FlexLayout>

  2. 0

    Have you tried something like?:

    <StackLayout
    Grid.Row="1"
    BackgroundColor="Beige"
    BindableLayout.ItemsSource="{Binding LabelList}"
    Orientation="Horizontal">

    <Label
        Padding="2"
        BackgroundColor="Blue"
        FontSize="Large"
        HorizontalOptions="StartAndExpand"
        Text="{Binding}" />
</StackLayout>

    From what I gather, you haven’t set your LayoutOptions for the labels you are trying to stack.
    https://learn.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/layouts/stack-layout

    Login or Signup to reply.
  3. 0

    If you want to display UI like the screenshot, you can take a look the following code:

     <Grid.RowDefinitions>
            <RowDefinition Height="20" />
            <RowDefinition Height="50" />
            <RowDefinition Height="20" />
        </Grid.RowDefinitions>


        <StackLayout Grid.Row="0" BackgroundColor="Aquamarine" />
        <StackLayout
            Grid.Row="1"
            BackgroundColor="Beige"
            BindableLayout.ItemsSource="{Binding LabelList}"
            Orientation="Horizontal">
            <BindableLayout.ItemTemplate>
                <DataTemplate>
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="Auto" />
                        </Grid.ColumnDefinitions>
                        <Label Text="{Binding}" />
                    </Grid>

                </DataTemplate>
            </BindableLayout.ItemTemplate>
        </StackLayout>


        <StackLayout Grid.Row="2" BackgroundColor="Aquamarine" />

    enter image description here

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search