Metro之Popup控件的使用（登录）

 最终实现效果如下：

添加用户控件LoginPage.xaml，前台代码

        <Popup x:Name="LoginPopup"  Width="{Binding ElementName=RootControl, Path=Width}" IsLightDismissEnabled="True"  >
            <Border Height="{Binding ElementName=RootControl, Path=Height}" 
                    Tapped="OnPopupBorderTapped" Margin="0,0,0,0">
                <Border.Background>
                    <SolidColorBrush Color="#0e3d5e" Opacity="0.95"/>
                </Border.Background>
                <StackPanel x:Name="PopupContainer"  Tapped="OnPanelTapped" HorizontalAlignment="Right">
                    <StackPanel  >
                        <Grid >
                            <Grid.RowDefinitions>
                                <RowDefinition Height="60"/>
                                <RowDefinition Height="60"/>
                                <RowDefinition Height="60"/>
                                <RowDefinition Height="40"/>
                                <RowDefinition Height="40"/>
                                <RowDefinition Height="40"/>
                                <RowDefinition Height="40"/>
                                <RowDefinition Height="40"/>
                                <RowDefinition Height="50"/>
                                <RowDefinition Height="*"/>
                            </Grid.RowDefinitions>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="15"/>
                                <ColumnDefinition Width="*"/>
                                <ColumnDefinition Width="*"/>
                                <ColumnDefinition Width="15"/>
                            </Grid.ColumnDefinitions>
                            <TextBlock Grid.Row="1" Grid.Column="1" Grid.ColumnSpan="2" Text="登录" Foreground="White" FontSize="20"  />
                            <TextBlock Grid.Row="3" Grid.Column="1" Grid.ColumnSpan="2" Text="用户名" Foreground="White" FontSize="20"/>
                            <TextBox  x:Name="tbUserName" Grid.Row="4" Grid.Column="1" Grid.ColumnSpan="2" Height="40" Foreground="#101224" FontSize="24" />
                            <TextBlock Grid.Row="5" Grid.Column="1" Grid.ColumnSpan="2"  Text="密码" Foreground="White" FontSize="20"/>
                            <TextBox  x:Name="tbPassword" Grid.Row="6"  Grid.Column="1" Grid.ColumnSpan="2" Height="40" Foreground="#101224" FontSize="24" />
                            <CheckBox Grid.Row="7" Grid.Column="1" Content="自动登录"/>
                            <CheckBox Grid.Row="7"  Grid.Column="2" Content="记住密码"/>
                            <Button Click="Login_Click" Grid.Column="1" Grid.Row="8" Grid.ColumnSpan="2" BorderThickness="0" >
                                <Image x:Name="LoginOnImage"  Source="Image/btn-login.png" Width="300" Height="40" />
                            </Button>
                            <TextBlock x:Name="tbMessage" Grid.Row="9" Grid.Column="1" Grid.ColumnSpan="2"  Foreground="Red" FontSize="20"/>
                        </Grid>
                    </StackPanel>
                </StackPanel>
            </Border>
        </Popup>

后台代码：定义显示隐藏、定义窗口的宽度高度、定义显示的位置

    #region Data Members

        // 标志点击区域是否在PopupContainer之内
        private bool m_IsPopupContainerTapped;

        #endregion

        #region Constructor

        public LoginPage()
        {
            this.InitializeComponent();
            m_IsPopupContainerTapped = false;

            Height = Window.Current.Bounds.Height;
            Width = Window.Current.Bounds.Width;

            PopupContainer.Height = Height;
            PopupContainer.Width = Width / 4;

        }

        #endregion

        #region Public Methods

        public void Show()
        {
            if (!LoginPopup.IsOpen)
            {
                LoginPopup.HorizontalOffset = Window.Current.Bounds.Width - PopupContainer.Width;
                LoginPopup.IsOpen = true;
            }
        }

        public void Hide()
        {
            if (LoginPopup.IsOpen)
            {
                LoginPopup.IsOpen = false;
            }
        }

        #endregion

        private void OnPopupBorderTapped(object sender, TappedRoutedEventArgs e)
        {
            if (!m_IsPopupContainerTapped)
            {
                LoginPopup.IsOpen = false;
            }
            else
            {
                m_IsPopupContainerTapped = false;
            }
        }

        private void OnPanelTapped(object sender, TappedRoutedEventArgs e)
        {
            m_IsPopupContainerTapped = true;
        }

我定义的宽度PopupContainer.Width = Width / 4;为整个程序窗口的4分之一

另外因为我想将窗口定位到最右侧使用 LoginPopup.HorizontalOffset = Window.Current.Bounds.Width - PopupContainer.Width;距左侧的距离=整个窗口的宽度-popup的宽度；就可以定位到最右侧

最后在menu.xaml中调用lp.Show();lp.Hide();显示隐藏popup。

LoginPage lp=new LoginPage()
lp.Show();
lp.Hide();