CODEWITHSUNDEEP
xamarin.forms
developer9969
developer9969

Reputation: 5236

Get Label aligned when in flexlayout and frame xamarin forms

I have a flexlayout when a display some items in a frame, but all the items that have labels with text on 2 lines the icon gets pushed up and the label text do not align with each other. Any suggestions of what I am doing wrong?

enter image description here

my code

<Grid>
    <ScrollView>
        <FlexLayout
            Padding="8"
            AlignContent="Start"
            AlignItems="Start"
            BindableLayout.ItemsSource="{Binding MyItems}"
            Direction="Row"
            JustifyContent="Start"
            Wrap="Wrap">
            <BindableLayout.ItemTemplate>
                <DataTemplate>
                    <StackLayout HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand"
                        Margin="4,4,4,4"
                        FlexLayout.AlignSelf="Start"
                        FlexLayout.Basis="{OnIdiom Phone='50%',
                                                   Tablet='33%'}">
                        <Frame
                            Margin="0"
                            Padding="0"
                            BorderColor="DarkGray"
                            CornerRadius="10"
                            HeightRequest="130"
                            HasShadow="True">

                            <StackLayout VerticalOptions="Center" HorizontalOptions="Center">
                                <Image  Aspect="AspectFit" Source="PhotoIcon.png"
                                        Margin="0,20,0,0" WidthRequest="50" HeightRequest="50"/>

                                <Label  Text="{Binding Name}" Margin="0,10,0,10" />
                            </StackLayout>

                        </Frame>
                    </StackLayout>
                </DataTemplate>
            </BindableLayout.ItemTemplate>
        </FlexLayout>
    </ScrollView>
</Grid>

Upvotes: 1

Views: 1317

Answers (1)

Lucas Zhang
Lucas Zhang

Reputation: 18861

Improve your code

<Label  Text="{Binding Name}"  HorizontalTextAlignment="Center" VerticalTextAlignment="Center" Margin="0,10,0,10" />

Update:

Because StackLayout will not fit the size of its child elements ,so I suggest you can use Grid instead of it.

<Grid VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
      <Grid.RowDefinitions>
          <RowDefinition Height="0.5*" />
          <RowDefinition Height="0.5*" />                                       
      </Grid.RowDefinitions>

      <Grid.ColumnDefinitions>
                                        
      </Grid.ColumnDefinitions>


      <Image  Grid.Row="0" Aspect="AspectFit" Source="PhotoIcon.png" Margin="0,20,0,0" WidthRequest="50" HeightRequest="50"/>

      <Label  Grid.Row="1" Text="{Binding Name}" Margin="0,10,0,10" HorizontalTextAlignment="Center" VerticalTextAlignment="Center"/>
</Grid>

Upvotes: 1

Related Questions