xamlxamarin.formslayoutlandscapeportrait

How would it be a good way to keep the title of the notification and the date separate? In both orientations of the device


Portrait Landscape

NotificationsPage.xaml

<RefreshView x:DataType="local:NotificacoesViewModel"
                                 Command="{Binding LoadItemsCommand}"
                                 IsRefreshing="{Binding IsBusy, Mode=TwoWay}"
                                 Padding="0,15,0,0">
                        <CollectionView x:Name="ItemsListView"
                                        ItemsSource="{Binding Notificacoes}"
                                        SelectionMode="None"
                                        ItemsUpdatingScrollMode="KeepItemsInView"
                                        VerticalScrollBarVisibility="Never"
                                        HorizontalScrollBarVisibility="Never"
                                        IsGrouped="True">
                            <CollectionView.GroupHeaderTemplate>
                                <DataTemplate x:DataType="model:NotificacaoGrupoData">
                                    <Label Text="{Binding Data_agrupada}"
                                           FontSize="20"
                                           FontAttributes="Bold"
                                           HorizontalTextAlignment="Center"
                                           Padding="0,15,0,15"
                                           Style="{StaticResource LabelDataAgrupadaStyle}"/>
                                </DataTemplate>
                            </CollectionView.GroupHeaderTemplate>

                            <CollectionView.ItemTemplate>
                                <DataTemplate>
                                    <StackLayout x:DataType="model:Notificacao">
                                        <StackLayout Orientation="Horizontal">
                                            <StackLayout.GestureRecognizers>
                                                <TapGestureRecognizer NumberOfTapsRequired="1"
                                                              Command="{Binding Source={RelativeSource AncestorType={x:Type local:NotificacoesViewModel}},
                                                                        Path=NotificacaoSelecionada}"
                                                              CommandParameter="{Binding .}"/>
                                            </StackLayout.GestureRecognizers>
                                            <Image Source="logo"
                                                   HeightRequest="40"
                                                   Margin="0,0,5,0"
                                                   VerticalOptions="CenterAndExpand"/>

                                            <StackLayout VerticalOptions="CenterAndExpand"
                                                         Margin="0,0,10,0">
                                                <FlexLayout JustifyContent="SpaceBetween"
                                                            AlignItems="Center">
                                                    <Label Text="{Binding app_nome}" 
                                                           Style="{StaticResource LabelStyle}" 
                                                           FontSize="20"
                                                           WidthRequest="230"
                                                           LineBreakMode="TailTruncation"
                                                           FontAttributes="Bold"/>

                                                    <Label Text="{Binding dt_cadastro_hora}"
                                                           Style="{StaticResource LabelStyle}" 
                                                           FontSize="13"
                                                           LineBreakMode="NoWrap"
                                                           MinimumWidthRequest="50"
                                                           FontAttributes="Bold"/>
                                                </FlexLayout>

                                                <Label Text="{Binding mensagem}"
                                                       TextType="Html"
                                                       LineBreakMode="TailTruncation"
                                                       Style="{StaticResource LabelStyle}"/>
                                            </StackLayout>

                                            <Label Text="&#xf105;"
                                                   FontFamily="FontAwesomeBold"
                                                   TextColor="#ACACAC"
                                                   FontSize="24"
                                                   HorizontalOptions="EndAndExpand"
                                                   VerticalOptions="CenterAndExpand"
                                                   Style="{StaticResource LabelStyle}">
                                            </Label>
                                        </StackLayout>

                                        <BoxView HeightRequest="1"
                                                 BackgroundColor="#DDDDDD"
                                                 Margin="0,5,0,5"/>
                                    </StackLayout>
                                </DataTemplate>
                            </CollectionView.ItemTemplate>
                        </CollectionView>
</RefreshView>

Solution

  • You can try replace

    <FlexLayout JustifyContent="SpaceBetween"
                AlignItems="Center">
        <Label Text="{Binding app_nome}" 
               Style="{StaticResource LabelStyle}" 
               FontSize="20"
               WidthRequest="230"
               LineBreakMode="TailTruncation"
               FontAttributes="Bold"/>
    
        <Label Text="{Binding dt_cadastro_hora}"
               Style="{StaticResource LabelStyle}" 
               FontSize="13"
               LineBreakMode="NoWrap"
               MinimumWidthRequest="50"
               FontAttributes="Bold"/>
    </FlexLayout>
    

    By (notice the HorizontalOptions)

    <StackLayout Orientation="Horizontal">
        <Label Text="{Binding app_nome}" 
               Style="{StaticResource LabelStyle}"
               HorizontalOptions="StartAndExpand"
               FontSize="20"
               WidthRequest="230"
               LineBreakMode="TailTruncation"
               FontAttributes="Bold"/>
    
        <Label Text="{Binding dt_cadastro_hora}"
               Style="{StaticResource LabelStyle}"
               HorizontalOptions="End"
               FontSize="13"
               LineBreakMode="NoWrap"
               MinimumWidthRequest="50"
               FontAttributes="Bold"/>
    </StackLayout>