WPF qq界面(转)

原文：http://blog.csdn.net/u013981858/article/details/49130885

刚开始学WPF，自己写了个小东西，说实话写的并不好，好多东西不懂只是用现在懂的东西来写的，效果如图

下面是源码，理论上很简单，我直接放代码了。

自定义用户控件RightButton.xaml

  1 <UserControl x:Class="WpfApplication8.RigthButton"
  2              xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  3              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  4              xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
  5              xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
  6              mc:Ignorable="d" 
  7              d:DesignHeight="300" d:DesignWidth="300">
  8     <UserControl.Resources>
  9         <Style x:Key="CloseButton" TargetType="{x:Type Button}">
 10             <Setter Property="Template">
 11                 <Setter.Value>
 12                     <ControlTemplate TargetType="{x:Type Button}">
 13                         <Grid>
 14                             <Rectangle x:Name="rectangle">
 15                                 <Rectangle.Fill>
 16                                     <ImageBrush ImageSource="skin/close_normal.png"/>
 17                                 </Rectangle.Fill>
 18                             </Rectangle>
 19                         </Grid>
 20                         <ControlTemplate.Triggers>
 21                             <Trigger Property="IsFocused" Value="True"/>
 22                             <Trigger Property="IsDefaulted" Value="True"/>
 23                             <Trigger Property="IsMouseOver" Value="True">
 24                                 <Setter Property="Fill" TargetName="rectangle">
 25                                     <Setter.Value>
 26                                         <ImageBrush ImageSource="skin/close_hot.png"/>
 27                                     </Setter.Value>
 28                                 </Setter>
 29                             </Trigger>
 30                             <Trigger Property="IsPressed" Value="True">
 31                                 <Setter Property="Fill" TargetName="rectangle">
 32                                     <Setter.Value>
 33                                         <ImageBrush ImageSource="skin/close_down.png"></ImageBrush>
 34                                     </Setter.Value>
 35                                 </Setter>
 36                             </Trigger>
 37                             <Trigger Property="IsEnabled" Value="False"/>
 38                         </ControlTemplate.Triggers>
 39                     </ControlTemplate>
 40                 </Setter.Value>
 41             </Setter>
 42         </Style>
 43 
 44         <Style x:Key="SmallButton" TargetType="{x:Type Button}">
 45             <Setter Property="Template">
 46                 <Setter.Value>
 47                     <ControlTemplate TargetType="{x:Type Button}">
 48                         <Grid>
 49                             <Rectangle x:Name="rectangle">
 50                                 <Rectangle.Fill>
 51                                     <ImageBrush ImageSource="skin/small_normal.png"/>
 52                                 </Rectangle.Fill>
 53                             </Rectangle>
 54                         </Grid>
 55                         <ControlTemplate.Triggers>
 56                             <Trigger Property="IsFocused" Value="True"/>
 57                             <Trigger Property="IsDefaulted" Value="True"/>
 58                             <Trigger Property="IsMouseOver" Value="True">
 59                                 <Setter Property="Fill" TargetName="rectangle">
 60                                     <Setter.Value>
 61                                         <ImageBrush ImageSource="skin/small_hot.png"/>
 62                                     </Setter.Value>
 63                                 </Setter>
 64                             </Trigger>
 65                             <Trigger Property="IsPressed" Value="True">
 66                                 <Setter Property="Fill" TargetName="rectangle">
 67                                     <Setter.Value>
 68                                         <ImageBrush ImageSource="skin/small_down.png"></ImageBrush>
 69                                     </Setter.Value>
 70                                 </Setter>
 71                             </Trigger>
 72                             <Trigger Property="IsEnabled" Value="False"/>
 73                         </ControlTemplate.Triggers>
 74                     </ControlTemplate>
 75                 </Setter.Value>
 76             </Setter>
 77         </Style>
 78 
 79         <Style x:Key="DownButton" TargetType="{x:Type Button}">
 80             <Setter Property="Template">
 81                 <Setter.Value>
 82                     <ControlTemplate TargetType="{x:Type Button}">
 83                         <Grid>
 84                             <Rectangle x:Name="rectangle">
 85                                 <Rectangle.Fill>
 86                                     <ImageBrush ImageSource="skin/down_normal.png"/>
 87                                 </Rectangle.Fill>
 88                             </Rectangle>
 89                         </Grid>
 90                         <ControlTemplate.Triggers>
 91                             <Trigger Property="IsFocused" Value="True"/>
 92                             <Trigger Property="IsDefaulted" Value="True"/>
 93                             <Trigger Property="IsMouseOver" Value="True">
 94                                 <Setter Property="Fill" TargetName="rectangle">
 95                                     <Setter.Value>
 96                                         <ImageBrush ImageSource="skin/down_hot.png"/>
 97                                     </Setter.Value>
 98                                 </Setter>
 99                             </Trigger>
