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>
