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>

运行时，不起任何作用， 然后通过实验多次，发现需要把VisualStateManger放到Grid里边，就起作用了。

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

        <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>
    </Grid>
</Page>

 同样的，如果不想在XAML中设置StateTrigger, 也可以在代码中进行控制:

        private void MainPage_Loaded(object sender, RoutedEventArgs e)
        {
            this.SizeChanged += (o, s) =>
            {
                var state = "VisualStatePC";
                if (s.NewSize.Width > 1000)
                    state = "VisualStatePC";
                else
                    state = "VisualStatePhone";

                bool result = VisualStateManager.GoToState(this, state, true);

            };
        }

技巧五： 使用Moblie Extension SDK
 UWP App除了可以调用所有设备家族通用的WinRT API之外，还以调用针对特点设备的API，在使用之前只要引入相应的类库。 引用类库的步骤： 在项目中，单击References,选择Add References, 选择Universal Windows, 选择Extensions. 这里我们选中 Windows Mobile Extensions for the UWP，单击OK. 以拍照来说，在使用之前，要先来判断是不是Windows Phone， 对Windows Phone设备，当按下拍照按键时，触发相应程序逻辑。

示例代码:

using Windows.Storage.Pickers;

bool isPhoneAvailable =
            ApiInformation.IsTypePresent("Windows.Phone.UI.Input.HardwareButtons");
if (isPhoneAvailable)
            {
                Windows.Phone.UI.Input.HardwareButtons.CameraPressed += HardwareButtons_CameraPressed;
            }

private async void HardwareButtons_CameraPressed(object sender, Windows.Phone.UI.Input.CameraEventArgs e)
    {
        var cameraUI = new CameraCaptureUI();
        cameraUI.PhotoSettings.Format = CameraCaptureUIPhotoFormat.Jpeg;

        StorageFile photo = await cameraUI.CaptureFileAsync(CameraCaptureUIMode.Photo);
        if (photo != null)
        {
            using (IRandomAccessStream stream = await photo.OpenAsync(FileAccessMode.Read))
            {
                BitmapDecoder decoder = await BitmapDecoder.CreateAsync(stream);

                SoftwareBitmap softwareBitmap = await decoder.GetSoftwareBitmapAsync();

                SoftwareBitmap softwareBitmapBGR8 = SoftwareBitmap.Convert(softwareBitmap, BitmapPixelFormat.Bgra8, BitmapAlphaMode.Premultiplied);

                SoftwareBitmapSource bitmapSource = new SoftwareBitmapSource();
                await bitmapSource.SetBitmapAsync(softwareBitmapBGR8);
                imageControl.Source = bitmapSource;
            }
        }
    }