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
  |     |

完成屏幕比率检测。我尝试使用可视状态管理器和datatemplate切换视图，但我无法达到正确的标准＆＃39;这个谷歌搜索的解决方案。

任何指南？

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基于屏幕分辨率的多视图

1 个答案: