Share via


ChildWindow Styles and Templates

Microsoft Silverlight will reach end of support after October 2021. Learn more.

This topic describes the styles and templates for the ChildWindow control. You can modify the default ControlTemplate to give the control a unique appearance. For more information, see Customizing the Appearance of an Existing Control by Using a ControlTemplate.

ChildWindow Parts

ChildWindow Parts

ChildWindow parts

The following table lists the named parts for the ChildWindow control.

Part

Type

Description

Chrome

FrameworkElement

The frame around the child window content.

CloseButton

ButtonBase

The close button in the header of the child window.

ContentPresenter

FrameworkElement

The content area of the child window.

ContentRoot

FrameworkElement

The root of the pop-up window; contains the Chrome and ContentPresenter.

Overlay

Panel

The part of the control that covers the parent window when the child window is open.

Root

FrameworkElement

The root of the control.

ChildWindow States

The following table lists the visual states for the ChildWindow control.

VisualState Name

VisualStateGroup Name

Description

Closed

WindowStates

The child window pop-up is hidden.

Open

WindowStates

The child window pop-up is shown.

Default Style and Template

The following shows the XML namespace mappings that you have to specify when you work with styles and templates.

<!-- XML Namespace mappings. -->
xmlns:controls="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls"
xmlns:vsm="clr-namespace:System.Windows;assembly=System.Windows"
Important noteImportant Note:

The default templates for controls in Silverlight 4 still use the Silverlight 3-style prefixes, such as controls: and data: instead of sdk:. This is because the default control templates support Silverlight 3 and Silverlight 4 simultaneously. For more information, see Prefixes and Mappings for Silverlight Libraries.

NoteNote:

The default templates still specify the vsm: XML namespace mapping for the VisualStateManager element for legacy reasons. You can however, use the VisualStateManager element without specifying the vsm: mapping.

The following XAML shows the default style and template for the ChildWindow control.

