Organisation of cellview in listview MAUI

Question

I 'm working on a windows desktop app MAUI. My problem is: I have a label and an imagebutton in an cellview and the content of the label push the image button outside the listView. I'm new in MAUI so perhaps I didn't have the good practice. I try many stuff so my code reflect this search ^^ here my xaml:

  <VerticalStackLayout>
          <Label Text="Sous Thèmes" FontSize="Header" />
          <Frame BorderColor="Black" HasShadow="True" Margin="10">
              <ListView HasUnevenRows="True"                         
                  ItemsSource="{Binding SousThemesModel}"          
                  VerticalScrollBarVisibility="Always"
                  VerticalOptions="CenterAndExpand"
                  HorizontalOptions="CenterAndExpand"
                  SelectedItem="{Binding SelectedSousTheme}"
                  WidthRequest="350"
                  HeightRequest="700">

                  <ListView.ItemTemplate>
                      <DataTemplate x:DataType="model:SousTheme">
                          <ViewCell>
                             
                                  <Grid VerticalOptions="FillAndExpand">
                                      <Grid.ColumnDefinitions>
                                          <ColumnDefinition Width="Auto" />
                                          <ColumnDefinition Width="*" />
                                          <ColumnDefinition Width="Auto" />
                                      </Grid.ColumnDefinitions>
                                      <StackLayout Grid.Column="0" Orientation="Horizontal" HorizontalOptions="Start">
                                          <Label Text="{Binding Intitule}" HorizontalOptions="Center" VerticalOptions="Center" MaxLines="1" LineBreakMode="TailTruncation" />
                                        
                                      </StackLayout>
                                  <StackLayout Grid.Column="2">
                                      <ImageButton  Source="update.png"
                                      WidthRequest="20"
                                      HeightRequest="20"
                                      VerticalOptions="Center"
                                      HorizontalOptions="EndAndExpand"
                                      Command="{Binding BindingContext.UpdateSousTheme, Source={x:Reference Name=AdminViewModel}}"
                                      CommandParameter="{Binding .}"/>
                                  </StackLayout>
                              </Grid>
                              
                          </ViewCell>
                      </DataTemplate>
                  </ListView.ItemTemplate>
              </ListView>
          </Frame>
          <Button Text="+"
              Command="{Binding AddSousThemeCommand}"
              BackgroundColor="#AE1439"
              WidthRequest="20"
              HeightRequest="20"
              HorizontalOptions="Start">

      </Button>
  </VerticalStackLayout>

and here is the result : [![enter image description here][1]][1]

Thank my advance and happy new year to all ^^

Answer 1

According to your xaml, there're only two columns of items in ListView, so you may define the ColumnDefinitions like below:

<Grid.ColumnDefinitions>
          <ColumnDefinition Width="AUTO" />
          <ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>

Also, you can adjust the horizontal position of the ImageButton by setting HorizontalOptions="End". Here's the xaml below for your reference:

XAML:

<VerticalStackLayout> 
       <Label Text="Sous Thèmes" FontSize="Header" />
       <Frame BorderColor="Black" HasShadow="True" Margin="10" >
           
           <ListView HasUnevenRows="True"    
                     
                 ItemsSource="{Binding SousThemesModel}"          
                 VerticalScrollBarVisibility="Always"
                 VerticalOptions="CenterAndExpand"
                 HorizontalOptions="CenterAndExpand"
                 SelectedItem="{Binding SelectedSousTheme}"
                 WidthRequest="350"
                 HeightRequest="700">

               <ListView.ItemTemplate>
                   <DataTemplate x:DataType="model:SousTheme" >
                       <ViewCell>

                           <Grid VerticalOptions="FillAndExpand" BackgroundColor="PaleVioletRed">
                               <Grid.ColumnDefinitions>
                                   <ColumnDefinition Width="AUTO" />
                                   <ColumnDefinition Width="*" />
                               </Grid.ColumnDefinitions>
                               <HorizontalStackLayout Grid.Column="0" 
                                           
                                            HorizontalOptions="Start">

                                   <Label Text="{Binding Intitule}" 
                                          HorizontalOptions="Center"
                                          VerticalOptions="Center"                                         
                                          MaxLines="1" 
                                          LineBreakMode="TailTruncation" />
                               </HorizontalStackLayout>
                               
                               <HorizontalStackLayout Grid.Column="1" 
                                                      HorizontalOptions="End">
                                   <ImageButton  Source="dotnet_bot.png"
                                     WidthRequest="20"
                                     HeightRequest="20"
                                     VerticalOptions="Center"
                                     HorizontalOptions="EndAndExpand"
                                  />
                               </HorizontalStackLayout>
                           </Grid>

                       </ViewCell>
                   </DataTemplate>
               </ListView.ItemTemplate>
           </ListView>
       </Frame>
       <Button Text="+"
             Command="{Binding AddSousThemeCommand}"
             BackgroundColor="#AE1439"
             WidthRequest="20"
             HeightRequest="20"
             HorizontalOptions="Start">

       </Button>
</VerticalStackLayout>

Output: