【问题标题】:VisualState AdaptiveTrigger MinWindowWidth=2160 doesn't workVisualState AdaptiveTrigger MinWindowWidth=2160 不起作用
【发布时间】:2016-07-21 12:28:16
【问题描述】:

MinWindowWidth=2160 的 AdaptiveTrigger 似乎不起作用。我需要它来处理 Microsoft Surface Pro 3 屏幕分辨率 (2160x1440)。

看看下面这个简单的代码:

<Page
    x:Class="TestUWP.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:TestUWP"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d" d:DesignWidth="2160" d:DesignHeight="1440">

    <Grid>
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup>
                <VisualState>
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowWidth="2160" />
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <Setter Target="brdMain.Background" Value="#bbbbbb"></Setter>
                    </VisualState.Setters>
                </VisualState>
                <VisualState>
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowWidth="0" />
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <Setter Target="brdMain.Background" Value="#303030"></Setter>
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
        <Border x:Name="brdMain">
            <TextBlock Text="Testing"></TextBlock>
        </Border>
    </Grid>
</Page>

您会看到,背景颜色始终为黑色 (#303030)。是否有 VisualState 可以处理的最大宽度?有什么想法吗?

谢谢

【问题讨论】:

    标签: xaml uwp windows-10-universal uwp-xaml


    【解决方案1】:

    您必须记住,UWP 中的测量是以有效像素 (epx) 为单位进行的。见MSDN。与其他 Surface 平板电脑一样,Surface Pro 3 具有 HiDPI 显示和大于 1 的默认比例因子,这意味着其有效像素分辨率小于 2160x1440,即使这是其原始分辨率。

    SP3 的默认比例因子为 150%,因此 epx 分辨率为 1440x960。因此,即使您最大化您的窗口,窗口宽度最多也只有 1440 epx,这意味着 MinWindowWidth="2160" 状态触发器永远不会在默认设置的 SP3 上触发。

    如果您希望状态触发器仅在具有 HiDPI 显示器和/或特定原生分辨率的平板电脑上触发,您可能需要实现一个自定义状态触发器来检测所有这些条件。你如何做到这一点超出了这个问题的范围。

    【讨论】:

    • 哇,你完全正确!您是如何得知比例因子的?
    • @Sam:我希望我可以说我拥有一台 Surface Pro 3,但不,我只是在商店里看了一个。说真的,由于许多移动设备和平板电脑显示器都是 HiDPI,因此显示缩放正在成为一种常态。这就是 UWP 如此重视有效像素的原因。
    【解决方案2】:

    我认为您的尺码可能不对。你试过其他的吗?

    根据Official MSDN Screen Sizes and Layouts Documentation,这些是您要使用的尺寸

    您可能不想要确切的屏幕尺寸的原因是因为是什么阻止了某人将其调整小或小?

    就个人而言,对于更复杂的布局,我更喜欢为每种尺寸创建单独的视图。它让我可以更好地控制布局。以下是我的使用方法。

    在我拥有的静态应用程序级类中。

        public enum DeviceType
        {
            Desktop = 0,
            Phablet = 1,
            Mobile = 2
        }      
    
        public static DeviceType CurrentDevice
        {
            get
            {
                ApplicationView view = ApplicationView.GetForCurrentView();
                Rect rect = view.VisibleBounds;
    
                if (rect.Width >= 1024)
                {
                    return DeviceType.Desktop;
                }
                else if (rect.Width >= 720)
                {
                    return DeviceType.Phablet;
                }
                else
                {
                    return DeviceType.Mobile;
                }
            }
        }
    

    然后在我的控制下,我只需在我的静态构造函数中访问我的静态类。如果我是移动设备,我会加载移动 DefaultStyleKey。如果我是桌面,那么我会加载一个 DesktopDefaultStyleKey。

        DeviceType device = ApplicationServices.CurrentDevice;
    
        switch (device)
        {
           case (DeviceType.Desktop):
                YoutubeVideosPresenter.Content = new YouTubeVideosLayoutDesktop();
                break;
           case (DeviceType.Mobile):
                YoutubeVideosPresenter.Content = new YouTubeVideosLayoutMobile();
                break;
         }         
    

    当然,如果有人操纵窗口宽度,这不是很“自适应”。不过,您可以通过检查窗口宽度是否已更改来轻松克服这一点,然后您的样式可以轻松切换。

    【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2019-09-18
    • 2017-11-28
    • 1970-01-01
    • 2015-12-30
    • 1970-01-01
    • 2020-07-22
    • 1970-01-01
    相关资源
    最近更新 更多