<Style TargetType="controls:ChildWindow">
      <Setter Property="IsTabStop" Value="false" />
      <Setter Property="TabNavigation" Value="Cycle" />
      <Setter Property="HorizontalAlignment" Value="Center" />
      <Setter Property="VerticalAlignment" Value="Center" />
      <Setter Property="HorizontalContentAlignment" Value="Stretch" />
      <Setter Property="VerticalContentAlignment" Value="Stretch" />
      <Setter Property="BorderThickness" Value="1" />
      <Setter Property="BorderBrush">
          <Setter.Value>
              <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
                  <GradientStop Color="#FFA3AEB9" Offset="0" />
                  <GradientStop Color="#FF8399A9" Offset="0.375" />
                  <GradientStop Color="#FF718597" Offset="0.375" />
                  <GradientStop Color="#FF617584" Offset="1" />
              </LinearGradientBrush>
          </Setter.Value>
      </Setter>
      <Setter Property="OverlayBrush">
          <Setter.Value>
              <SolidColorBrush Color="#7F000000" />
          </Setter.Value>
      </Setter>
      <Setter Property="OverlayOpacity" Value="1" />
      <Setter Property="Template">
          <Setter.Value>
              <ControlTemplate TargetType="controls:ChildWindow">
                  <Grid x:Name="Root">
                      <Grid.Resources>
                          <Style x:Key="ButtonStyle" TargetType="Button">
                              <Setter Property="Background" Value="#FF1F3B53" />
                              <Setter Property="Foreground" Value="#FF000000" />
                              <Setter Property="Padding" Value="3" />
                              <Setter Property="BorderThickness" Value="1" />
                              <Setter Property="BorderBrush">
                                  <Setter.Value>
                                      <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                          <GradientStop Color="#FFA3AEB9" Offset="0" />
                                          <GradientStop Color="#FF8399A9" Offset="0.375" />
                                          <GradientStop Color="#FF718597" Offset="0.375" />
                                          <GradientStop Color="#FF617584" Offset="1" />
                                      </LinearGradientBrush>
                                  </Setter.Value>
                              </Setter>
                              <Setter Property="Template">
                                  <Setter.Value>
                                      <ControlTemplate TargetType="Button">
                                          <Grid HorizontalAlignment="Center" VerticalAlignment="Center" Width="15" Height="14" Background="#02FFFFFF" x:Name="grid">
                                              <vsm:VisualStateManager.VisualStateGroups>
                                                  <vsm:VisualStateGroup x:Name="CommonStates">
                                                      <vsm:VisualState x:Name="Normal" />
                                                      <vsm:VisualState x:Name="MouseOver">
                                                          <Storyboard>
                                                              <ObjectAnimationUsingKeyFrames Storyboard.TargetName="X_Fuzz2" Storyboard.TargetProperty="Visibility">
                                                                  <DiscreteObjectKeyFrame KeyTime="0" Value="Visible" />
                                                              </ObjectAnimationUsingKeyFrames>
                                                              <ObjectAnimationUsingKeyFrames Storyboard.TargetName="X_Fuzz1" Storyboard.TargetProperty="Visibility">
                                                                  <DiscreteObjectKeyFrame KeyTime="0" Value="Visible" />
                                                              </ObjectAnimationUsingKeyFrames>
                                                              <ObjectAnimationUsingKeyFrames Storyboard.TargetName="X_Fuzz0" Storyboard.TargetProperty="Visibility">
                                                                  <DiscreteObjectKeyFrame KeyTime="0" Value="Visible" />
                                                              </ObjectAnimationUsingKeyFrames>
                                                              <DoubleAnimation Duration="0" Storyboard.TargetName="X" Storyboard.TargetProperty="Opacity" To="0.95" />
                                                          </Storyboard>
                                                      </vsm:VisualState>
                                                      <vsm:VisualState x:Name="Pressed">
                                                          <Storyboard>
                                                              <DoubleAnimation Duration="0" Storyboard.TargetName="X" Storyboard.TargetProperty="Opacity" To="0.85" />
                                                              <ObjectAnimationUsingKeyFrames Storyboard.TargetName="X_Fuzz2" Storyboard.TargetProperty="Visibility">
                                                                  <DiscreteObjectKeyFrame KeyTime="0" Value="Visible" />
                                                              </ObjectAnimationUsingKeyFrames>
                                                              <ObjectAnimationUsingKeyFrames Storyboard.TargetName="X_Fuzz1" Storyboard.TargetProperty="Visibility">
                                                                  <DiscreteObjectKeyFrame KeyTime="0" Value="Visible" />
                                                              </ObjectAnimationUsingKeyFrames>
                                                              <ObjectAnimationUsingKeyFrames Storyboard.TargetName="X_Fuzz0" Storyboard.TargetProperty="Visibility">
                                                                  <DiscreteObjectKeyFrame KeyTime="0" Value="Visible" />
                                                              </ObjectAnimationUsingKeyFrames>
                                                          </Storyboard>
                                                      </vsm:VisualState>
                                                      <vsm:VisualState x:Name="Disabled">
                                                          <Storyboard>
                                                              <DoubleAnimation Duration="0" Storyboard.TargetName="X" Storyboard.TargetProperty="Opacity" To="0.5" />
                                                          </Storyboard>
                                                      </vsm:VisualState>
                                                  </vsm:VisualStateGroup>
                                              </vsm:VisualStateManager.VisualStateGroups>
                                              <Path HorizontalAlignment="Center" Margin="0,-1,0,0" Width="9" Fill="#14C51900" Stretch="Fill" Data="F1 M 6.742676,3.852539 L 9.110840,1.559570 L 8.910645,0.500000 L 6.838379,0.500000 L 4.902832,2.435547 L 2.967285,0.500000 L 0.895020,0.500000 L 0.694824,1.559570 L 3.062988,3.852539 L 0.527832,6.351563 L 0.689941,7.600586 L 2.967285,7.600586 L 4.897949,5.575195 L 6.854004,7.600586 L 9.115723,7.600586 L 9.277832,6.351563 L 6.742676,3.852539 Z" x:Name="X_Fuzz2" Stroke="#14C51900" Height="8" VerticalAlignment="Center" Opacity="1" RenderTransformOrigin="0.5,0.5" Visibility="Collapsed">
                                                  <Path.RenderTransform>
                                                      <TransformGroup>
                                                          <ScaleTransform ScaleX="1.3" ScaleY="1.3" />
                                                      </TransformGroup>
                                                  </Path.RenderTransform>
                                              </Path>
                                              <Path HorizontalAlignment="Center" Margin="0,-1,0,0" Width="9" Fill="#1EC51900" Stretch="Fill" Data="F1 M 6.742676,3.852539 L 9.110840,1.559570 L 8.910645,0.500000 L 6.838379,0.500000 L 4.902832,2.435547 L 2.967285,0.500000 L 0.895020,0.500000 L 0.694824,1.559570 L 3.062988,3.852539 L 0.527832,6.351563 L 0.689941,7.600586 L 2.967285,7.600586 L 4.897949,5.575195 L 6.854004,7.600586 L 9.115723,7.600586 L 9.277832,6.351563 L 6.742676,3.852539 Z" x:Name="X_Fuzz1" Stroke="#1EC51900" Height="8" VerticalAlignment="Center" Opacity="1" RenderTransformOrigin="0.5,0.5" Visibility="Collapsed">
                                                  <Path.RenderTransform>
                                                      <TransformGroup>
                                                          <ScaleTransform ScaleX="1.1" ScaleY="1.1" />
                                                      </TransformGroup>
                                                  </Path.RenderTransform>
                                              </Path>
                                              <Path HorizontalAlignment="Center" Margin="0,-1,0,0" Width="9" Fill="#FFC51900" Stretch="Fill" Data="F1 M 6.742676,3.852539 L 9.110840,1.559570 L 8.910645,0.500000 L 6.838379,0.500000 L 4.902832,2.435547 L 2.967285,0.500000 L 0.895020,0.500000 L 0.694824,1.559570 L 3.062988,3.852539 L 0.527832,6.351563 L 0.689941,7.600586 L 2.967285,7.600586 L 4.897949,5.575195 L 6.854004,7.600586 L 9.115723,7.600586 L 9.277832,6.351563 L 6.742676,3.852539 Z" x:Name="X_Fuzz0" Stroke="#FFC51900" Height="8" VerticalAlignment="Center" Opacity="1" Visibility="Collapsed" />
                                              <Path HorizontalAlignment="Center" Margin="0,-1,0,0" Width="9" Fill="#FFFFFFFF" Stretch="Fill" Data="F1 M 6.742676,3.852539 L 9.110840,1.559570 L 8.910645,0.500000 L 6.838379,0.500000 L 4.902832,2.435547 L 2.967285,0.500000 L 0.895020,0.500000 L 0.694824,1.559570 L 3.062988,3.852539 L 0.527832,6.351563 L 0.689941,7.600586 L 2.967285,7.600586 L 4.897949,5.575195 L 6.854004,7.600586 L 9.115723,7.600586 L 9.277832,6.351563 L 6.742676,3.852539 Z" x:Name="X" Height="8" VerticalAlignment="Center" Opacity="0.7">
                                                  <Path.Stroke>
                                                      <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                                          <GradientStop Color="#FF313131" Offset="1" />
                                                          <GradientStop Color="#FF8E9092" Offset="0" />
                                                      </LinearGradientBrush>
                                                  </Path.Stroke>
                                              </Path>
                                          </Grid>
                                      </ControlTemplate>
                                  </Setter.Value>
                              </Setter>
                          </Style>
                      </Grid.Resources>
                      <vsm:VisualStateManager.VisualStateGroups>
                          <vsm:VisualStateGroup x:Name="WindowStates">
                              <vsm:VisualState x:Name="Open">
                                  <Storyboard>
                                      <DoubleAnimationUsingKeyFrames BeginTime="0" Storyboard.TargetName="Overlay" Storyboard.TargetProperty="Opacity">
                                          <EasingDoubleKeyFrame KeyTime="0" Value="0" />
                                          <EasingDoubleKeyFrame KeyTime="00:00:00.3" Value="1" />
                                      </DoubleAnimationUsingKeyFrames>
                                      <DoubleAnimationUsingKeyFrames BeginTime="0" Storyboard.TargetName="ContentRoot" Storyboard.TargetProperty="(RenderTransform).(Children)[0].ScaleX">
                                          <SplineDoubleKeyFrame KeyTime="0" Value="0" />
                                          <SplineDoubleKeyFrame KeyTime="00:00:00.25" Value="0" />
                                          <SplineDoubleKeyFrame KeyTime="00:00:00.4" Value="1" />
                                          <SplineDoubleKeyFrame KeySpline="0,0,0.5,1" KeyTime="00:00:00.45" Value="1.05" />
                                          <SplineDoubleKeyFrame KeyTime="00:00:00.55" Value="1" />
                                      </DoubleAnimationUsingKeyFrames>
                                      <DoubleAnimationUsingKeyFrames BeginTime="0" Storyboard.TargetName="ContentRoot" Storyboard.TargetProperty="(RenderTransform).(Children)[0].ScaleY">
                                          <SplineDoubleKeyFrame KeyTime="0" Value="0" />
                                          <SplineDoubleKeyFrame KeyTime="00:00:00.25" Value="0" />
                                          <SplineDoubleKeyFrame KeyTime="00:00:00.4" Value="1" />
                                          <SplineDoubleKeyFrame KeySpline="0,0,0.5,1" KeyTime="00:00:00.45" Value="1.05" />
                                          <SplineDoubleKeyFrame KeyTime="00:00:00.55" Value="1" />
                                      </DoubleAnimationUsingKeyFrames>
                                  </Storyboard>
                              </vsm:VisualState>
                              <vsm:VisualState x:Name="Closed">
                                  <Storyboard>
                                      <DoubleAnimationUsingKeyFrames BeginTime="0" Storyboard.TargetName="Overlay" Storyboard.TargetProperty="Opacity">
                                          <EasingDoubleKeyFrame KeyTime="0" Value="1" />
                                          <EasingDoubleKeyFrame KeyTime="00:00:00.3" Value="0" />
                                      </DoubleAnimationUsingKeyFrames>
                                      <DoubleAnimationUsingKeyFrames BeginTime="0" Storyboard.TargetName="ContentRoot" Storyboard.TargetProperty="(RenderTransform).(Children)[0].ScaleX">
                                          <SplineDoubleKeyFrame KeyTime="00:00:00.2" Value="1" />
                                          <SplineDoubleKeyFrame KeyTime="00:00:00.25" Value="1.05" />
                                          <SplineDoubleKeyFrame KeyTime="00:00:00.45" Value="0" />
                                      </DoubleAnimationUsingKeyFrames>
                                      <DoubleAnimationUsingKeyFrames BeginTime="0" Storyboard.TargetName="ContentRoot" Storyboard.TargetProperty="(RenderTransform).(Children)[0].ScaleY">
                                          <SplineDoubleKeyFrame KeyTime="00:00:00.2" Value="1" />
                                          <SplineDoubleKeyFrame KeyTime="00:00:00.25" Value="1.05" />
                                          <SplineDoubleKeyFrame KeyTime="00:00:00.45" Value="0" />
                                      </DoubleAnimationUsingKeyFrames>
                                  </Storyboard>
                              </vsm:VisualState>
                          </vsm:VisualStateGroup>
                      </vsm:VisualStateManager.VisualStateGroups>
                      <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}">
                          <Grid.RenderTransform>
                              <TransformGroup>
                                  <ScaleTransform />
                                  <SkewTransform />
                                  <RotateTransform />
                                  <TranslateTransform />
                              </TransformGroup>
                          </Grid.RenderTransform>
                          <Border BorderThickness="1" CornerRadius="2" BorderBrush="#14000000" Background="#14000000" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="-1" />
                          <Border BorderThickness="1" CornerRadius="2.25" BorderBrush="#0F000000" Background="#0F000000" HorizontalAlignment="Stretch" Margin="-2" VerticalAlignment="Stretch" />
                          <Border BorderThickness="1" CornerRadius="2.5" BorderBrush="#0C000000" Background="#0C000000" HorizontalAlignment="Stretch" Margin="-3" VerticalAlignment="Stretch" />
                          <Border BorderThickness="1" CornerRadius="2.75" BorderBrush="#0A000000" Background="#0A000000" HorizontalAlignment="Stretch" Margin="-4" VerticalAlignment="Stretch" />
                          <Border Background="#FFFFFFFF" BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="{TemplateBinding BorderBrush}" CornerRadius="2">
                              <Border CornerRadius="1.5" Margin="1">
                                  <Border.Background>
                                      <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                          <GradientStop Color="#FFE5E8EB" Offset="1" />
                                          <GradientStop Color="#FFF6F8F9" Offset="0" />
                                      </LinearGradientBrush>
                                  </Border.Background>
                                  <Grid>
                                      <Grid.RowDefinitions>
                                          <RowDefinition Height="Auto" />
                                          <RowDefinition />
                                      </Grid.RowDefinitions>
                                      <Border x:Name="Chrome" Width="Auto" BorderBrush="#FFFFFFFF" BorderThickness="0,0,0,1">
                                          <Border.Background>
                                              <LinearGradientBrush EndPoint="0.5,0.528" StartPoint="0.5,0">
                                                  <GradientStop Color="#FFE5E8EB" Offset="1" />
                                                  <GradientStop Color="#FFFEFEFE" Offset="0" />
                                              </LinearGradientBrush>
                                          </Border.Background>
                                          <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>
          </Setter.Value>
      </Setter>
  </Style>