Windows 8 系列 Popup 应用 随笔

应用场景一：Popup弹出一个页面

页面SettingsFlyout.xaml：

<UserControl
    x:Class="Win8_Settings.SettingsFlyout"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:Win8_Settings"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    d:DesignHeight="768"
    d:DesignWidth="646">

    <UserControl.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>
    </UserControl.Resources>

    <Border BorderBrush="#00b2f0" BorderThickness="1,0,0,0">
        <Grid Background="White" VerticalAlignment="Stretch">

            <!-- Root grid definition -->
            <Grid.RowDefinitions>
                <RowDefinition Height="80"/>
                <RowDefinition Height="*" />
            </Grid.RowDefinitions>

            <!-- Header area for panel -->
            <Grid Background="#00b2f0" Grid.Row="0">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*" />
                </Grid.ColumnDefinitions>

                <StackPanel Orientation="Horizontal" Grid.Column="0" Margin="40, 32, 17, 13">
                    <Button Click="MySettingsBackClicked" 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"/>
                    <Image Source="Assets/smalltile-sdk.png" Margin="400,0,6,0"/>
                </StackPanel>
            </Grid>

            <!-- Settings Panel Content -->
            <ScrollViewer VerticalScrollBarVisibility="Auto" Grid.Row="1"  >
                <Grid Margin="40,33,40,39" VerticalAlignment="Top" Grid.RowSpan="3">

                    <StackPanel x:Name="FlyoutContent">
                        <TextBlock FontWeight="Bold" Text="Toggle Switch" TextWrapping="Wrap" Style="{StaticResource BasicTextStyle}" HorizontalAlignment="Left"/>
                        <TextBlock Text="Use toggle switches to let users set Boolean values." TextWrapping="Wrap" Style="{StaticResource BasicTextStyle}" HorizontalAlignment="Left"/>
                        <ToggleSwitch Margin="-6,25, 0, 0" Header = "Download updates automatically" HorizontalAlignment="Left" HorizontalContentAlignment="Left"/>
                        <ToggleSwitch Margin="-6, 0, 0, 0" Header = "Install updates automatically" HorizontalAlignment="Stretch"/>

                        <StackPanel Margin="0, 39, 0, 0">
                            <TextBlock FontWeight="Bold" Text="Push button" TextWrapping="Wrap" Style="{StaticResource BasicTextStyle}" HorizontalAlignment="Left"/>
                            <TextBlock Text="With a push button, users initiate an immediate action." TextWrapping="Wrap" Style="{StaticResource BasicTextStyle}" HorizontalAlignment="Left"/>
                            <TextBlock Margin="0, 25, 0, 0" Text="Button label" TextWrapping="Wrap" Style="{StaticResource BasicTextStyle}" HorizontalAlignment="Left"/>
                            <Button Margin="-3, 0, 0, 0" Content="Clear" Click="FlyoutButton_Click"/>
                        </StackPanel>

                        <StackPanel Margin="0, 39, 0, 0">
                            <TextBlock FontWeight="Bold" Text="Select control" TextWrapping="Wrap" Style="{StaticResource BasicTextStyle}" HorizontalAlignment="Left"/>
                            <TextBlock Text="Use the select control to allow users to select one item from a set of text-only items." TextWrapping="Wrap" Style="{StaticResource BasicTextStyle}" HorizontalAlignment="Left"/>
                            <TextBlock Margin="0,25, 0, 0" Text="State:" TextWrapping="Wrap" Style="{StaticResource BasicTextStyle}" HorizontalAlignment="Left"/>
                            <ComboBox Margin="0,7, 0, 0" SelectedIndex="0" HorizontalAlignment="Left">
                                <ComboBoxItem Content="Washington"/>
                                <ComboBoxItem Content="Oregon"/>
                                <ComboBoxItem Content="California"/>
                            </ComboBox>
                        </StackPanel>

                        <StackPanel Margin="0, 39, 0, 0">
                            <TextBlock FontWeight="Bold" Text="Hyperlink" TextWrapping="Wrap" Style="{StaticResource BasicTextStyle}" HorizontalAlignment="Left"/>
                            <TextBlock Text="Use a hyperlink when the associated action will take the user out of this flyout." TextWrapping="Wrap" Style="{StaticResource BasicTextStyle}" HorizontalAlignment="Left"/>
                            <HyperlinkButton Padding="-5,0,0,0" Margin="0, 25, 0, 0" Content="View privacy statement" Tag="http://privacy.microsoft.com" HorizontalAlignment="Left"/>
                        </StackPanel>

                        <StackPanel Margin="0, 39, 0, 0">
                            <TextBlock FontWeight="Bold" Text="Text input box" TextWrapping="Wrap" Style="{StaticResource BasicTextStyle}" HorizontalAlignment="Left"/>
                            <TextBlock Text="Use a text input box to allow users to enter text. Set the type of the text input box according to the type of text you are capturing from the user (e.g. email or password)." TextWrapping="Wrap" Style="{StaticResource BasicTextStyle}" HorizontalAlignment="Left"/>
                            <TextBlock Margin="0,25, 0, 0" Text="Email account" TextWrapping="Wrap" Style="{StaticResource BasicTextStyle}" HorizontalAlignment="Left"/>
                            <StackPanel Margin="0, 7, 0, 0" Orientation="Horizontal">
                                <TextBox HorizontalAlignment="Left" Width="300"/>
                                <Button Margin="20,0, 0, 0" Content="Add" Click="FlyoutButton_Click"/>
                            </StackPanel>
                        </StackPanel>

                        <StackPanel Margin="0, 39, 0, 0">
                            <TextBlock FontWeight="Bold" Text="Radio button group" TextWrapping="Wrap" Style="{StaticResource BasicTextStyle}" HorizontalAlignment="Left"/>
                            <TextBlock Text="Lets users choose one item from a small set of mutually exclusive, related options." TextWrapping="Wrap" Style="{StaticResource BasicTextStyle}" HorizontalAlignment="Left"/>
                            <TextBlock Margin="0,25, 0, 0" Text="Video quality" TextWrapping="Wrap" Style="{StaticResource BasicTextStyle}" HorizontalAlignment="Left"/>
                            <RadioButton Margin="0, 7, 0, 0" Content="High"/>
                            <RadioButton Margin="0, 17, 0, 0" Content="Medium"/>
                            <RadioButton Margin="0, 17, 0, 0" Content="Low"/>
                        </StackPanel>
                    </StackPanel>
                </Grid>
            </ScrollViewer>
        </Grid>

    </Border>