100                             <Trigger Property="IsPressed" Value="True">
101                                 <Setter Property="Fill" TargetName="rectangle">
102                                     <Setter.Value>
103                                         <ImageBrush ImageSource="skin/down_down.png"></ImageBrush>
104                                     </Setter.Value>
105                                 </Setter>
106                             </Trigger>
107                             <Trigger Property="IsEnabled" Value="False"/>
108                         </ControlTemplate.Triggers>
109                     </ControlTemplate>
110                 </Setter.Value>
111             </Setter>
112         </Style>
113     </UserControl.Resources>
114     <StackPanel Orientation="Horizontal">
115         <Button Click="Button_Click" Width="30" Height="30" Style="{StaticResource DownButton}"></Button>
116         <Button Click="Button_Click_1" Width="30" Height="30" Style="{StaticResource SmallButton}"></Button>
117         <Button Click="Button_Click_2" Width="30" Height="30" Style="{StaticResource CloseButton}"></Button>
118     </StackPanel>
119 </UserControl>

RightButton.xmal.cs

 1 using System;
 2 using System.Collections.Generic;
 3 using System.Linq;
 4 using System.Text;
 5 using System.Threading.Tasks;
 6 using System.Windows;
 7 using System.Windows.Controls;
 8 using System.Windows.Data;
 9 using System.Windows.Documents;
10 using System.Windows.Input;
11 using System.Windows.Media;
12 using System.Windows.Media.Imaging;
13 using System.Windows.Navigation;
14 using System.Windows.Shapes;
15 
16 namespace WpfApplication8
17 {
18     /// <summary>
19     /// RigthButton.xaml 的交互逻辑
20     /// </summary>
21     public partial class RigthButton : UserControl
22     {
23         public RigthButton()
24         {
25             InitializeComponent();
26         }
27 
28         private void Button_Click(object sender, RoutedEventArgs e)
29         {
30 
31         }
32 
33         private void Button_Click_1(object sender, RoutedEventArgs e)
34         {
35             
36         }
37 
38         private void Button_Click_2(object sender, RoutedEventArgs e)
39         {
40             Application.Current.Shutdown();
41         }
42     }
43 }

