Windows统一平台: 开发小技巧

Windows统一平台: 开发小技巧  

技巧一: 在手机端拓展你应用的显示区域。(WP8.1中也适用) 对于Windows Phone系统的手机, 手机屏幕最上方为系统状态栏(System Tray),在手机屏幕下方为应用指令栏(BottomAppbar), 我们写的应用的显示区域位于在这两者之间。 若要使应用的显示区域拓宽, 使用到了Windows.UI.ViewManagement这个类库, 借助于其中的方法, 可以实现应用的全屏显示,即充满整个手机屏幕。

示例代码:

var appView = Windows.UI.ViewManagement.ApplicationView.GetForCurrentView();
appView.SetDesiredBoundsMode(ApplicationViewBoundsMode.UseCoreWindow);

技巧二: 检测应用当前运行的设备类型 假设程序员要在代码中实现自适应的应用界面， 例如， 对于桌面系统， 使用MasterDetails控件， 对于移动系统， 使用ListView来显示数据。  检测当前设备类型的程序逻辑使用到了Windows.System.Profile.AnalyticsInfo这个类库。

示例代码:

var platformFamily = Windows.System.Profile.AnalyticsInfo.VersionInfo.DeviceFamily;

platformFamily可选的值为Windows.Desktop, Windows.Mobile, etc。

技巧三: 页面的导航 UWP应用中页面的导航相较于WP8.1发生了变化, UWP中没有提供NavigationManager这样的类来实现页面导航, 主要是因为UWP以后, 同一套代码既运行在移动端, 也运行在桌面端。当然, 你可以去扩展Phone extension来像8.1上一样使用NavigationManager, 但是更简单的办法是使用Windows.UI.Core.SystemNavigationManager这个类库, 使用这个方法能够兼顾到桌面端和移动端。 首先, 为了能使整个导航机制在所有页面上执行, 我们需要修改App.xaml.cs文件, 在OnLaunched(LaunchActivatedEventArgs e)方法中加入几行代码。      

示例代码:

rootFrame.Navigated += (s, arg) =>
{
    SystemNavigationManager.GetForCurrentView().AppViewBackButtonVisibility =
    ((Frame)s).CanGoBack ? AppViewBackButtonVisibility.Visible : AppViewBackButtonVisibility.Collapsed;
};

SystemNavigationManager.GetForCurrentView().BackRequested += (ss, arg1) =>
{
    Frame rFrame = Window.Current.Content as Frame;
    if (rFrame.CanGoBack)
    {
        arg1.Handled = true;
        rFrame.GoBack();
    }
};
SystemNavigationManager.GetForCurrentView().AppViewBackButtonVisibility =
rootFrame.CanGoBack ?
AppViewBackButtonVisibility.Visible :
AppViewBackButtonVisibility.Collapsed;

技巧四：关于Adaptive UI

使用VisualStateManager来管理UI控件的布局，触发器是MinWindowWidth、MinWindowHeight，当窗口大小发生变化时，控件的布局随着发生相应的变化。 刚开始实验，我使用了Grid和StackPanel, 使用StateManger控制StackPanel的方向，代码类似于：

<Page
    x:Class="Dev209_T10.Views.DemoUI"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:Dev209_T10.Views"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

   <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <Grid.RowDefinitions>
            <RowDefinition Height="*" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>

        <StackPanel Orientation="Vertical" Grid.Column="0" Grid.Row="0">
            <StackPanel x:Name="myPanel1" Orientation="Horizontal" HorizontalAlignment="Left">
                <Border Background="White" Height="20" Width="100" Margin="4"/>
                <Border Background="Beige" Height="20" Width="200" Margin="4"/>
            </StackPanel>
            <StackPanel x:Name="myPanel2" Orientation="Horizontal" HorizontalAlignment="Left">
                <Border Background="White" Height="20" Width="100" Margin="4"/>
                <Border Background="Beige" Height="20" Width="200" Margin="4"/>
            </StackPanel>
            <StackPanel x:Name="myPanel3" Orientation="Horizontal" HorizontalAlignment="Left">
                <Border Background="White" Height="20" Width="100" Margin="4"/>
                <Border Background="Beige" Height="20" Width="200" Margin="4"/>
            </StackPanel>
            <StackPanel x:Name="myPanel4" Orientation="Horizontal" HorizontalAlignment="Left">
                <Border Background="White" Height="20" Width="100" Margin="4"/>
                <Border Background="Beige" Height="20" Width="200" Margin="4"/>
            </StackPanel>
        </StackPanel>
    </Grid>
    
    <VisualStateManager.VisualStateGroups>
        <VisualStateGroup>
            <VisualState x:Name="wideState">
                <VisualState.StateTriggers>
                    <AdaptiveTrigger MinWindowWidth="700" />
                </VisualState.StateTriggers>
            </VisualState>
            <VisualState x:Name="narrowState">
                <VisualState.StateTriggers>
                    <AdaptiveTrigger MinWindowWidth="0" />
                </VisualState.StateTriggers>
                <VisualState.Setters>
                    <Setter Target="myPanel1.Orientation" Value="Vertical" />
                    <Setter Target="myPanel2.Orientation" Value="Vertical" />
                    <Setter Target="myPanel3.Orientation" Value="Vertical" />
                    <Setter Target="myPanel4.Orientation" Value="Vertical" />
                </VisualState.Setters>
            </VisualState>
        </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>
</Page>

View Code