重新想象 Windows 8 Store Apps (37) - 契约: Settings Contract

原文: 重新想象 Windows 8 Store Apps (37) - 契约: Settings Contract

[源码下载]

重新想象 Windows 8 Store Apps (37) - 契约: Settings Contract

作者：webabcd


介绍
重新想象 Windows 8 Store Apps 之 契约

• Settings Contract - 右侧边栏称之为 Charm，其中的“设置”称之为 Settings Contract

示例
演示 Settings Contract 的应用
Contracts/SettingsContract/Demo.xaml

<Page

    x:Class="XamlDemo.Contracts.SettingsContract.Demo"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

    mc:Ignorable="d">



    <Grid Background="Transparent">

        <StackPanel Margin="120 0 0 0">



            <Button Name="btnAddSettings" Content="注册 SettingsPane 的 CommandsRequested 事件" Click="btnAddSettings_Click_1" />



            <Button Name="btnShowSettings" Content="打开 SettingsPane" Click="btnShowSettings_Click_1" Margin="0 10 0 0" />



            <TextBlock Name="lblMsg" FontSize="14.667" TextWrapping="Wrap" Margin="0 10 0 0" />

            

        </StackPanel>

    </Grid>

</Page>

Contracts/SettingsContract/Demo.xaml.cs

/*

 * Settings Contract - 右侧边栏称之为 Charm，其中的“设置”称之为 Settings Contract

 * 

 * SettingsPane - 设置面板

 *     GetForCurrentView() - 获取当前的 SettingsPane

 *     Show() - 打开 SettingsPane

 *     CommandsRequested - 每次打开 SettingsPane 时所触发的事件（两个类型为 SettingsPane 和 SettingsPaneCommandsRequestedEventArgs 的参数）

 *     

 * UICommandInvokedHandler - 单击设置面板中的设置项时引发的事件的回调函数，是一个委托（一个类型为 IUICommand 的参数，SettingsCommand 实现了此接口）

 * 

 * SettingsCommand - 设置面板中的设置项

 *     Id - 设置项的 ID，标识用

 *     Label - 设置项的名称，显示用

 *     Invoked - 指定单机设置项后，引发的事件的处理程序

 *     

 * SettingsPaneCommandsRequestedEventArgs - CommandsRequested 事件中的事件参数

 *     Request - 返回 SettingsPaneCommandsRequest 类型的数据

 *     

 * SettingsPaneCommandsRequest - 包含了 CommandsRequested 事件中的可用属性

 *     ApplicationCommands - SettingsCommand 集合

 */



using System;

using Windows.UI.ApplicationSettings;

using Windows.UI.Popups;

using Windows.UI.Xaml;

using Windows.UI.Xaml.Controls;

using Windows.UI.Xaml.Controls.Primitives;

using Windows.UI.Xaml.Media.Animation;

using Windows.UI.Xaml.Navigation;



namespace XamlDemo.Contracts.SettingsContract

{

    public sealed partial class Demo : Page

    {

        // 弹出自定义的详细设置页时，所用到的弹出框

        private Popup _settingsPopup = new Popup();

        // 是否注册了 SettingsPane 的 CommandsRequested 事件

        private bool _commandsRequestedRegistered = false;



        public Demo()

        {

            this.InitializeComponent();

        }



        protected override void OnNavigatedFrom(NavigationEventArgs e)

        {

            base.OnNavigatedFrom(e);



            // 离开此页则去掉 CommandsRequested 监听

            if (this._commandsRequestedRegistered)

            {

                SettingsPane.GetForCurrentView().CommandsRequested -= onCommandsRequested;

                _commandsRequestedRegistered = false;

            }

        }



        // 添加设置项，即初始化自定义的设置项

        private void btnAddSettings_Click_1(object sender, RoutedEventArgs e)

        {

            if (!_commandsRequestedRegistered)

            {

                // 注册 SettingsPane 的 CommandsRequested 事件

                SettingsPane.GetForCurrentView().CommandsRequested += onCommandsRequested;

                _commandsRequestedRegistered = true;

            }

            else

            {

                lblMsg.Text += "已经为 SettingsPane 注册了 CommandsRequested 事件";

                lblMsg.Text += Environment.NewLine;

            }

        }



        // 显示 SettingsPane

        private void btnShowSettings_Click_1(object sender, RoutedEventArgs e)

        {

            SettingsPane.Show();

        }



        void onCommandsRequested(SettingsPane settingsPane, SettingsPaneCommandsRequestedEventArgs eventArgs)

        {

            // 初始化 SettingsPane 中的设置项

            UICommandInvokedHandler handler = new UICommandInvokedHandler(onSettingsCommand);



            SettingsCommand aboutCommand = new SettingsCommand("about", "关于", handler);

            eventArgs.Request.ApplicationCommands.Add(aboutCommand);



            SettingsCommand contactCommand = new SettingsCommand("contactUs", "联系我们", handler);

            eventArgs.Request.ApplicationCommands.Add(contactCommand);



            SettingsCommand flyoutCommand = new SettingsCommand("flyout", "弹出一个类“设置”风格的详细设置页", handler);

            eventArgs.Request.ApplicationCommands.Add(flyoutCommand);

        }



