程式師世界 >> 編程語言 >> .NET網頁編程 >> 關於.NET >> Windows 8 Store Apps學習(37) 契約: Settings Contract

Windows 8 Store Apps學習(37) 契約: Settings Contract

編輯：關於.NET

介紹

重新想象 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();
            }
        }
    }
}

[源碼下載]：http://files.cnblogs.com/webabcd/Windows8.rar