alignment in chat app

Question

I am doing a chat app with Maui, but I need help with alignment

<ContentView
    x:Class="FireChat.Controls.ChatView"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:model="clr-namespace:FireChat.Model"
    x:Name="ChatControl">
    <CollectionView
        x:Name="MessagesCollectionView"
        Margin="10"
        ItemsSource="{Binding Messages, Source={x:Reference ChatControl}}">
        <CollectionView.ItemTemplate>
            <DataTemplate x:DataType="model:FireMessage">
                <Border
                    x:Name="MessageBorder"
                    Margin="5"
                    Padding="10"
                    BackgroundColor="LightBlue"
                    MaximumWidthRequest="300"
                    StrokeThickness="0">
                    <Border.StrokeShape>
                        <RoundRectangle CornerRadius="15" />
                    </Border.StrokeShape>
                    <Border.Style>
                        <Style TargetType="Border">
                            <Setter Property="HorizontalOptions" Value="End" />
                            <Setter Property="BackgroundColor" Value="LightBlue" />
                            <Style.Triggers>
                                <DataTrigger
                                    Binding="{Binding IsCurrentUser}"
                                    TargetType="Border"
                                    Value="true">
                                    <Setter Property="HorizontalOptions" Value="Start" />
                                    <Setter Property="BackgroundColor" Value="Green" />
                                </DataTrigger>
                                <DataTrigger
                                    Binding="{Binding IsCurrentUser}"
                                    TargetType="Border"
                                    Value="false">
                                    <Setter Property="HorizontalOptions" Value="Start" />
                                    <Setter Property="BackgroundColor" Value="LightBlue" />
                                </DataTrigger>
                            </Style.Triggers>
                        </Style>
                    </Border.Style>
                    <VerticalStackLayout Spacing="5">
                        <Label Text="{Binding Sender}" />
                        <Label
                            FontAttributes="Bold"
                            LineBreakMode="WordWrap"
                            MaxLines="5"
                            Text="{Binding Content}" />
                        <Label
                            FontSize="Caption"
                            HorizontalTextAlignment="End"
                            Text="{Binding Timestamp}" />
                    </VerticalStackLayout>
                </Border>
            </DataTemplate>
        </CollectionView.ItemTemplate>
        <CollectionView.ItemsLayout>
            <LinearItemsLayout
                ItemSpacing="10"
                Orientation="Vertical" />
        </CollectionView.ItemsLayout>
    </CollectionView>
</ContentView>
          <DataTemplate x:DataType="model:FireMessage">
              <Border
                  x:Name="MessageBorder"
                  Margin="5"
                  Padding="10"
                  BackgroundColor="LightBlue"
                  MaximumWidthRequest="300"
                  StrokeThickness="0">
                  <Border.StrokeShape>
                      <RoundRectangle CornerRadius="15" />
                  </Border.StrokeShape>

                  <Border.Style>
                      <Style TargetType="Border">
                          <Setter Property="HorizontalOptions" Value="Start" />
                          <Setter Property="BackgroundColor" Value="LightBlue" />
                          <Style.Triggers>
                              <DataTrigger
                                  Binding="{Binding IsCurrentUser}"
                                  TargetType="Border"
                                  Value="true">
                                  <Setter Property="HorizontalOptions" Value="End" />
                                  <Setter Property="BackgroundColor" Value="Green" />
                              </DataTrigger>
                              <DataTrigger
                                  Binding="{Binding IsCurrentUser}"
                                  TargetType="Border"
                                  Value="false">
                                  <Setter Property="HorizontalOptions" Value="Start" />
                              </DataTrigger>
                          </Style.Triggers>
                      </Style>
                  </Border.Style>
              </Border>
          </DataTemplate>

Even thou I put the styles they do not do nothing

I want my bubbles (green ones) on the right -> start

The replied bubble (blue) on the left -> end

