列表视图 MAUI 中单元视图的组织

Question

我正在开发 Windows 桌面应用程序 MAUI。 我的问题是：我在单元视图中有一个标签和一个图像按钮，标签的内容将图像按钮推到列表视图之外。 我是毛伊岛的新人，所以也许我没有很好的实践。我尝试了很多东西，所以我的代码反映了这个搜索^^ 这是我的 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>

这是结果： [![在此处输入图像描述][1]][1]

谢谢我的提前祝大家新年快乐^^

Answer 1

根据您的xaml，ListView中只有两列项目，因此您可以像下面这样定义

ColumnDefinitions

：

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

此外，您还可以通过设置 HorizontalOptions="End" 来调整

ImageButton

的水平位置。下面是xaml供您参考：

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>

输出：