I want to put 5 columns together in StackLayout without going out of the frame. In iPhone 12Pro Max everything is ok, but in Iphone 8 things don't look good.
My Code:
<Frame
BorderColor="White"
Margin="10,0,10,0"
CornerRadius="10"
HasShadow="True"
BackgroundColor="Transparent">
<RelativeLayout>
<Image
x:Name="ImageDescriptionForecast1"
Aspect="AspectFill"
RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent,
Property=Height,
Factor=1}"
RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent,
Property=Width,
Factor=1}"/>
<StackLayout>
<Label x:Name="DateTimeForecast1"
Style="{StaticResource labelStyle}"
HorizontalTextAlignment="Center"
VerticalTextAlignment="Center"
VerticalOptions="Center"
FontSize="14"/>
<Label x:Name="DateTimeForecast2"
Style="{StaticResource labelStyle}"
HorizontalTextAlignment="Center"
FontSize="14"/>
<Grid BackgroundColor="Transparent"
Padding="0,0,0,0"
RowSpacing="0"
ColumnSpacing="0">
<Grid.RowDefinitions>
<RowDefinition Height="auto" />
<RowDefinition Height="auto" />
<RowDefinition Height="auto" />
<RowDefinition Height="auto" />
<RowDefinition Height="auto" />
<RowDefinition Height="auto" />
<RowDefinition Height="auto" />
<RowDefinition Height="auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
........
........
</Grid>
<StackLayout>
</RelativeLayout>
</Frame>
I tried to put "auto" on ColumnDefinition Width = "auto" but this not work for me. Is there a way to fit them on display?
When we check document Xamarin.Forms Grid ,we will find that
So when the size of the item in the grid is large enough, it will take up a lot of space in the space even if we set value auto
to ColumnDefinition
.
If we want the items in the same row take up the same space, we usually set *
for ColumnDefinition
. In this condition, if a row have many items and a single item take up a lot of space, all elements in a row will not be fully displayed on the screen.
In this condition, we need to adjust the HeightRequest
and WidthRequest
of the item.
For example:
<Frame Grid.Row="0"
HeightRequest="30" WidthRequest="30"
BackgroundColor="Yellow"
<Grid.Column="0">
<Image Source="watermelon.png" HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand" Aspect="AspectFill" />
</Frame>
For some mobile desktop applications, if there are more columns, each item will be resized to a smaller size. Similarly, if there are fewer columns, then each item will be resized to a larger size.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.