Silverlight默认提供的弹出框窗体，样式单调，内容区域中有个大边框。经过自定义样式，对比效果图如下：
修改前：
修改后：
具体实现XAML样式代码如下：
<!-- 弹出窗口的样式，去除原有的白色外边框 -->
<Style TargetType="controls:ChildWindow" x:Name="SubWindow">
<Setter Property="Padding" Value="5"></Setter>
<Setter Property="FontSize" Value="12"></Setter>
<Setter Property="FontFamily" Value="Microsoft YaHei"></Setter>
<Setter Property="BorderBrush" Value="{StaticResource ChildWndBoderColor}"></Setter>
<Setter Property="BorderThickness" Value="5"></Setter>
<Setter Property="Background">
<Setter.Value>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#EEF5FB" Offset="0" />
<GradientStop Color="#EEF5FB" Offset="1" />
<GradientStop Color="#FFDEEAFB" Offset="0.965" />
<GradientStop Color="#FFDEEAFB" Offset="0.010" />
<GradientStop Color="#FFCBE3F7" Offset="0.999" />
<GradientStop Color="#FFCBE3F7" Offset="0.001" />
</LinearGradientBrush>
</Setter.Value>
</Setter>
<Setter Property="HorizontalAlignment" Value="Center" />
<Setter Property="VerticalAlignment" Value="Center" />
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
<Setter Property="VerticalContentAlignment" Value="Stretch" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="controls:ChildWindow">
<Grid x:Name="Root">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="WindowStates">
<VisualState x:Name="Open">
<Storyboard>
<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>
</VisualState>
<VisualState x:Name="Closed">
<Storyboard>
<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>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<!-- 打开动画 可设置禁用-->
<Grid x:Name="Overlay" HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
Background="{TemplateBinding OverlayBrush}" />
<!-- 内容区域 包括标题 -->
<Grid x:Name="ContentRoot" Margin="10"
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 CornerRadius="10 10 2 2"
Margin="1" BorderBrush="#DEE9F2"
BorderThickness="2">
<!-- 底层背景色 -->
<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>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<!-- 标题区域 -->
<Border x:Name="TitleArea" CornerRadius="10 10 0 0">
<!-- 标题区 设置是否显示标题 -->
<Border.Background>
<LinearGradientBrush EndPoint="0.5,0.528" StartPoint="0.5,0">
<GradientStop Color="#295AA6" Offset="1" />
<GradientStop Color="#9CAAC1" Offset="0" />
</LinearGradientBrush>
</Border.Background>
<!-- 标题区域背景颜色 -->
<Grid Height="Auto" Width="Auto">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<ContentControl Content="{TemplateBinding Title}"
IsTabStop="False" Foreground="White"
FontWeight="Bold" FontSize="14"
HorizontalAlignment="Stretch"
VerticalAlignment="Center"
Margin="5" />
<Button x:Name="CloseButton" Style="{StaticResource ButtonStyle}"
Grid.Column="1" Cursor="Hand"
HorizontalAlignment="Center" Margin="5 0"
VerticalAlignment="Center"
Width="20" Height="20">
</Button>
</Grid>
</Border>
<!-- 内容区域 -->
<Border Background="{TemplateBinding Background}" CornerRadius="0 0 2 2"
Grid.Row="1">
<ContentPresenter x:Name="ContentPresenter"
Content="{TemplateBinding Content}"
ContentTemplate="{TemplateBinding ContentTemplate}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
</Border>
</Grid>
</Border>
</Grid>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<!-- 显示的关闭按钮的样式 -->
<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="12" Height="14" Background="#02FFFFFF" x:Name="grid">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal" />
<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>
</VisualState>
<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>
</VisualState>
<VisualState x:Name="Disabled">
<Storyboard>
<DoubleAnimation Duration="0" To="0.5"
Storyboard.TargetName="X"
Storyboard.TargetProperty="Opacity" />
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Path HorizontalAlignment="Center" Margin="0,-1,0,0" Width="12" 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="12"
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="12" 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="12" 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="12" 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="12"
VerticalAlignment="Center" Opacity="1" Visibility="Collapsed" />
<Path HorizontalAlignment="Center" Margin="0,1,0,0" Width="12" 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="12" 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>
493
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