</UserControl>

后台SettingsFlyout.xaml.cs:

 private void MySettingsBackClicked(object sender, RoutedEventArgs e)
        {
            // First close our Flyout.
            Popup parent = this.Parent as Popup;
            if (parent != null)
            {
                parent.IsOpen = false;
            }

            // If the app is not snapped, then the back button shows the Settings pane again.
            if (Windows.UI.ViewManagement.ApplicationView.Value != Windows.UI.ViewManagement.ApplicationViewState.Snapped)
            {
                SettingsPane.Show();
            }
        }

 主页面PopPage.xaml.cs

  Popup settingsPopup = null;
        double settingsWdith = 646;
        private Rect windowBounds;
        private void Button_Click_1(object sender, RoutedEventArgs e)
        {
            settingsPopup = new Popup();
            settingsPopup.Closed += settingsPopup_Closed;
            settingsPopup.IsLightDismissEnabled = true;
            settingsPopup.Width = windowBounds.Height;
            Window.Current.Activated += Current_Activated;
            SettingsFlyout mypane = new SettingsFlyout();
            mypane.Width = settingsWdith;
            mypane.Height = windowBounds.Height;
            settingsPopup.ChildTransitions = new TransitionCollection();
            settingsPopup.ChildTransitions.Add(new PaneThemeTransition()
            {
                Edge = (SettingsPane.Edge == SettingsEdgeLocation.Right) ?
                       EdgeTransitionLocation.Right :
                       EdgeTransitionLocation.Left
            });
            settingsPopup.Closed+=settingsPopup_Closed;
            settingsPopup.Child = mypane;
            settingsPopup.SetValue(Canvas.LeftProperty, SettingsPane.Edge == SettingsEdgeLocation.Right ? (windowBounds.Width - settingsWdith) : 0);
            settingsPopup.SetValue(Canvas.TopProperty, 0);
            settingsPopup.IsOpen = true;
        }

        void Current_Activated(object sender, Windows.UI.Core.WindowActivatedEventArgs e)
        {
            if (e.WindowActivationState == Windows.UI.Core.CoreWindowActivationState.Deactivated)
            {
                settingsPopup.IsOpen = false;
            }
        }

        void settingsPopup_Closed(object sender, object e)
        {
            Window.Current.Activated -= Current_Activated;
        }