c# - 在 XAML/Xamarin 中交换 ListView 网格(两个网格版本，单个代码隐藏)

Question

我正在尝试实现一个在某些项目的 ListView 和平铺 View 之间切换的按钮。两者背后的代码是相同的，唯一的区别是显示内容的大小和属性。目前我已经实现了 ListView ，XAML 如下所示:

  <StackLayout>
    <ListView x:Name="FilesListView"
              ItemsSource="{Binding Files}"
              ItemSelected="FileItemSelected">
      <ListView.ItemTemplate>
        <DataTemplate>
          <ViewCell>
            <ViewCell.View>
              <Grid>
                <Grid.ColumnDefinitions>
                  <ColumnDefinition Width="Auto"/>
                  <ColumnDefinition Width="*"/>
                  <ColumnDefinition Width="Auto"/>
                  <ColumnDefinition Width="Auto"/>
                </Grid.ColumnDefinitions>
                <Image Grid.Column="0" Source="{Binding IsFolder, Converter={StaticResource fileTypeToImageConverter}}" WidthRequest="40" HeightRequest="40" HorizontalOptions="Start"/>
                <Label Grid.Column="1" Text="{Binding Path, Converter={StaticResource pathToFilenameConverter}}" HorizontalOptions="StartAndExpand"/>
                <Label Grid.Column="2" Text="{Binding ModifiedDate, Converter={StaticResource dateConverter}}" HorizontalOptions="EndAndExpand"/>
                <Label Grid.Column="3" Text="{Binding Size, Converter={StaticResource fileSizeConverter}}" HorizontalOptions="EndAndExpand"/>
              </Grid>
            </ViewCell.View>
          </ViewCell>
        </DataTemplate>
      </ListView.ItemTemplate>
    </ListView>
  </StackLayout>

这是局部 View ； FileBrowser 控件嵌套在另一个包含切换按钮的堆栈布局中。该按钮在 XAML 中定义如下:

  <ContentPage.ToolbarItems>
    <ToolbarItem Text="Toggle View" Order="Primary" Icon="{Binding ViewIcon}" Command="{Binding ToggleViewCommand}"/>
  </ContentPage.ToolbarItems>

ToggleViewCommand 在哪里:

    protected void ToggleView()
    {
        FileBrowserControl.ToggleView();
        ViewModel.ToggleViewIcon();
    }

我需要帮助来弄清楚如何实现 FileBrowserControl.ToggleView();。我需要用不同的 XAML 片段(代表平铺 View )动态换出网格 XAML，或者更新代码中的网格。第一个选项在定义平铺 View 的外观方面似乎更容易，但我不想通过创建 FileBrowserXaml.xaml/FileBrowserXaml.xaml.cs 来复制逻辑背后的代码，它与 FileBrowser 具有相同的逻辑背后代码.xaml.cs。对于我正在尝试做的事情，Xamarin 最佳实践是什么？

(附带说明，这需要跨平台。)

---