I use it here

 <!--  TOP SECTION (Search + Avatar + Status)  -->
 <Grid
     ColumnDefinitions="{OnIdiom Desktop='250,*',
                                 Phone='*'}"
     IsVisible="{OnIdiom Desktop=True,
                         Phone=True}"
     RowDefinitions="{OnIdiom Desktop='80,60,*,Auto',
                              Phone='*'}">

     <Grid
         Margin="10"
         BackgroundColor="{DynamicResource PageBackgroundColor}"
         ColumnDefinitions="*, Auto, Auto"
         ColumnSpacing="10"
         IsVisible="{OnIdiom Phone=False,
                             Desktop=True}">

         <!--  Title  -->
         <Label
             Padding="0"
             FontAttributes="Bold"
             FontSize="18"
             Text="Chats"
             TextColor="{AppThemeBinding Light=Black,
                                         Dark=White}"
             VerticalTextAlignment="Center" />

         <!--  Edit (Compose) Button  -->
         <control:IconButton
             Grid.Column="1"
             HeightRequest="18"
             IconGlyph="{Static icons:MaterialOutlineFontGlyphs.Edit_square}"
             IconSize="18"
             WidthRequest="18" />


         <!--  Filter Button  -->
         <control:IconButton
             Grid.Column="2"
             HeightRequest="18"
             IconGlyph="{Static icons:MaterialOutlineFontGlyphs.Filter_list}"
             IconSize="18"
             WidthRequest="18" />
     </Grid>

     <!--  Search Bar (Visible Only on Desktop)  -->
     <Border
         Grid.Row="1"
         Margin="10"
         BackgroundColor="Transparent"
         HeightRequest="30"
         IsVisible="{OnIdiom Phone=False,
                             Desktop=True}"
         Stroke="{AppThemeBinding Dark={DynamicResource White},
                                  Light={DynamicResource PrimaryDarkText}}"
         StrokeShape="RoundRectangle 8"
         StrokeThickness="1"
         VerticalOptions="Start">

         <HorizontalStackLayout
             Padding="10,0,0,0"
             IsVisible="{OnIdiom Desktop=True,
                                 Phone=False}">
             <!--  Search Icon  -->
             <Label
                 Margin="0,8,0,0"
                 FontAttributes="Bold"
                 FontFamily="MaterialSymbol"
                 FontSize="Micro"
                 Text="{Static icons:MateriallFontGlyphs.Search}"
                 TextColor="{AppThemeBinding Dark={DynamicResource White},
                                             Light={DynamicResource PrimaryDarkText}}"
                 VerticalTextAlignment="Start" />

             <!--  Search Entry  -->
             <Entry
                 BackgroundColor="Transparent"
                 Placeholder="Search in chat"
                 TextColor="{AppThemeBinding Dark={DynamicResource White},
                                             Light={DynamicResource PrimaryDarkText}}"
                 VerticalTextAlignment="Start" />
         </HorizontalStackLayout>
     </Border>

     <!--  Avatar + Username + Online Status  -->
     <Grid
         Grid.Column="1"
         ColumnDefinitions="Auto,Auto,*"
         IsVisible="{OnIdiom Phone=False,
                             Desktop=True}">
         <sfavatar:SfAvatarView
             Margin="10,8,10,10"
             AvatarCharacter="{Binding SelectedUser.AvatarCharacter}"
             AvatarSize="Large"
             CornerRadius="60"
             HeightRequest="40"
             StrokeThickness="1"
             VerticalOptions="Start"
             WidthRequest="40" />

         <!--  User Info  -->
         <VerticalStackLayout
             Grid.Column="1"
             Margin="10"
             VerticalOptions="Start">
             <Label Text="{Binding SelectedUser.Username}" />
             <Label Text="{Binding SelectedUser.OnlineStatus}" />
         </VerticalStackLayout>

         <!--  Button (Search Icon)  -->
         <control:IconButton
             Grid.Column="2"
             Margin="10,8,10,10"
             HeightRequest="40"
             HorizontalOptions="End"
             IconGlyph="{Static icons:MaterialOutlineFontGlyphs.Search}"
             IconSize="20"
             VerticalOptions="Start"
             WidthRequest="40" />

         <!--  BoxView at the End  -->
         <BoxView
             Grid.Row="1"
             Grid.ColumnSpan="3"
             Margin="0,0,0,15"
             BackgroundColor="{AppThemeBinding Dark={StaticResource PrimaryDarkText},
                                               Light={StaticResource Gray900}}"
             HeightRequest="2"
             HorizontalOptions="Fill"
             VerticalOptions="End" />


     </Grid>

     <!--  CHATS OPNED (DESKTOP)  -->
     <CollectionView
         Grid.Row="2"
         IsVisible="{OnIdiom Desktop=True,
                             Phone=False}"
         ItemTemplate="{StaticResource ProfileUserTemplate}"
         ItemsSource="{Binding Users}"
         SelectedItem="{Binding SelectedUser}"
         SelectionMode="Single"
         VerticalOptions="Start">
         <CollectionView.ItemsLayout>
             <LinearItemsLayout
                 ItemSpacing="5"
                 Orientation="Vertical" />
         </CollectionView.ItemsLayout>
     </CollectionView>

     <BoxView
         Grid.RowSpan="4"
         BackgroundColor="{AppThemeBinding Dark={StaticResource PrimaryDarkText},
                                           Light={StaticResource Gray900}}"
         HorizontalOptions="End"
         IsVisible="{OnIdiom Desktop=True,
                             Phone=False}"
         WidthRequest="2" />




Is this one

       <!--  CHAT AREA OPNED (DESKTOP)  -->
     <control:ChatView
         x:Name="MessagesCollectionView"
         Grid.Row="1"
         Grid.RowSpan="2"
         Grid.Column="1"
         Margin="10"
         IsVisible="{OnIdiom Desktop=True,
                             Phone=False}"
         Messages="{Binding Messages}">
         
     </control:ChatView>

and I now is defending the users, because the bubbles have different colors