Windows统一平台: 开发小技巧

2021-12-22 00:20:17

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

                    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;

            }

        }

    }

码农公寓

相关文章