ChildWindow Styles and Templates
Silverlight
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
The following table lists the named parts for the ChildWindow control.
|
Part |
Type |
Description |
|---|---|---|
|
Chrome |
The frame around the child window content. |
|
|
CloseButton |
The close button in the header of the child window. |
|
|
ContentPresenter |
The content area of the child window. |
|
|
ContentRoot |
The root of the pop-up window; contains the Chrome and ContentPresenter. |
|
|
Overlay |
The part of the control that covers the parent window when the child window is open. |
|
|
Root |
The root of the control. |
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. |
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 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. |
| Note: |
|---|
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>