更新:我决定尝试用代码构建数据模板。到目前为止我有这个:

    public void ToggleView()
    {
        DataTemplate itemTemplate;
        if (_view == FileBrowserView.List)
        {
            itemTemplate = new DataTemplate(() =>
            {
                var cell = new ViewCell();
                var grid = new Grid();

                // Define columns
                grid.ColumnDefinitions.Add(new ColumnDefinition { Width = GridLength.Auto });
                grid.ColumnDefinitions.Add(new ColumnDefinition { Width = new GridLength(1, GridUnitType.Star) });
                grid.ColumnDefinitions.Add(new ColumnDefinition { Width = GridLength.Auto });
                grid.ColumnDefinitions.Add(new ColumnDefinition { Width = GridLength.Auto });

                // Define rows
                var image = new Image
                {
                    WidthRequest = 40,
                    HeightRequest = 40,
                    HorizontalOptions = LayoutOptions.Start
                };
                image.SetBinding(Image.SourceProperty,
                                 new Binding("IsFolder", BindingMode.Default, new FileTypeToImageValueConverter()));
                grid.Children.Add(image, 0, 0);

                var pathLabel = new Label {HorizontalOptions = LayoutOptions.StartAndExpand};
                pathLabel.SetBinding(Label.TextProperty,
                                     new Binding("Path", BindingMode.Default, new PathToFilenameValueConverter()));
                grid.Children.Add(pathLabel, 1, 0);

                var dateLabel = new Label { HorizontalOptions = LayoutOptions.StartAndExpand };
                dateLabel.SetBinding(Label.TextProperty,
                                     new Binding("ModifiedDate", BindingMode.Default, new DateTimeDisplayValueConverter()));
                grid.Children.Add(dateLabel, 2, 0);

                var sizeLabel = new Label { HorizontalOptions = LayoutOptions.EndAndExpand };
                dateLabel.SetBinding(Label.TextProperty,
                                     new Binding("Size", BindingMode.Default, new FileSizeDisplayValueConverter()));
                grid.Children.Add(sizeLabel, 3, 0);

                cell.View = grid;
                return cell;
            });
        }
        else
        {
            itemTemplate = new DataTemplate(() =>
            {
                var cell = new ViewCell();
                var grid = new Grid();

                // Define columns
                grid.ColumnDefinitions.Add(new ColumnDefinition {Width = new GridLength(1, GridUnitType.Star)});
                grid.ColumnDefinitions.Add(new ColumnDefinition {Width = new GridLength(1, GridUnitType.Star)});

                // Define rows
                var image = new Image
                {
                    WidthRequest = 80,
                    HeightRequest = 80,
                    HorizontalOptions = LayoutOptions.Start
                };
                image.SetBinding(Image.SourceProperty,
                                 new Binding("IsFolder", BindingMode.Default, new FileTypeToImageValueConverter()));
                grid.Children.Add(image, 0, 0);

                var pathLabel = new Label { HorizontalOptions = LayoutOptions.Start };
                pathLabel.SetBinding(Label.TextProperty,
                                     new Binding("Path", BindingMode.Default, new PathToFilenameValueConverter()));
                grid.Children.Add(pathLabel, 0, 1);

                cell.View = grid;
                return cell;
            });
        }
        FilesListView.ItemTemplate = itemTemplate;
    }

我现在遇到的问题是，在平铺 View 中，每个项目都在其自己的行中。我希望它们环绕(路径应该在图像下方，但每个路径/图像组合应该与下一个并排，就像在 Windows 资源管理器或典型的应用程序启动器中一样)。构建数据模板以实现此目的的最佳方法是什么？网格是可以使用的正确模板还是有更好的模板？

Answer 1

您尝试过使用 ResourceDictionary 和 StaticResource 吗？

我认为您可以通过将 ListView ItemTemplate 设置为 StaticResource 然后使用切换按钮切换用于 View 的按钮来完成您想要的。

下面是我的想法:

<ContentPage>
    <ContentPage.Resources>
       <ResourceDictionary>

          <DataTemplate x:Key="TileViewTemplate">
             <ViewCell>
                <ViewCell.View>
                   <!-- the layout of your template here -->
                </ViewCell.View>
             </ViewCell>
          </DataTemplate>

          <DataTemplate x:Key="ListViewTemplate">
             <ViewCell>
                <ViewCell.View>
                   <!-- the layout of your template here -->
                </ViewCell.View>
             </ViewCell>
          </DataTemplate>

       </ResourceDictionary>
    </ContentPage.Resources>

 <ListView x:Name="FilesListView" ItemsSource="{Binding Files}" 
           ItemsSelected="FileItemSelected"
           ItemTemplate="{StaticResource TileViewTemplate}"/>

</ContentPage>

然后，toggleview 命令可以切换 ItemTemplate 属性。这样您就不必担心两个 ListViews - 它可以使 XAML 更易于管理。

只是一个想法，但 ResourceDictionary 确实对我很有帮助。