WinUI3中基于同一对象切换视图的最优实现方案咨询

核心实现思路 #

采用ContentControl + 视图缓存切换的方案，通过绑定视图模型的CurrentView属性切换不同布局。这种方式能最大化复用已有对象，避免不必要的资源重建，提升性能。

关键问题解答 #

1. 是否需要重新创建图片对象和视图实例？
   不需要。可以提前初始化两个视图实例并缓存，图片对象绑定到共享的数据源集合，切换时仅改变ContentControl的内容引用，不会重建图片和视图。

2. 是否应将DataTemplate放入ResourceDictionary？
   是的。将共用的DataTemplate放到全局或共享的ResourceDictionary中，让两个视图直接引用，减少代码冗余，保证样式统一。

完整代码示例 #

1. 共享DataTemplate（可放入App.xaml或单独的ResourceDictionary文件） #

<Application.Resources>
    <ResourceDictionary>
        <DataTemplate x:Key="ImageItemTemplate">
            <Image Source="{Binding}" Width="150" Height="150" Stretch="Uniform"/>
        </DataTemplate>
    </ResourceDictionary>
</Application.Resources>

2. 视图1：View1.xaml（2×2 UniformGrid布局） #

<UserControl x:Class="ImageSwitchDemo.View1">
    <UniformGrid Rows="2" Columns="2">
        <ItemsControl ItemsSource="{Binding Images}" 
                      ItemTemplate="{StaticResource ImageItemTemplate}"/>
    </UniformGrid>
</UserControl>

3. 视图2：View2.xaml（1×4 ListView布局） #

<UserControl x:Class="ImageSwitchDemo.View2">
    <ListView ItemsSource="{Binding Images}"
              ItemTemplate="{StaticResource ImageItemTemplate}"
              ScrollViewer.HorizontalScrollBarVisibility="Auto">
        <ListView.ItemsPanel>
            <ItemsPanelTemplate>
                <StackPanel Orientation="Horizontal"/>
            </ItemsPanelTemplate>
        </ListView.ItemsPanel>
    </ListView>
</UserControl>

4. 视图模型（MainViewModel.cs） #

using System.Collections.ObjectModel;
using System.Windows.Input;
using GalaSoft.MvvmLight;
using GalaSoft.MvvmLight.Command;

namespace ImageSwitchDemo
{
    public class MainViewModel : ViewModelBase
    {
        // 共享的图片数据源
        public ObservableCollection<string> Images { get; }

        // 当前显示的视图
        private object _currentView;
        public object CurrentView
        {
            get => _currentView;
            set => Set(ref _currentView, value);
        }

        // 缓存的两个视图实例
        private readonly View1 _view1;
        private readonly View2 _view2;

        // 视图切换命令
        public ICommand SwitchViewCommand { get; }

        public MainViewModel()
        {
            // 初始化图片集合（替换为你的实际图片路径）
            Images = new ObservableCollection<string>
            {
                "pack://application:,,,/Images/img1.jpg",
                "pack://application:,,,/Images/img2.jpg",
                "pack://application:,,,/Images/img3.jpg",
                "pack://application:,,,/Images/img4.jpg"
            };

            // 提前创建视图实例并绑定当前VM
            _view1 = new View1 { DataContext = this };
            _view2 = new View2 { DataContext = this };

            // 默认显示View1
            CurrentView = _view1;

            // 切换命令逻辑
            SwitchViewCommand = new RelayCommand(() =>
            {
                CurrentView = CurrentView == _view1 ? _view2 : _view1;
            });
        }
    }
}

5. 主窗口（MainWindow.xaml） #

<Window x:Class="ImageSwitchDemo.MainWindow"
        Title="图片视图切换" Height="450" Width="600">
    <Window.DataContext>
        <local:MainViewModel/>
    </Window.DataContext>
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <!-- 切换按钮 -->
        <Button Content="切换视图" 
                Command="{Binding SwitchViewCommand}"
                Margin="10" Padding="8 4"/>

        <!-- 视图容器 -->
        <ContentControl Grid.Row="1" 
                        Content="{Binding CurrentView}"
                        Margin="10"/>
    </Grid>
</Window>

补充说明 #

• 视图实例在ViewModel初始化阶段创建完成，切换时仅修改CurrentView的引用，无额外对象创建开销。
• 两个视图共用同一Images数据源，图片仅加载一次，避免重复IO操作。
• 全局资源中的DataTemplate保证了两个视图的图片展示样式完全一致，后续修改样式只需维护一处。

内容的提问来源于stack exchange，提问作者Hoka Biu