WPF界面设计中常用的一些代码片段及属性

一、窗体去掉标题栏、消除掉标题栏后的白边，把窗体置于屏幕中间，窗口大小不能改变。

 WindowStyle="None" AllowsTransparency="True" WindowStartupLocation="CenterScreen" ResizeMode="NoResize"

二、窗口可拖动

 protected override void OnMouseLeftButtonDown(MouseButtonEventArgs e)
 {
 　　base.OnMouseLeftButtonDown(e);

 　　// 获取鼠标相对标题栏位置
 　　Point position = e.GetPosition(gridTitleBar);//gridTiltleBar一般是最外层控件的Name属性即可。

 　　// 如果鼠标位置在标题栏内，允许拖动
 　　if (e.LeftButton == MouseButtonState.Pressed)
 　　{
 　　　　if (position.X >=  && position.X < gridTitleBar.ActualWidth && position.Y >=  && position.Y < gridTitleBar.ActualHeight)
 　　　　{
 　　　　　　this.DragMove();
 　　　　}
 　　}
 }

三、设置Image元素的图片。

 BitmapImage image = new BitmapImage(new Uri(@"./Images/pic_01_4.png", UriKind.Relative));//@"./Images/pic_01_4.png"为图片路径
 this.img_Camera.Source = image;//img_Camera为image的Name属性值

四、按钮的样式（鼠标hover时的样式，鼠标按下时的样式，以及普通状态下的样式），把这段代码放到App.xaml的<Application.Resources>节点下。

 　　　　<Style x:Key="SltBtnMinimized" TargetType="{x:Type Button}">
             <Setter Property="Template">
                 <Setter.Value>
                     <ControlTemplate TargetType="{x:Type Button}">
                         <Border>
                             <Image x:Name="imgContent" Source="Images/wintl_mini_normal.png" />
                         </Border>
                         <ControlTemplate.Triggers>
                             <Trigger Property="IsMouseOver" Value="True">
                                 <Setter TargetName="imgContent" Property="Source" Value="Images/wintl_mini_hover.png"/>
                             </Trigger>
                             <Trigger Property="IsPressed" Value="True">
                                 <Setter TargetName="imgContent" Property="Source" Value="Images/wintl_mini_press.png"/>
                             </Trigger>
                         </ControlTemplate.Triggers>
                     </ControlTemplate>
                 </Setter.Value>
             </Setter>
         </Style>

引用的时候，

 <Button Width="30" Height="26" x:Name="btn_Close" ToolTip="关闭" Style="{StaticResource BtnCloseStyle}"/>

五、复选框

 <Style x:Key="CheckBoxTemplate" TargetType="{x:Type CheckBox}">
             <Setter Property="Template">
                 <Setter.Value>
                     <ControlTemplate TargetType="{x:Type CheckBox}">
                         <StackPanel Orientation="Horizontal">
                             <Border>
                                 <Image x:Name="imageCheckBox" Source="Resources/check_normal.png" Width="18" Height="18" />
                             </Border>
                             <ContentPresenter VerticalAlignment="Center" />
                         </StackPanel>
                         <ControlTemplate.Triggers>
                             <Trigger Property="IsChecked" Value="False">
                                 <Setter TargetName="imageCheckBox" Property="Source" Value="Resources/check_normal.png" />
                             </Trigger>
                             <Trigger Property="IsChecked" Value="True">
                                 <Setter TargetName="imageCheckBox" Property="Source" Value="Resources/check_press.png" />
                             </Trigger>
                             <Trigger Property="IsChecked" Value="{x:Null}" >
                                 <Setter TargetName="imageCheckBox" Property="Source" Value="/Resources/check_hover.png" />
                             </Trigger>
                         </ControlTemplate.Triggers>
                     </ControlTemplate>
                 </Setter.Value>
             </Setter>
         </Style>

六、下拉箭头

        <CheckBox Name="chkMore" HorizontalAlignment="Right" Margin="0,0,65,0" VerticalAlignment="Center" Style="{StaticResource MoreCheckBoxTemplate}" LostFocus="chkMore_LostFocus"/>
        <Popup Width="60" IsOpen="{Binding ElementName=chkMore,Path=IsChecked}" PlacementTarget="{Binding ElementName=chkMore}" AllowsTransparency="True" PopupAnimation="Fade">
            <WrapPanel Width="60">
                <Button Name="btnMenuSetting" HorizontalAlignment="Right" VerticalAlignment="Center" Style="{StaticResource SettingMenuButtonTemplate}" Click="btnMenuSetting_Click"/>
                <Button Name="btnMenuAbout" HorizontalAlignment="Right" VerticalAlignment="Center" Style="{StaticResource AboutMenuButtonTemplate}" Click="btnMenuAbout_Click"/>
            </WrapPanel>
        </Popup>

checkbox对应的Style在App.xmal中

 <Style x:Key="MoreCheckBoxTemplate" TargetType="{x:Type CheckBox}">
             <Setter Property="Template">
                 <Setter.Value>
                     <ControlTemplate TargetType="{x:Type CheckBox}">
                         <StackPanel Orientation="Horizontal" Height="28">
                             <Border>
                                 <Image x:Name="imageCheckBox" Source="Resources/btn_more_normal.png" Width="28" Height="28" />
                             </Border>
                             <ContentPresenter VerticalAlignment="Center" />
                         </StackPanel>
                         <ControlTemplate.Triggers>
                             <Trigger Property="IsChecked" Value="False">
                                 <Setter TargetName="imageCheckBox" Property="Source" Value="Resources/btn_more_normal.png" />
                             </Trigger>
                             <Trigger Property="IsChecked" Value="True">
                                 <Setter TargetName="imageCheckBox" Property="Source" Value="Resources/btn_more_press.png" />
                             </Trigger>
                             <Trigger Property="IsChecked" Value="{x:Null}" >
                                 <Setter TargetName="imageCheckBox" Property="Source" Value="/Resources/btn_more_hover.png" />
                             </Trigger>
                         </ControlTemplate.Triggers>
                     </ControlTemplate>
                 </Setter.Value>
             </Setter>
         </Style>

七、控件无边框

 BorderThickness="0"

八、控件底色透明

 Background="Transparent"

九、渐变色GradientBrush画圆

 <Ellipse Width="120" Height="120">
             <Ellipse.Fill>
                 <RadialGradientBrush GradientOrigin="0.25,0.25" RadiusX="0.75" RadiusY="0.75">
                     <RadialGradientBrush.GradientStops>
                         <GradientStop Offset="0" Color="White"></GradientStop>
                         <GradientStop Offset="0.65" Color="Black"></GradientStop>
                         <GradientStop Offset="0.8" Color="Gray"></GradientStop>
                     </RadialGradientBrush.GradientStops>
                 </RadialGradientBrush>
             </Ellipse.Fill>
         </Ellipse>

效果如下：