MainWindow.xaml

  1 <Window x:Class="WpfApplication8.MainWindow"
  2         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  3         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  4         xmlns:loc="clr-namespace:WpfApplication8"
  5         Title="企鹅球球" Height="330" Width="430" AllowsTransparency="True" WindowStyle="None" MouseDown="Window_MouseDown">
  6     <Window.Resources>
  7         <Style x:Key="FocusVisual">
  8             <Setter Property="Control.Template">
  9                 <Setter.Value>
 10                     <ControlTemplate>
 11                         <Rectangle Margin="2" SnapsToDevicePixels="true" Stroke="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}" StrokeThickness="1" StrokeDashArray="1 2"/>
 12                     </ControlTemplate>
 13                 </Setter.Value>
 14             </Setter>
 15         </Style>
 16         <SolidColorBrush x:Key="Button.Static.Background" Color="#FFDDDDDD"/>
 17         <SolidColorBrush x:Key="Button.Static.Border" Color="#FF707070"/>
 18         <SolidColorBrush x:Key="Button.MouseOver.Background" Color="#FFBEE6FD"/>
 19         <SolidColorBrush x:Key="Button.MouseOver.Border" Color="#FF3C7FB1"/>
 20         <SolidColorBrush x:Key="Button.Pressed.Background" Color="#FFC4E5F6"/>
 21         <SolidColorBrush x:Key="Button.Pressed.Border" Color="#FF2C628B"/>
 22         <SolidColorBrush x:Key="Button.Disabled.Background" Color="#FFF4F4F4"/>
 23         <SolidColorBrush x:Key="Button.Disabled.Border" Color="#FFADB2B5"/>
 24         <SolidColorBrush x:Key="Button.Disabled.Foreground" Color="#FF838383"/>
 25         <Style x:Key="ButtonStyle1" TargetType="{x:Type Button}">
 26             <Setter Property="FocusVisualStyle" Value="{StaticResource FocusVisual}"/>
 27             <Setter Property="Background" Value="{StaticResource Button.Static.Background}"/>
 28             <Setter Property="BorderBrush" Value="{StaticResource Button.Static.Border}"/>
 29             <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
 30             <Setter Property="BorderThickness" Value="1"/>
 31             <Setter Property="HorizontalContentAlignment" Value="Center"/>
 32             <Setter Property="VerticalContentAlignment" Value="Center"/>
 33             <Setter Property="Padding" Value="1"/>
 34             <Setter Property="Template">
 35                 <Setter.Value>
 36                     <ControlTemplate TargetType="{x:Type Button}">
 37                         <Border x:Name="border" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" SnapsToDevicePixels="true">
 38                             <ContentPresenter x:Name="contentPresenter" Focusable="False" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
 39                         </Border>
 40                         <ControlTemplate.Triggers>
 41                             <Trigger Property="IsDefaulted" Value="true">
 42                                 <Setter Property="BorderBrush" TargetName="border" Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}"/>
 43                             </Trigger>
 44                             <Trigger Property="IsMouseOver" Value="true">
 45                                 <Setter Property="BorderBrush" TargetName="border" Value="{StaticResource Button.MouseOver.Border}"/>
 46                                 <Setter Property="Background" TargetName="border" Value="#FF51B3EC"/>
 47                             </Trigger>
 48                             <Trigger Property="IsPressed" Value="true">
 49                                 <Setter Property="BorderBrush" TargetName="border" Value="{StaticResource Button.Pressed.Border}"/>
 50                                 <Setter Property="Background" Value="#FF3FA4E8"/>
 51                                 <Setter Property="Background" TargetName="border" Value="#FF42B5F0"/>
 52                             </Trigger>
 53                             <Trigger Property="IsEnabled" Value="false">
 54                                 <Setter Property="Background" TargetName="border" Value="{StaticResource Button.Disabled.Background}"/>
 55                                 <Setter Property="BorderBrush" TargetName="border" Value="{StaticResource Button.Disabled.Border}"/>
 56                                 <Setter Property="TextElement.Foreground" TargetName="contentPresenter" Value="{StaticResource Button.Disabled.Foreground}"/>
 57                             </Trigger>
 58                         </ControlTemplate.Triggers>
 59                     </ControlTemplate>
 60                 </Setter.Value>
 61             </Setter>
 62         </Style>
 63         <SolidColorBrush x:Key="OptionMark.Static.Background" Color="#FFFFFFFF"/>
 64         <SolidColorBrush x:Key="OptionMark.Static.Border" Color="#FF707070"/>
 65         <Style x:Key="OptionMarkFocusVisual">
 66             <Setter Property="Control.Template">
 67                 <Setter.Value>
 68                     <ControlTemplate>
 69                         <Rectangle Margin="14,0,0,0" SnapsToDevicePixels="true" Stroke="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}" StrokeThickness="1" StrokeDashArray="1 2"/>
 70                     </ControlTemplate>
 71                 </Setter.Value>
 72             </Setter>
 73         </Style>
 74         <SolidColorBrush x:Key="OptionMark.MouseOver.Background" Color="#FFF3F9FF"/>
 75         <SolidColorBrush x:Key="OptionMark.MouseOver.Border" Color="#FF5593FF"/>
 76         <SolidColorBrush x:Key="OptionMark.MouseOver.Glyph" Color="#FF212121"/>
 77         <SolidColorBrush x:Key="OptionMark.Disabled.Background" Color="#FFE6E6E6"/>
 78         <SolidColorBrush x:Key="OptionMark.Disabled.Border" Color="#FFBCBCBC"/>
 79         <SolidColorBrush x:Key="OptionMark.Disabled.Glyph" Color="#FF707070"/>
 80         <SolidColorBrush x:Key="OptionMark.Pressed.Background" Color="#FFD9ECFF"/>
 81         <SolidColorBrush x:Key="OptionMark.Pressed.Border" Color="#FF3C77DD"/>
 82         <SolidColorBrush x:Key="OptionMark.Pressed.Glyph" Color="#FF212121"/>
 83         <SolidColorBrush x:Key="OptionMark.Static.Glyph" Color="#FF212121"/>
 84         <Style x:Key="CheckBoxStyle1" TargetType="{x:Type CheckBox}">
 85             <Setter Property="FocusVisualStyle" Value="{StaticResource FocusVisual}"/>
 86             <Setter Property="Background" Value="{StaticResource OptionMark.Static.Background}"/>
 87             <Setter Property="BorderBrush" Value="{StaticResource OptionMark.Static.Border}"/>
 88             <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
 89             <Setter Property="BorderThickness" Value="1"/>
 90             <Setter Property="Template">
 91                 <Setter.Value>
 92                     <ControlTemplate TargetType="{x:Type CheckBox}">
 93                         <Grid x:Name="templateRoot" Background="Transparent" SnapsToDevicePixels="True">
 94                             <Grid.ColumnDefinitions>
 95                                 <ColumnDefinition Width="Auto"/>
 96                                 <ColumnDefinition Width="*"/>
 97                             </Grid.ColumnDefinitions>
 98                             <Border x:Name="checkBoxBorder" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="1" VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
 99                                 <Grid x:Name="markGrid">
