ChildWindow：Popup的加强版

Silverlight项目中少不了弹出窗口，Silverlight中提供了ChildWindow作为弹出窗口，已经能满足大部分需求。 但是ChildWindow模板并不好看，而且位置总是居中，很难通过Transform来控制。为了进一步了解ChildWindow控件，我反编译了ChildWindow的源代码，一探究竟。发现ChildWindow其实可以很强大。 

ChildWindow的默认模板示例：

<ControlTemplate TargetType="controls:ChildWindow">
             <Grid x:Name="Root">
                  <Grid x:Name="Overlay" HorizontalAlignment="Stretch" VerticalAlignment="Top" Margin="0" Background="{TemplateBinding OverlayBrush}" Opacity="{TemplateBinding OverlayOpacity}" />
                 <Grid x:Name="ContentRoot" HorizontalAlignment="{TemplateBinding HorizontalAlignment}" VerticalAlignment="{TemplateBinding VerticalAlignment}" RenderTransformOrigin="0.5,0.5" Height="{TemplateBinding Height}" Width="{TemplateBinding Width}">
                  <Border CornerRadius="1.5" Margin="1">
                             <Grid>
                                 <Grid.RowDefinitions>
                                     <RowDefinition Height="Auto" />
                                     <RowDefinition />
                                 </Grid.RowDefinitions>
                                 <Border x:Name="Chrome" Width="Auto" BorderBrush="#FFFFFFFF" BorderThickness="0,0,0,1">
                                  <Grid Height="Auto" Width="Auto">
                                         <Grid.ColumnDefinitions>
                                             <ColumnDefinition />
                                             <ColumnDefinition Width="30" />
                                         </Grid.ColumnDefinitions>
                                         <ContentControl Content="{TemplateBinding Title}" IsTabStop="False" FontWeight="Bold" HorizontalAlignment="Stretch" VerticalAlignment="Center" Margin="6,0,6,0" />
                                         <Button x:Name="CloseButton" Grid.Column="1" IsTabStop="False" HorizontalAlignment="Center" VerticalAlignment="Center" Width="15" Height="14" Style="{StaticResource ButtonStyle}" />
                                     </Grid>
                                 </Border>
                                 <Border Background="{TemplateBinding Background}" Margin="7" Grid.Row="1">
                                     <ContentPresenter x:Name="ContentPresenter" Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
                                 </Border>
                             </Grid>
                         </Border>
                     </Border>
                 </Grid>
             </Grid>
         </ControlTemplate>

C#代码示例：

       public void Show()
       {
           if (this.ChildWindowPopup == null)
           {
               this.ChildWindowPopup = new Popup();
               try
               {
                   this.ChildWindowPopup.Child = this;
               }
               catch (ArgumentException)
               {
                   this.InteractionState = WindowInteractionState.NotResponding;
                   throw new InvalidOperationException(Resources.ChildWindow_InvalidOperation);
               }
           }
           if ((this.ChildWindowPopup != null) && (Application.Current.RootVisual != null))
           {
               this.ChildWindowPopup.IsOpen = true;
               this._dialogresult = null;
           }
           if (RootVisual != null)
           {
               RootVisual.IsEnabled = false;
           }
       }

从模板和C#代码中，我们可以看到ChildWindow是用Popup来显示的，Overlay元素为背景，ContentRoot就是我们看到的弹出框的，Chrome作为弹出框头部。我们自定义的内容放在ContentPresenter中，掌握了ChildWindow的实现和模板后，我们就可以任意定制自己的弹出窗口了，改变弹出窗口的模板，并添加我们想要的功能。

默认的弹出框总是居中，如何改变弹出框位置呢？ 我们可以在自定义的弹出框中重载OnApplyTemplate来给ContentRoot添加变换。

在这里我们还可以附加其他功能，如点击弹出框以外的部分时，让弹出框关闭等。示例代码如下。

        public override void OnApplyTemplate()
        {
            base.OnApplyTemplate();

            Overlay = this.GetTemplateChild("Overlay") as Panel;
            if (Overlay != null)
            {
                Overlay.MouseLeftButtonDown += new MouseButtonEventHandler(Overlay_MouseLeftButtonDown);
            }

            TranslateTransform translate = new TranslateTransform();
            translate.X = Left;
            translate.Y = Top;

            TransformGroup renderTransform = this.ContentRoot.RenderTransform as TransformGroup;
            if (renderTransform != null)
            {
                renderTransform.Children.Add(translate);
            }
            else
            {
                this.ContentRoot.RenderTransform = translate;
            }
        }