Wpf 简单制作自己的窗体样式_.NET_编程开发_程序员俱乐部

最近一直在搞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： class="code_img_closed" src="/Upload/Images/2013090721/0015B68B3C38AA5B.gif" alt="" />logs_code_hide('140ea28d-ee4b-4543-83f2-e07ea66c8c20',event)" src="/Upload/Images/2013090721/2B1B950FA3DF188F.gif" alt="" />

<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>
 

View Code 后台：

 1  private void Button_Click(object sender, RoutedEventArgs e)
 2         {
 3             this.Close();
 4         }
 5  
 6         private void Grid_MouseDown(object sender, MouseButtonEventArgs e)
 7         {
 8             if (e.LeftButton == MouseButtonState.Pressed)
 9             {
10                 DragMove();
11             }
12         }

View Code

 

本次制作的简单的窗体，title上面的按钮只实现了关闭按钮，最大化、最小化按钮没有实现，下次有机会才完成了。