最近一直在搞wpf相关的东东,由于还在门外徘徊,所以第一篇blog写了简单的制作扁平化的wpf button样式,这一篇也简单的制作属于自己wpf 窗体的样式。
废话少说,下面就开始制作自己的窗体样式之旅(建立wpf工程就不在这里赘述):
设置自己的窗体要隐藏默认窗体title,需要设置windows的属性: AllowsTransparency 为 true ,
注意:当AllowsTransparency 为true时,WindowStyle.None 是 WindowStyle 的唯一有效值。并且设置windows的Background="Transparent",为透明的效果。
通过上面设置,默认windows的样式就变成透明的了,下面就来设置自己的颜色背景的窗体:
窗体主要有两部分,上面的Head,现实标题和,关闭,最大化,最小化按钮、另一部分是现实内容。
我们就把windows分成两部分,上面部分的height设置为30,用来放置窗体的标题和按钮。下面部分为现实内容。
代码如下:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="30"></RowDefinition>
<RowDefinition></RowDefinition>
</Grid.RowDefinitions>
<Grid Name="Title">
//title
</Grid>
<Grid Grid.Row="1" Background="White">
//content
</Grid>
</Grid>
上面完成后,就来填充title部分添加如下代码:
<TextBlock HorizontalAlignment="Left" VerticalAlignment="Center"> My window</TextBlock>
<Button Content="X" HorizontalAlignment="Right" Margin="0,0,5,0" Height="20" Width="20" Style="{DynamicResource myBtnStyle}" VerticalAlignment="Center" Click="Button_Click" />
注:上面的按钮样式为本人上篇博客的设计的简单按钮样式。
现实窗体的名称和关闭按钮。
到现在为止,窗体的基本样式算是搞定了,但是如果一个窗体一直在那里,不能够*移动,是什么样的一种心情呢。!!惆怅加寂寞。。。!那就人道点,给点*吧,不做*的coder。
在name为title的grid上面添加MouseDown事件:MouseDown="Grid_MouseDown"
具体后台代码实现:
if (e.LeftButton == MouseButtonState.Pressed)
{
DragMove();
}
实现左键按下拖动窗体。可以拖动的窗体还是舒服啊。哎
到目前为止,有人要问了,你看别人的窗体基本上是圆角的,不能out的一直用尖角吧?那好吧,本人好人一个,就给你圆角的窗体。
在最外层的grid外面加上border标签,进行圆角窗体的设计。
设置其 CornerRadius="4"实现圆角效果。
ok了,一个简单的个性的窗体就实现了,看效果图:
代码XAML:
<Window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" x:Class="WpfAppBlog.MainWindow" x:Name="Window" Background="Transparent" Title="MainWindow" AllowsTransparency="True" WindowStyle="None" Width="640" Height="480"> <Window.Resources> <Style x:Key="myBtnStyle" TargetType="{x:Type Button}"> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="{x:Type Button}"> <Grid> <Grid.ColumnDefinitions> <ColumnDefinition x:Name="columnDefinition1" Width="0.982*"/> <ColumnDefinition x:Name="columnDefinition" Width="0.018*"/> </Grid.ColumnDefinitions> <Rectangle x:Name="rectangle" RadiusY="2" RadiusX="2" Stroke="{x:Null}" Fill="#FF0DAD5F" Grid.ColumnSpan="2"/> <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/> </Grid> <ControlTemplate.Triggers> <Trigger Property="IsFocused" Value="True"> <Setter Property="Stroke" TargetName="rectangle" Value="{x:Null}"/> <Setter Property="Fill" TargetName="rectangle" Value="#FF0EED80"/> </Trigger> <Trigger Property="IsDefaulted" Value="True"> <Setter Property="Fill" TargetName="rectangle" Value="#FF0DAD5F"/> <Setter Property="Stroke" TargetName="rectangle" Value="{x:Null}"/> </Trigger> <Trigger Property="IsMouseOver" Value="True"> <Setter Property="Stroke" TargetName="rectangle" Value="{x:Null}"/> <Setter Property="Fill" TargetName="rectangle" Value="#FF83D245"/> </Trigger> <Trigger Property="IsPressed" Value="True"> <Setter Property="Stroke" TargetName="rectangle" Value="{x:Null}"/> <Setter Property="Fill" TargetName="rectangle" Value="#FF17D256"/> <Setter Property="Width" TargetName="columnDefinition" Value="Auto"/> <Setter Property="MinWidth" TargetName="columnDefinition" Value="0"/> <Setter Property="Width" TargetName="columnDefinition1" Value="*"/> </Trigger> <Trigger Property="IsEnabled" Value="False"> <Setter Property="Stroke" TargetName="rectangle" Value="{x:Null}"/> <Setter Property="Fill" TargetName="rectangle" Value="{x:Null}"/> </Trigger> </ControlTemplate.Triggers> </ControlTemplate> </Setter.Value> </Setter> </Style> </Window.Resources> <Border BorderBrush="#FF0DAD5F" BorderThickness="3" CornerRadius="4"> <Grid > <Grid.RowDefinitions> <RowDefinition Height="30"></RowDefinition> <RowDefinition></RowDefinition> </Grid.RowDefinitions> <Border Background="#FF0DAD5F" MouseDown="Grid_MouseDown" CornerRadius="2,2,0,0"> <Grid Name="Title"> <TextBlock HorizontalAlignment="Left" VerticalAlignment="Center"> My window</TextBlock> <Button Content="X" Foreground="White" HorizontalAlignment="Right" 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"> <Button Content="Button" Height="56" Margin="130,127,209,0" Style="{DynamicResource myBtnStyle}" VerticalAlignment="Top"/> </Grid> </Grid> </Border> </Window>
后台:
private void Button_Click(object sender, RoutedEventArgs e) { this.Close(); } private void Grid_MouseDown(object sender, MouseButtonEventArgs e) { if (e.LeftButton == MouseButtonState.Pressed) { DragMove(); } }
本次制作的简单的窗体,title上面的按钮只实现了关闭按钮,最大化、最小化按钮没有实现,下次有机会才完成了。