        // 响应 SettingsPane 中的各个自定义设置项的命令

        void onSettingsCommand(IUICommand command)

        {

            SettingsCommand settingsCommand = (SettingsCommand)command;

            lblMsg.Text += string.Format("commandId:{0} - label:{1}", settingsCommand.Id.ToString(), settingsCommand.Label);

            lblMsg.Text += Environment.NewLine;



            // 通过 SettingsCommand.Id 来判断用户单机了哪个设置项

            if (settingsCommand.Id.ToString() == "flyout")

            {

                // 详细设置页的宽度

                double settingsPageWidth = 600;



                // 设置用于携带详细设置页的 Popup 的基本属性

                _settingsPopup.IsLightDismissEnabled = true;

                _settingsPopup.Width = settingsPageWidth;

                _settingsPopup.Height = Window.Current.Bounds.Height;



                // 为弹出框增加 PaneThemeTransition 的效果

                _settingsPopup.ChildTransitions = new TransitionCollection();

                _settingsPopup.ChildTransitions.Add(new PaneThemeTransition()

                {

                    Edge = EdgeTransitionLocation.Right

                });



                // 实例化自定义的详细设置页，并将其放到 Popup 内

                CustomSettingsPage mySettingsPage = new CustomSettingsPage();

                mySettingsPage.Width = settingsPageWidth;

                mySettingsPage.Height = Window.Current.Bounds.Height;

                _settingsPopup.Child = mySettingsPage;



                // 指定 Popup 的显示位置

                _settingsPopup.HorizontalOffset = Window.Current.Bounds.Width - settingsPageWidth;

                _settingsPopup.VerticalOffset = 0;

                _settingsPopup.IsOpen = true;

            }

        }

    }

}

自定义的详细设置页
Contracts/SettingsContract/CustomSettingsPage.xaml

