上面blog讲了
自定义window的样式,可以很容易个构建具有自定义样式的窗体。然而,如果希望整个应用程序使用的我们自定义的窗口标准,就必须以手动的方式重新设置窗口。这是很麻烦的体力劳动。对于这种情况有个更好的
解决方法是将标记改编成一个可以用于任何窗口的控件模板(ControlTemplate),有关
详细介绍,请看相关文档。
直接贴出代码进行分析:
class="code_img_closed" src="/Upload/Images/2013090819/0015B68B3C38AA5B.gif" alt="" />
logs_code_hide('a818309d-cc9e-47d4-9880-a1bd80ddcc0f',event)" src="/Upload/Images/2013090819/2B1B950FA3DF188F.gif" alt="" />
<!--自定义模板-->
<ControlTemplate x:Key="CustomWindowTemplate" TargetType="Window">
<Border BorderBrush="#FF0DAD5F" BorderThickness="3" CornerRadius="4">
<Grid >
<Grid.RowDefinitions>
<RowDefinition Height="30"></RowDefinition>
<RowDefinition></RowDefinition>
<RowDefinition Height="5"></RowDefinition>
</Grid.RowDefinitions>
<Border Background="#FF0DAD5F" BorderBrush="Transparent" MouseDown="Grid_MouseDown" CornerRadius="2,2,0,0">
<Grid Name="Title" Margin="0">
<TextBlock HorizontalAlignment="Left" Margin="10,0,0,0" Text="{TemplateBinding Title}" VerticalAlignment="Center"></TextBlock>
<Button Content="一" Name="btnMin" Click="btnMin_Click" HorizontalAlignment="Right" Foreground="White" Margin="0,0,45,0" Height="20" Width="20" Style="{DynamicResource myBtnStyle}" VerticalAlignment="Center" />
<Button Content="口" Name="btnMaxOrMin" Click="btnMaxOrMin_Click" HorizontalAlignment="Right" Foreground="White" Margin="0,0,25,0" Height="20" Width="20" Style="{DynamicResource myBtnStyle}" VerticalAlignment="Center" />
<Button Content="X" HorizontalAlignment="Right" Foreground="White" Margin="0,0,5,0" Height="20" Width="20" Style="{DynamicResource myBtnStyle}" VerticalAlignment="Center" Click="Button_Click" />
</Grid>
</Border>
<Grid Grid.Row="1" Background="White" >
<Grid Margin="5,5,5,0">
<AdornerDecorator>
<ContentPresenter></ContentPresenter>
</AdornerDecorator>
</Grid>
</Grid>
<Grid Grid.Row="2" Background="White">
<ResizeGrip Name="WindowResizeGrip" Visibility="Collapsed" IsTabStop="False" HorizontalAlignment="Right" FontWeight="Black" VerticalAlignment="Bottom">
</ResizeGrip>
<!--<Border Height="5" Width="5" Background="Red" CornerRadius="500,0,0,0" VerticalAlignment="Bottom" HorizontalAlignment="Right" Cursor="SizeNWSE" MouseLeftButtonDown="Border_MouseLeftButtonDown" MouseLeftButtonUp="Border_MouseLeftButtonUp" MouseMove="Border_MouseMove">
</Border>-->
</Grid>
</Grid>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="ResizeMode" Value="CanResizeWithGrip">
<Setter TargetName="WindowResizeGrip" Property="Visibility" Value="Visible"></Setter>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
View Code
该模板的顶级元素是Border作为窗体的边框。在border对象内部是一个具有三行的grid面板,分别是表示标题栏、内容、和ResizeGrip对象,用户手动改变窗口的尺寸。
下面就来实现窗体的各种行为,最大化、关闭;
上面的模板是在添加在对象级资源里面的,放置在App.Xaml文件 <Application.Resources>里面.就直接在对应的App.Xaml.cs写相应的事件。在写相应事件之前需要解决一个问题,那就是,现在代码是运行在资源对象,而不是运行在窗口对象中,就不能使用this
关键字访问当前窗体,我们就用另一种方式来实现:使用
FrameworkElement.TemplatedParent属性。
注:上面实现的模板可以建立在资源字典中,并为资源字典创建代码隐藏类,添加相应的事件处理程序。详细请参考相应文档。(推荐:wpf编程宝典-C#2010版)
控件模板到此已经搞定,那面就建立一个简单的样式应用窗口模板,关键一点是该样式需要设置window类的三个关键属性以使窗口透明。
代码如下:
<Style x:Key="CustomWindowChrome" TargetType="Window">
<Setter Property="AllowsTransparency" Value="True"></Setter>
<Setter Property="WindowStyle" Value="None"></Setter>
<Setter Property="Background" Value="Transparent"></Setter>
<Setter Property="Template" Value="{StaticResource CustomWindowTemplate}"></Setter>
</Style>
注:本次实现的改变窗口尺寸使用了Window.ResizeMode属性,设置这个属性为CanResizeWithGrip,在窗体右下角会显示手柄,鼠标移动修改窗口尺寸。
样式已经定义好,直接在窗体中引用,修改为自定义的窗体样式:
Style="{StaticResource CustomWindowChrome}"
ok,一个自定义的简单的窗口就实现了,通过修改控件模板来达到自己需要的窗口效果,以满足不同的应用程序。本窗体中,按钮样式只使用了一种,有兴趣的同学可以修改关闭和最大化使用不同样式的,以及图标,做出更适合现代应用程序,更具有吸引力的窗口,还需多多改进。
还是贴个效果图吧:
源代码:
自定义窗口模板.zip