如何根据屏幕分辨率为WPF视图模型绑定不同视图？

当然可以实现，下面是几种实用的落地方法：

方法一：自定义DataTemplateSelector #

这是WPF中动态选择视图模板的标准方案，能直接根据屏幕分辨率返回对应视图：

1. 写一个继承自DataTemplateSelector的类，重写SelectTemplate方法做分辨率判断：

public class ResolutionTemplateSelector : DataTemplateSelector
{
    public DataTemplate DefaultTemplate { get; set; }
    public DataTemplate LargeScreenTemplate { get; set; }
    public DataTemplate SmallScreenTemplate { get; set; }

    public override DataTemplate SelectTemplate(object item, DependencyObject container)
    {
        if (item is IdleViewModel)
        {
            var screenWidth = SystemParameters.PrimaryScreenWidth;
            if (screenWidth >= 1920)
                return LargeScreenTemplate;
            else if (screenWidth <= 1366)
                return SmallScreenTemplate;
            else
                return DefaultTemplate;
        }
        return base.SelectTemplate(item, container);
    }
}

2. 在XAML里声明这个选择器，绑定对应分辨率的视图模板：

<Window.Resources>
    <DataTemplate x:Key="IdleViewDefault" DataType="{x:Type vm:IdleViewModel}">
        <v:IdleView/>
    </DataTemplate>
    <DataTemplate x:Key="IdleViewLarge" DataType="{x:Type vm:IdleViewModel}">
        <v:IdleViewLarge/>
    </DataTemplate>
    <DataTemplate x:Key="IdleViewSmall" DataType="{x:Type vm:IdleViewModel}">
        <v:IdleViewSmall/>
    </DataTemplate>

    <local:ResolutionTemplateSelector x:Key="ResolutionSelector"
        DefaultTemplate="{StaticResource IdleViewDefault}"
        LargeScreenTemplate="{StaticResource IdleViewLarge}"
        SmallScreenTemplate="{StaticResource IdleViewSmall}"/>
</Window.Resources>

3. 在ContentControl上使用这个选择器：

<ContentControl Content="{Binding}" ContentTemplateSelector="{StaticResource ResolutionSelector}"/>

方法二：纯XAML触发器切换 #

不想写后台代码的话，直接用XAML触发器结合系统分辨率属性切换模板：

<ContentControl Content="{Binding}">
    <ContentControl.Style>
        <Style TargetType="ContentControl">
            <Setter Property="ContentTemplate" Value="{StaticResource IdleViewDefault}"/>
            <Style.Triggers>
                <!-- 匹配固定分辨率 -->
                <DataTrigger Binding="{Binding Source={x:Static SystemParameters.PrimaryScreenWidth}}" Value="1920">
                    <Setter Property="ContentTemplate" Value="{StaticResource IdleViewLarge}"/>
                </DataTrigger>
                <!-- 用多触发器判断分辨率范围 -->
                <MultiDataTrigger>
                    <MultiDataTrigger.Conditions>
                        <Condition Binding="{Binding Source={x:Static SystemParameters.PrimaryScreenWidth}}"
                                   ConverterParameter="LessThan 1366"
                                   Value="True"/>
                    </MultiDataTrigger.Conditions>
                    <Setter Property="ContentTemplate" Value="{StaticResource IdleViewSmall}"/>
                </MultiDataTrigger>
            </Style.Triggers>
        </Style>
    </ContentControl.Style>
</ContentControl>

方法三：动态加载资源字典 #

如果不同分辨率的视图差异极大，可以把对应模板拆进单独的资源字典，启动时根据分辨率加载：

1. 分别创建IdleView_Large.xaml、IdleView_Small.xaml资源字典，各自定义对应分辨率的DataTemplate。

2. 在窗口加载时判断分辨率并加载字典：

private void Window_Loaded(object sender, RoutedEventArgs e)
{
    var screenWidth = SystemParameters.PrimaryScreenWidth;
    var dictUri = screenWidth >= 1920 
        ? new Uri("/YourAssembly;component/Resources/IdleView_Large.xaml", UriKind.Relative)
        : screenWidth <= 1366
            ? new Uri("/YourAssembly;component/Resources/IdleView_Small.xaml", UriKind.Relative)
            : new Uri("/YourAssembly;component/Resources/IdleView_Default.xaml", UriKind.Relative);
    
    Resources.MergedDictionaries.Add(new ResourceDictionary { Source = dictUri });
}

额外提示：如果要支持实时响应分辨率变化（用户手动调整显示器设置），可以订阅SystemEvents.DisplaySettingsChanged事件，触发时重新执行模板选择或资源加载逻辑。

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