question

WeiWen-3421 avatar image
0 Votes"
WeiWen-3421 asked WeiWen-3421 answered

Why only part of the second element in stacklayout is visible?

I have a top level StackLayout which includes a StackLayout and a Grid. The inner StackLayout contains a label and a ScrollView. The ScrollView has only a StackLayout which is dynamically filled with a custom layout.

    <StackLayout Spacing="10">
         <StackLayout Spacing="10" Margin="0" VerticalOptions="FillAndExpand">
             <Label Margin="20,20,20,0" TextColor="#FF9800" Text="ALERTS" FontSize="13">
                 <Label.FontFamily>
                     <OnPlatform x:TypeArguments="x:String">
                         <On Platform="iOS" Value="WorkSans-Bold" />
                         <On Platform="Android" Value="Fonts/WorkSans-Bold.ttf#WorkSans-Bold" />
                     </OnPlatform>
                 </Label.FontFamily>
             </Label>               
             <ScrollView Orientation="Horizontal" VerticalOptions="CenterAndExpand">
                 <StackLayout Orientation="Horizontal" x:Name="ActiveGroups" Margin="15,0,0,0" />   <!-- this will be filled with the below custom layout -->                  
             </ScrollView>
         </StackLayout>

         <Grid VerticalOptions="FillAndExpand" BackgroundColor="#355466">
             <Grid.RowDefinitions>
                 <RowDefinition Height="auto" />
                 <RowDefinition Height="*" />
             </Grid.RowDefinitions>
              ........
          </Grid>
     </StackLayout>


The custom layout is a StackLayout that contains a Grid which has two rows for a StackLayout and a Label, as shown below. On some devices, the entire content of the Grid is visible. But on smaller devices, the label is not visible, and even the StackLayout of the Grid is not all visible. How can I solve this problem, that is, make them look the same on all devices?

  <StackLayout  Padding="0" HeightRequest="100" WidthRequest="70" VerticalOptions="CenterAndExpand" >
         <Grid Margin="0" Padding="0" VerticalOptions="Start">
             <Grid.RowDefinitions>
                 <RowDefinition Height="67" />
                 <RowDefinition Height="10" />
             </Grid.RowDefinitions>
             <Grid.ColumnDefinitions>
                 <ColumnDefinition Width="70" />
             </Grid.ColumnDefinitions>

             <StackLayout Grid.Row="0" Grid.Column="0" HeightRequest="67" WidthRequest="70">
                 <Frame  CornerRadius="3" IsClippedToBounds="True" HasShadow="False" HeightRequest="70" WidthRequest="70" Padding="3">
                     <StackLayout HeightRequest="60" WidthRequest="60"  Margin="0" Padding="0" Spacing="0">
                         <Frame CornerRadius="2"  IsClippedToBounds="True"  HasShadow="False" Padding="0"  x:Name="IconStack">
                             <StackLayout  BackgroundColor="{Binding Color}" WidthRequest="60" MinimumWidthRequest="60" HeightRequest="60">
                                 <Label FontSize="28" Text="{Binding Initials}" HeightRequest="56" WidthRequest="60" Margin="0,10,0,0" Padding="0" TextColor="White" HorizontalOptions="Center" VerticalOptions="CenterAndExpand" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" MaxLines="1" x:Name="InitialsLabel">
                                     <Label.FontFamily>
                                         <OnPlatform x:TypeArguments="x:String">
                                             <On Platform="iOS" Value="WorkSans-Bold" />
                                             <On Platform="Android" Value="Fonts/WorkSans-Bold.ttf#WorkSans-Bold" />
                                         </OnPlatform>
                                     </Label.FontFamily>
                                 </Label>
                                 <Label BackgroundColor="{Binding GroupColor}" WidthRequest="60" HeightRequest="4" HorizontalOptions="FillAndExpand" VerticalOptions="CenterAndExpand"/>
                             </StackLayout>
                         </Frame>
                     </StackLayout>
                 </Frame>
             </StackLayout>
             <Label Grid.Row="1" Grid.Column="0" Margin="0,-5,0,0" Padding="5,0,0,0" BackgroundColor="Transparent" Text="{Binding Name}" FontSize="10" VerticalOptions="Center" MaxLines="1" TextColor="White" LineBreakMode="TailTruncation"/>
      </Grid>
  </StackLayout>
dotnet-xamarin
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

1 Answer

WeiWen-3421 avatar image
0 Votes"
WeiWen-3421 answered

To solve this problem, I had to dynamically change the height based on device information. I was hoping for a better solution, but this is still acceptable.

5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.