基于屏幕分辨率的wpf多视图

Question

为了优化图像在屏幕上的显示方式，我需要设计两个视图，检测屏幕比例（4:3 或 16:9 及以上）并在它们之间切换。

在 4:3 屏幕上，内容应像这样垂直显示（按行）：

toolbars 25%
----------------
image  
----------------
toolbars 25%
----------------

在 16:9 水平（按列）监视器上，如下所示：

t |  i  | t
o |  m  | o
o |  a  | o
l |  g  | l
b |  e  | b
a |     | a
r |     | r
s |     | s
  |     |

屏占比检测完成。我尝试使用可视化状态管理器和数据模板来切换视图，但我无法最终找到此谷歌搜索的正确 'standard' 解决方案。

有什么指导方针吗？

Answer 1

我想这应该也能完成工作。不过还有一些代码留给你

用法：

<Window x:Class="ResponsiveWpfLayout.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:responsiveWpfLayout="clr-namespace:ResponsiveWpfLayout"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <responsiveWpfLayout:ResponsiveLayout>
            <responsiveWpfLayout:ResponsiveLayout.DefaultTemplate>
                <ControlTemplate>
                    <Border Background="Red">
                        <TextBlock>Layout A</TextBlock>
                    </Border>
                </ControlTemplate>
            </responsiveWpfLayout:ResponsiveLayout.DefaultTemplate>
            <responsiveWpfLayout:ResponsiveLayout.AlternativeTemplate>
                <ControlTemplate>
                    <Border Background="Green">
                        <TextBlock>Layout B</TextBlock>
                    </Border>
                </ControlTemplate>
            </responsiveWpfLayout:ResponsiveLayout.AlternativeTemplate>
        </responsiveWpfLayout:ResponsiveLayout>

    </Grid>
</Window>

ResponsiveLayout.cs

public class ResponsiveLayout : Control
    {
        static ResponsiveLayout()
        {
            DefaultStyleKeyProperty.OverrideMetadata(typeof(ResponsiveLayout), new FrameworkPropertyMetadata(typeof(ResponsiveLayout)));
        }

        public static readonly DependencyProperty DefaultTemplateProperty = DependencyProperty.Register(
            "DefaultTemplate", typeof (ControlTemplate), typeof (ResponsiveLayout), new PropertyMetadata(default(ControlTemplate)));

        public ControlTemplate DefaultTemplate
        {
            get { return (ControlTemplate) GetValue(DefaultTemplateProperty); }
            set { SetValue(DefaultTemplateProperty, value); }
        }

        public static readonly DependencyProperty AlternativeTemplateProperty = DependencyProperty.Register(
            "AlternativeTemplate", typeof (ControlTemplate), typeof (ResponsiveLayout), new PropertyMetadata(default(ControlTemplate)));

        public ControlTemplate AlternativeTemplate
        {
            get { return (ControlTemplate) GetValue(AlternativeTemplateProperty); }
            set { SetValue(AlternativeTemplateProperty, value); }
        }

        public static readonly DependencyProperty ActiveTemplateProperty = DependencyProperty.Register(
            "ActiveTemplate", typeof (ControlTemplate), typeof (ResponsiveLayout), new PropertyMetadata(default(ControlTemplate)));

        public ControlTemplate ActiveTemplate
        {
            get { return (ControlTemplate) GetValue(ActiveTemplateProperty); }
            set { SetValue(ActiveTemplateProperty, value); }
        }

        protected override Size ArrangeOverride(Size arrangeBounds)
        {
            if (arrangeBounds.Width > arrangeBounds.Height)
            {
                ActiveTemplate = DefaultTemplate;
            }
            else
            {
                ActiveTemplate = AlternativeTemplate;
            }

            return base.ArrangeOverride(arrangeBounds);
        }

        public ResponsiveLayout()
        {
            ActiveTemplate = DefaultTemplate;
        }
    }

Generic.xaml

<ResourceDictionary
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="clr-namespace:ResponsiveWpfLayout">


    <Style TargetType="{x:Type local:ResponsiveLayout}">
        <Setter Property="DefaultTemplate">
            <Setter.Value>
                <ControlTemplate>
                    <Border Background="Orange">
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
        <Setter Property="AlternativeTemplate">
            <Setter.Value>
                <ControlTemplate>
                    <Border Background="Blue">
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type local:ResponsiveLayout}">
                    <Border Background="{TemplateBinding Background}"
                            BorderBrush="{TemplateBinding BorderBrush}"
                            BorderThickness="{TemplateBinding BorderThickness}">
                        <ContentControl Template="{TemplateBinding ActiveTemplate}"></ContentControl>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</ResourceDictionary>

基于屏幕分辨率的wpf多视图

wpf multiple view based on screen resolution

wpf

visualstatemanager

screen-orientation