WinUI 3中如何根据ComboBox选择加载对应UserControl

你的核心问题在于WinUI 3对接口类型的ContentTemplate匹配逻辑和WPF不同，加上x:Bind默认模式的限制，导致ContentControl无法自动关联到对应的DataTemplate。以下是两种可行的解决方式：

方法一：使用DataTemplateSelector（灵活适配多类型场景） #

1. 创建模板选择器类
   这个类会根据ViewModel的具体类型，返回对应的DataTemplate：

   using Microsoft.UI.Xaml;
   using Microsoft.UI.Xaml.Controls;
   using Sports.ViewModels.Fields;
   
   namespace Sports.Selectors
   {
       public class SportsFieldTemplateSelector : DataTemplateSelector
       {
           public DataTemplate SoccerTemplate { get; set; }
           public DataTemplate BaseballTemplate { get; set; }
   
           protected override DataTemplate SelectTemplateCore(object item, DependencyObject container)
           {
               return item switch
               {
                   soccerFieldViewModel => SoccerTemplate,
                   baseballFieldViewModel => BaseballTemplate,
                   _ => base.SelectTemplateCore(item, container)
               };
           }
       }
   }
   

2. 修改XAML资源配置
   在Page的资源中添加选择器实例，并关联之前定义的DataTemplate：

   <Page x:Class="Sports.Views"
         xmlns:fieldViews="using:Sports.Views.Fields"
         xmlns:fieldViewModels="using:Sports.ViewModels.Fields"
         xmlns:selectors="using:Sports.Selectors">
   
       <Page.Resources>
           <DataTemplate x:Key="soccer" x:DataType="fieldViewModels:soccerFieldViewModel">
               <fieldViews:soccerFieldView/>
           </DataTemplate>
           <DataTemplate x:Key="baseball" x:DataType="fieldViewModels:baseballFieldViewModel">
               <fieldViews:baseballFieldView/>
           </DataTemplate>
   
           <selectors:SportsFieldTemplateSelector x:Key="SportsSelector"
                                                  SoccerTemplate="{StaticResource soccer}"
                                                  BaseballTemplate="{StaticResource baseball}"/>
       </Page.Resources>
   

3. 更新ContentControl配置
   给ContentControl指定模板选择器，并确保绑定模式为OneWay：

   <ContentControl Content="{x:Bind ViewModel.SelectedSport, Mode=OneWay}"
                   ContentTemplateSelector="{StaticResource SportsSelector}"/>
   

方法二：移除DataTemplate的Key（简单场景快速适配） #

如果不需要复杂的模板选择逻辑，可以直接移除DataTemplate的x:Key属性，让WinUI 3根据Content的具体类型自动匹配模板：

<Page.Resources>
    <DataTemplate x:DataType="fieldViewModels:soccerFieldViewModel">
        <fieldViews:soccerFieldView/>
    </DataTemplate>
    <DataTemplate x:DataType="fieldViewModels:baseballFieldViewModel">
        <fieldViews:baseballFieldView/>
    </DataTemplate>
</Page.Resources>

同时更新绑定的模式：

<ComboBox ItemsSource="{x:Bind ViewModel.Sports, Mode=OneWay}"
          SelectedItem="{x:Bind ViewModel.SelectedSport, Mode=TwoWay}"/>
<ContentControl Content="{x:Bind ViewModel.SelectedSport, Mode=OneWay}"/>

关键注意事项 #

• 属性变更通知：确保ViewModel.SelectedSport属性实现了INotifyPropertyChanged接口，这样选中项变化时UI才能及时更新。
• x:Bind模式：x:Bind默认是OneTime模式，必须显式设置Mode=TwoWay（ComboBox的SelectedItem）和Mode=OneWay（ContentControl的Content），否则绑定不会同步更新。

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