<Page

    x:Class="XamlDemo.Contracts.SettingsContract.CustomSettingsPage"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    xmlns:local="using:XamlDemo.Contracts.SettingsContract"

    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

    mc:Ignorable="d">



    <Page.Resources>

        <!--

            详细设置页的左上角的返回按钮的样式

        -->

        <Style x:Key="SettingsBackButtonStyle" TargetType="Button">

            <Setter Property="MinWidth" Value="0"/>

            <Setter Property="FontFamily" Value="Segoe UI Symbol"/>

            <Setter Property="FontWeight" Value="Normal"/>

            <Setter Property="FontSize" Value="26.66667"/>

            <Setter Property="AutomationProperties.AutomationId" Value="BackButton"/>

            <Setter Property="AutomationProperties.Name" Value="Back"/>

            <Setter Property="AutomationProperties.ItemType" Value="Navigation Button"/>

            <Setter Property="Template">

                <Setter.Value>

                    <ControlTemplate TargetType="Button">

                        <Grid x:Name="RootGrid" Width="30" Height="30">

                            <Grid Margin="-6,-6,0,0">

                                <TextBlock x:Name="BackgroundGlyph" Text="&#xE0D4;" Foreground="Transparent"/>

                                <TextBlock x:Name="NormalGlyph" Text="{StaticResource BackButtonSnappedGlyph}" Foreground="White"/>

                                <TextBlock x:Name="ArrowGlyph" Text="&#xE0C4;" Foreground="#00b2f0" Opacity="0"/>

                            </Grid>

                            <Rectangle x:Name="FocusVisualWhite" IsHitTestVisible="False" Stroke="{StaticResource FocusVisualWhiteStrokeThemeBrush}" StrokeEndLineCap="Square" StrokeDashArray="1,1" Opacity="0" StrokeDashOffset="1.5" />

                            <Rectangle x:Name="FocusVisualBlack" IsHitTestVisible="False" Stroke="{StaticResource FocusVisualBlackStrokeThemeBrush}" StrokeEndLineCap="Square" StrokeDashArray="1,1" Opacity="0" StrokeDashOffset="0.5" />

                            <VisualStateManager.VisualStateGroups>

                                <VisualStateGroup x:Name="CommonStates">

                                    <VisualState x:Name="Normal" />

                                    <VisualState x:Name="PointerOver">

                                        <Storyboard>

                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BackgroundGlyph" Storyboard.TargetProperty="Foreground">

                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource BackButtonPointerOverBackgroundThemeBrush}"/>

                                            </ObjectAnimationUsingKeyFrames>

                                        </Storyboard>

                                    </VisualState>

                                    <VisualState x:Name="Pressed">

                                        <Storyboard>

                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BackgroundGlyph" Storyboard.TargetProperty="Foreground">

                                                <DiscreteObjectKeyFrame KeyTime="0" Value="White"/>

                                            </ObjectAnimationUsingKeyFrames>

                                            <DoubleAnimation Storyboard.TargetName="ArrowGlyph" Storyboard.TargetProperty="Opacity" To="1" Duration="0"/>

                                            <DoubleAnimation Storyboard.TargetName="NormalGlyph" Storyboard.TargetProperty="Opacity" To="0" Duration="0"/>

                                        </Storyboard>

                                    </VisualState>

                                    <VisualState x:Name="Disabled">

                                        <Storyboard>

                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="RootGrid" Storyboard.TargetProperty="Visibility">

                                                <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>

                                            </ObjectAnimationUsingKeyFrames>

                                        </Storyboard>

                                    </VisualState>

                                </VisualStateGroup>

                                <VisualStateGroup x:Name="FocusStates">

                                    <VisualState x:Name="Focused">

                                        <Storyboard>

                                            <DoubleAnimation Storyboard.TargetName="FocusVisualWhite" Storyboard.TargetProperty="Opacity" To="1" Duration="0"/>

                                            <DoubleAnimation Storyboard.TargetName="FocusVisualBlack" Storyboard.TargetProperty="Opacity" To="1" Duration="0"/>

                                        </Storyboard>

                                    </VisualState>

                                    <VisualState x:Name="Unfocused" />

                                    <VisualState x:Name="PointerFocused" />

                                </VisualStateGroup>

                            </VisualStateManager.VisualStateGroups>

                        </Grid>

                    </ControlTemplate>

                </Setter.Value>

            </Setter>

        </Style>

    </Page.Resources>



    <Grid Background="Transparent" Name="root">

        <Border BorderBrush="Red" BorderThickness="1,0,0,0">

            <Grid Background="White">

                <Grid.RowDefinitions>

                    <RowDefinition Height="80"/>

                    <RowDefinition Height="*" />

                </Grid.RowDefinitions>



                <Grid Background="#00b2f0" Grid.Row="0">

                    <StackPanel Orientation="Horizontal" Margin="40, 32, 17, 13">

                        <!--返回按钮-->

                        <Button Name="btnBack" Click="btnBack_Click_1" Margin="0,3,0,0" Style="{StaticResource SettingsBackButtonStyle}"/>

                        <!--详细设置页的标题-->

                        <TextBlock Margin="10,0,0,0" FontFamily="Segoe UI" FontWeight="SemiLight" FontSize="24.6667" Text="Defaults" Foreground="White"/>

                    </StackPanel>

                </Grid>



                <ScrollViewer Grid.Row="1">

                    <!--详细设置页内的全部内容-->

                    <StackPanel>

                        <!--为详细设置页内的内容增加 EntranceThemeTransition 效果-->

                        <StackPanel.ChildrenTransitions>

                            <TransitionCollection>

                                <PaneThemeTransition Edge="Right" />

                            </TransitionCollection>

                        </StackPanel.ChildrenTransitions>

                        <TextBlock FontSize="56" Foreground="Black" LineHeight="100">

                            <Run>设置1</Run>

                            <LineBreak />

                            <Run>设置2</Run>

                            <LineBreak />

                            <Run>设置3</Run>

                            <LineBreak />

                            <Run>设置4</Run>

                            <LineBreak />

                            <Run>设置5</Run>

                            <LineBreak />

                            <Run>设置6</Run>

                            <LineBreak />

                            <Run>设置7</Run>

                            <LineBreak />

                            <Run>设置8</Run>

                            <LineBreak />

                            <Run>设置9</Run>

                        </TextBlock>

                    </StackPanel>

                </ScrollViewer>

            </Grid>

        </Border>

    </Grid>

</Page>

Contracts/SettingsContract/CustomSettingsPage.xaml.cs

/*

 * 自定义的详细设置页

 */



using Windows.UI.ApplicationSettings;

using Windows.UI.Xaml;

using Windows.UI.Xaml.Controls;

using Windows.UI.Xaml.Controls.Primitives;

using Windows.UI.Xaml.Media.Animation;

using Windows.UI.Xaml.Navigation;



namespace XamlDemo.Contracts.SettingsContract

{

    public sealed partial class CustomSettingsPage : Page

    {

        public CustomSettingsPage()

        {

            this.InitializeComponent();

        }



        private void btnBack_Click_1(object sender, RoutedEventArgs e)

        {

            // 详细设置页的容器是 Popup，找到这个 Popup 并关闭它，从而关闭详细设置页

            Popup parent = this.Parent as Popup;

            if (parent != null)

            {

                parent.IsOpen = false;

            }



            // 显示设置面板

            if (Windows.UI.ViewManagement.ApplicationView.Value != Windows.UI.ViewManagement.ApplicationViewState.Snapped)

            {

                SettingsPane.Show();

            }

        }

    }

}

OK
[源码下载]