none
【UWP 响应式设计】如何设计让应用在 Phone 和 PC 平台上显示不一样的布局?(图) RRS feed

  • 问题

  • 如下图,一个应用,我想让它在

    • Windows Phone 平台上是层级式导航的:主页面显示 item 列表,点击 item 后页面导航到其 详细item 页面。
    • PC 平台上由于屏幕大,我想让 详细item 页面和主页一起显示。

    我设想的方案是这样的(不知道对不对)

    Grid(定义2列)> Frame1Grid.Col=0> SplitViewContent:home page

                     > Frame2Grid.Col=1> GridContent:item page

    用代码判断或其他方式(依据屏幕大小)判断平台,如果是 Phone 平台(或小屏幕),Frame2 就设置为不显示(不为其保留位置),反之,Frame2 设置为显示。

    *补充看了下自带应用,其实我说的就是 “邮件” 应用的效果。



    • 已编辑 CodingNinja10 2015年10月14日 5:54 补充必要说明
    2015年10月14日 5:45

答案

  • 可以使用Visual State Triggers实现,参考以下文章:

    http://www.sharpgis.net/post/2015/03/24/Using-Custom-Visual-State-Triggers

    该文章提供了一个开源项目可以实现几种常用的状态转换Trigger,项目地址:

    https://github.com/dotMorten/WindowsStateTriggers

    使用起来很简单,你可以使用里面的

    DeviceTypeAdaptiveTrigger 

    这个,如下:

    <VisualStateGroup>
        <VisualState x:Name="windows">
            <VisualState.StateTriggers>
                <triggers:DeviceTypeAdaptiveTrigger DeviceType="Desktop" />
            </VisualState.StateTriggers>
            <VisualState.Setters>
                <Setter Target="greeting.Text" Value="Hello Windows!" />
            </VisualState.Setters>
        </VisualState>
        <VisualState x:Name="phone">
            <VisualState.StateTriggers>
                <triggers:DeviceTypeAdaptiveTrigger DeviceType="Mobile" />
            </VisualState.StateTriggers>
            <VisualState.Setters>
                <Setter Target="greeting.Text" Value="Hello Phone!" />
            </VisualState.Setters>
        </VisualState>
    </VisualStateGroup>
    
    根据不同设备来控制你的Frame2的显示与隐藏即可。

    2015年10月17日 14:30
  • Universal Windows Apps 設計所使用的像素是 "Effective Pixels" , 不是實際硬體的 "Physical Pixels". 下方是 Visual Studio 在設計 UWA 畫面時的圖片, 畫面左邊顯示的是Physical Pixels (1920X1080), 但是他的Effective Pixels 卻是 640X360


    在現實生活中,你和誰在一起的確很重要,甚至能改變你的成長軌跡,決定你的人生成敗。 和什麼樣的人在一起,就會有什麼樣的人生。 和勤奮的人在一起,你不會懶惰; 和積極的人在一起,你不會消沈; 與智者同行,你會不同凡響; 與高人為伍,你能登上巔峰。

    2015年10月19日 13:24

全部回复

  • 可以使用Visual State Triggers实现,参考以下文章:

    http://www.sharpgis.net/post/2015/03/24/Using-Custom-Visual-State-Triggers

    该文章提供了一个开源项目可以实现几种常用的状态转换Trigger,项目地址:

    https://github.com/dotMorten/WindowsStateTriggers

    使用起来很简单,你可以使用里面的

    DeviceTypeAdaptiveTrigger 

    这个,如下:

    <VisualStateGroup>
        <VisualState x:Name="windows">
            <VisualState.StateTriggers>
                <triggers:DeviceTypeAdaptiveTrigger DeviceType="Desktop" />
            </VisualState.StateTriggers>
            <VisualState.Setters>
                <Setter Target="greeting.Text" Value="Hello Windows!" />
            </VisualState.Setters>
        </VisualState>
        <VisualState x:Name="phone">
            <VisualState.StateTriggers>
                <triggers:DeviceTypeAdaptiveTrigger DeviceType="Mobile" />
            </VisualState.StateTriggers>
            <VisualState.Setters>
                <Setter Target="greeting.Text" Value="Hello Phone!" />
            </VisualState.Setters>
        </VisualState>
    </VisualStateGroup>
    
    根据不同设备来控制你的Frame2的显示与隐藏即可。

    2015年10月17日 14:30
  • 看了个官方示例,和这差不多:

    <VisualStateManager.VisualStateGroups>
                <VisualStateGroup>
                    <VisualState>
                        <VisualState.StateTriggers>
                            <AdaptiveTrigger MinWindowWidth="720" />
                        </VisualState.StateTriggers>
                        <VisualState.Setters>
                            <Setter Target="RootSplitView.DisplayMode"
                                    Value="Inline" />
                            <Setter Target="RootSplitView.IsPaneOpen"
                                    Value="True" />
                        </VisualState.Setters>
                    </VisualState>
                    <VisualState>
                        <VisualState.StateTriggers>
                            <AdaptiveTrigger MinWindowWidth="0" />
                        </VisualState.StateTriggers>
                        <VisualState.Setters>
                            <Setter Target="RootSplitView.DisplayMode"
                                    Value="Overlay" />
                        </VisualState.Setters>
                    </VisualState>
            </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>

    它是指定 MinWidowsWidth 来控制布局的,但这又引申出另一个疑惑:

    比如上面的代码,0~720 像素时 RootSplitView.DisplayMode = Overlay ,720~∞ 时 RootSplitView.DisplayMode = InLine。我的疑惑是,现在手机屏幕的分辨率比电脑都高,这样写能在手机上良好显示吗?还是说手机上显示是 4 个像素合为 1 个计算的(我想应该是吧,不然手机界面元素就会显示的多而小了)

    【VisualStateManager】如果 MinWindowWidth 是按像素来切换布局,那么现在手机像素比一般 PC 要高,这不是有问题吗!

    2015年10月17日 16:05
  • 应该不用担心,还有个DPI缩放的问题。DPI(dots per inch)和 PPI(pixels per inch)是两个不同的概念。
    2015年10月19日 2:05
  • Universal Windows Apps 設計所使用的像素是 "Effective Pixels" , 不是實際硬體的 "Physical Pixels". 下方是 Visual Studio 在設計 UWA 畫面時的圖片, 畫面左邊顯示的是Physical Pixels (1920X1080), 但是他的Effective Pixels 卻是 640X360


    在現實生活中,你和誰在一起的確很重要,甚至能改變你的成長軌跡,決定你的人生成敗。 和什麼樣的人在一起,就會有什麼樣的人生。 和勤奮的人在一起,你不會懶惰; 和積極的人在一起,你不會消沈; 與智者同行,你會不同凡響; 與高人為伍,你能登上巔峰。

    2015年10月19日 13:24