100                                     <Path x:Name="optionMark" Data="F1 M 9.97498,1.22334L 4.6983,9.09834L 4.52164,9.09834L 0,5.19331L 1.27664,3.52165L 4.255,6.08833L 8.33331,1.52588e-005L 9.97498,1.22334 Z " Fill="{StaticResource OptionMark.Static.Glyph}" Margin="1" Opacity="0" Stretch="None"/>
101                                     <Rectangle x:Name="indeterminateMark" Fill="{StaticResource OptionMark.Static.Glyph}" Margin="2" Opacity="0"/>
102                                 </Grid>
103                             </Border>
104                             <ContentPresenter x:Name="contentPresenter" Grid.Column="1" Focusable="False" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
105                         </Grid>
106                         <ControlTemplate.Triggers>
107                             <Trigger Property="HasContent" Value="true">
108                                 <Setter Property="FocusVisualStyle" Value="{StaticResource OptionMarkFocusVisual}"/>
109                                 <Setter Property="Padding" Value="4,-1,0,0"/>
110                             </Trigger>
111                             <Trigger Property="IsMouseOver" Value="true">
112                                 <Setter Property="Background" TargetName="checkBoxBorder" Value="{StaticResource OptionMark.MouseOver.Background}"/>
113                                 <Setter Property="BorderBrush" TargetName="checkBoxBorder" Value="{StaticResource OptionMark.MouseOver.Border}"/>
114                                 <Setter Property="Fill" TargetName="optionMark" Value="{StaticResource OptionMark.MouseOver.Glyph}"/>
115                                 <Setter Property="Fill" TargetName="indeterminateMark" Value="{StaticResource OptionMark.MouseOver.Glyph}"/>
116                             </Trigger>
117                             <Trigger Property="IsEnabled" Value="false">
118                                 <Setter Property="Background" TargetName="checkBoxBorder" Value="{StaticResource OptionMark.Disabled.Background}"/>
119                                 <Setter Property="BorderBrush" TargetName="checkBoxBorder" Value="{StaticResource OptionMark.Disabled.Border}"/>
120                                 <Setter Property="Fill" TargetName="optionMark" Value="{StaticResource OptionMark.Disabled.Glyph}"/>
121                                 <Setter Property="Fill" TargetName="indeterminateMark" Value="{StaticResource OptionMark.Disabled.Glyph}"/>
122                             </Trigger>
123                             <Trigger Property="IsPressed" Value="true">
124                                 <Setter Property="Background" TargetName="checkBoxBorder" Value="{StaticResource OptionMark.Pressed.Background}"/>
125                                 <Setter Property="BorderBrush" TargetName="checkBoxBorder" Value="{StaticResource OptionMark.Pressed.Border}"/>
126                                 <Setter Property="Fill" TargetName="optionMark" Value="{StaticResource OptionMark.Pressed.Glyph}"/>
127                                 <Setter Property="Fill" TargetName="indeterminateMark" Value="{StaticResource OptionMark.Pressed.Glyph}"/>
128                             </Trigger>
129                             <Trigger Property="IsChecked" Value="true">
130                                 <Setter Property="Opacity" TargetName="optionMark" Value="1"/>
131                                 <Setter Property="Opacity" TargetName="indeterminateMark" Value="0"/>
132                                 <Setter Property="Background" TargetName="markGrid" Value="blue"/>
133                                 <Setter Property="Fill" TargetName="optionMark" Value="white"/>
134                             </Trigger>
135                             <Trigger Property="IsChecked" Value="{x:Null}">
136                                 <Setter Property="Opacity" TargetName="optionMark" Value="0"/>
137                                 <Setter Property="Opacity" TargetName="indeterminateMark" Value="1"/>
138                             </Trigger>
139                         </ControlTemplate.Triggers>
140                     </ControlTemplate>
141                 </Setter.Value>
142             </Setter>
143         </Style>
144     </Window.Resources>
145     <StackPanel>
146         <Grid Height="180">
147             <Grid.Background>
148                 <ImageBrush ImageSource="bckpic.jpg"/>
149             </Grid.Background>
150             <StackPanel Width="150" Height="30" HorizontalAlignment="Right" VerticalAlignment="Top">
151                 <loc:RigthButton HorizontalAlignment="Right"></loc:RigthButton>
152             </StackPanel>
153         </Grid>
154         <StackPanel Height="150">
155             <StackPanel Orientation="Horizontal" >
156                 <Border Height="80" Width="80" Margin="35,10,10,10" CornerRadius="5" BorderBrush="Gray" BorderThickness="1">
157                     <Border.Background>
158                         <ImageBrush ImageSource="touxiang1.jpg"/>
159                     </Border.Background>
160                 </Border>
161                 <StackPanel Width="180" Height="89" Margin="10,10,0,0">
162                     <Border BorderBrush="Gray" CornerRadius="5" BorderThickness="1">
163                         <StackPanel Width="180" Height="60">
164                             <TextBox Height="25" Width="180" Background="{x:Null}" BorderThickness="0,0,0,1" Margin="0,5,0,0" FontSize="14" Foreground="Gray">用户名</TextBox>
165                             <TextBox Height="25" Width="180" Background="{x:Null}" BorderThickness="0" Margin="0,2,0,0" FontSize="14" Foreground="Gray">密码</TextBox>
166                         </StackPanel>
167                     </Border>
168                    
169                     <StackPanel Orientation="Horizontal" Height="15" Width="180" Margin="0,10,0,0">
170                         <CheckBox Style="{DynamicResource CheckBoxStyle1}">记住密码</CheckBox>
171                         <CheckBox Style="{DynamicResource CheckBoxStyle1}" Margin="42,0,0,0">自动登陆</CheckBox>
172                     </StackPanel>
173 
174                 </StackPanel>
175 
176                 <StackPanel Height="60" Margin="15">
177                     <TextBlock Height="30">
178                         <Hyperlink NavigateUri="http://zc.qq.com">注册账号</Hyperlink>
179                     </TextBlock>
180                     <TextBlock Height="30">
181                         <Hyperlink NavigateUri="http://aq.qq.com/">找回密码</Hyperlink>
182                     </TextBlock>
183                 </StackPanel>
184 
185             </StackPanel>
186 
187             <Border Height="30" Width="180" Margin="20,5,0,0" CornerRadius="5" BorderBrush="#FF0E95F1" BorderThickness="1">
188                 <Button Height="30" FontWeight="Bold" Width="180" Content="登  陆" FontFamily="宋体" Foreground="White" Background="#FF0E95F1" BorderThickness="0" Style="{DynamicResource ButtonStyle1}"></Button>
189             </Border>    
190         </StackPanel>
191     </StackPanel>
192 </Window>