WPF开发实例——仿QQ登录界面

原文: WPF开发实例——仿QQ登录界面

版权声明:本文为博主原创文章,如需转载请标明转载地址 http://blog.csdn.net/u013981858 https://blog.csdn.net/u013981858/article/details/49130885

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

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

自定义用户控件RightButton.xaml

<UserControl x:Class="WpfApplication8.RigthButton"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             mc:Ignorable="d" 
             d:DesignHeight="300" d:DesignWidth="300">
    <UserControl.Resources>
        <Style x:Key="CloseButton" TargetType="{x:Type Button}">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type Button}">
                        <Grid>
                            <Rectangle x:Name="rectangle">
                                <Rectangle.Fill>
                                    <ImageBrush ImageSource="skin/close_normal.png"/>
                                </Rectangle.Fill>
                            </Rectangle>
                        </Grid>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsFocused" Value="True"/>
                            <Trigger Property="IsDefaulted" Value="True"/>
                            <Trigger Property="IsMouseOver" Value="True">
                                <Setter Property="Fill" TargetName="rectangle">
                                    <Setter.Value>
                                        <ImageBrush ImageSource="skin/close_hot.png"/>
                                    </Setter.Value>
                                </Setter>
                            </Trigger>
                            <Trigger Property="IsPressed" Value="True">
                                <Setter Property="Fill" TargetName="rectangle">
                                    <Setter.Value>
                                        <ImageBrush ImageSource="skin/close_down.png"></ImageBrush>
                                    </Setter.Value>
                                </Setter>
                            </Trigger>
                            <Trigger Property="IsEnabled" Value="False"/>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

        <Style x:Key="SmallButton" TargetType="{x:Type Button}">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type Button}">
                        <Grid>
                            <Rectangle x:Name="rectangle">
                                <Rectangle.Fill>
                                    <ImageBrush ImageSource="skin/small_normal.png"/>
                                </Rectangle.Fill>
                            </Rectangle>
                        </Grid>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsFocused" Value="True"/>
                            <Trigger Property="IsDefaulted" Value="True"/>
                            <Trigger Property="IsMouseOver" Value="True">
                                <Setter Property="Fill" TargetName="rectangle">
                                    <Setter.Value>
                                        <ImageBrush ImageSource="skin/small_hot.png"/>
                                    </Setter.Value>
                                </Setter>
                            </Trigger>
                            <Trigger Property="IsPressed" Value="True">
                                <Setter Property="Fill" TargetName="rectangle">
                                    <Setter.Value>
                                        <ImageBrush ImageSource="skin/small_down.png"></ImageBrush>
                                    </Setter.Value>
                                </Setter>
                            </Trigger>
                            <Trigger Property="IsEnabled" Value="False"/>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

        <Style x:Key="DownButton" TargetType="{x:Type Button}">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type Button}">
                        <Grid>
                            <Rectangle x:Name="rectangle">
                                <Rectangle.Fill>
                                    <ImageBrush ImageSource="skin/down_normal.png"/>
                                </Rectangle.Fill>
                            </Rectangle>
                        </Grid>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsFocused" Value="True"/>
                            <Trigger Property="IsDefaulted" Value="True"/>
                            <Trigger Property="IsMouseOver" Value="True">
                                <Setter Property="Fill" TargetName="rectangle">
                                    <Setter.Value>
                                        <ImageBrush ImageSource="skin/down_hot.png"/>
                                    </Setter.Value>
                                </Setter>
                            </Trigger>
                            <Trigger Property="IsPressed" Value="True">
                                <Setter Property="Fill" TargetName="rectangle">
                                    <Setter.Value>
                                        <ImageBrush ImageSource="skin/down_down.png"></ImageBrush>
                                    </Setter.Value>
                                </Setter>
                            </Trigger>
                            <Trigger Property="IsEnabled" Value="False"/>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </UserControl.Resources>
    <StackPanel Orientation="Horizontal">
        <Button Click="Button_Click" Width="30" Height="30" Style="{StaticResource DownButton}"></Button>
        <Button Click="Button_Click_1" Width="30" Height="30" Style="{StaticResource SmallButton}"></Button>
        <Button Click="Button_Click_2" Width="30" Height="30" Style="{StaticResource CloseButton}"></Button>
    </StackPanel>
</UserControl>
RightButton.xmal.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

namespace WpfApplication8
{
    /// <summary>
    /// RigthButton.xaml 的交互逻辑
    /// </summary>
    public partial class RigthButton : UserControl
    {
        public RigthButton()
        {
            InitializeComponent();
        }

        private void Button_Click(object sender, RoutedEventArgs e)
        {

        }

        private void Button_Click_1(object sender, RoutedEventArgs e)
        {
            
        }

        private void Button_Click_2(object sender, RoutedEventArgs e)
        {
            Application.Current.Shutdown();
        }
    }
}
MainWindow.xaml

<Window x:Class="WpfApplication8.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:loc="clr-namespace:WpfApplication8"
        Title="企鹅球球" Height="330" Width="430" AllowsTransparency="True" WindowStyle="None" MouseDown="Window_MouseDown">
	<Window.Resources>
		<Style x:Key="FocusVisual">
			<Setter Property="Control.Template">
				<Setter.Value>
					<ControlTemplate>
						<Rectangle Margin="2" SnapsToDevicePixels="true" Stroke="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}" StrokeThickness="1" StrokeDashArray="1 2"/>
					</ControlTemplate>
				</Setter.Value>
			</Setter>
		</Style>
		<SolidColorBrush x:Key="Button.Static.Background" Color="#FFDDDDDD"/>
		<SolidColorBrush x:Key="Button.Static.Border" Color="#FF707070"/>
		<SolidColorBrush x:Key="Button.MouseOver.Background" Color="#FFBEE6FD"/>
		<SolidColorBrush x:Key="Button.MouseOver.Border" Color="#FF3C7FB1"/>
		<SolidColorBrush x:Key="Button.Pressed.Background" Color="#FFC4E5F6"/>
		<SolidColorBrush x:Key="Button.Pressed.Border" Color="#FF2C628B"/>
		<SolidColorBrush x:Key="Button.Disabled.Background" Color="#FFF4F4F4"/>
		<SolidColorBrush x:Key="Button.Disabled.Border" Color="#FFADB2B5"/>
		<SolidColorBrush x:Key="Button.Disabled.Foreground" Color="#FF838383"/>
		<Style x:Key="ButtonStyle1" TargetType="{x:Type Button}">
			<Setter Property="FocusVisualStyle" Value="{StaticResource FocusVisual}"/>
			<Setter Property="Background" Value="{StaticResource Button.Static.Background}"/>
			<Setter Property="BorderBrush" Value="{StaticResource Button.Static.Border}"/>
			<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
			<Setter Property="BorderThickness" Value="1"/>
			<Setter Property="HorizontalContentAlignment" Value="Center"/>
			<Setter Property="VerticalContentAlignment" Value="Center"/>
			<Setter Property="Padding" Value="1"/>
			<Setter Property="Template">
				<Setter.Value>
					<ControlTemplate TargetType="{x:Type Button}">
						<Border x:Name="border" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" SnapsToDevicePixels="true">
							<ContentPresenter x:Name="contentPresenter" Focusable="False" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
						</Border>
						<ControlTemplate.Triggers>
							<Trigger Property="IsDefaulted" Value="true">
								<Setter Property="BorderBrush" TargetName="border" Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}"/>
							</Trigger>
							<Trigger Property="IsMouseOver" Value="true">
								<Setter Property="BorderBrush" TargetName="border" Value="{StaticResource Button.MouseOver.Border}"/>
								<Setter Property="Background" TargetName="border" Value="#FF51B3EC"/>
							</Trigger>
							<Trigger Property="IsPressed" Value="true">
								<Setter Property="BorderBrush" TargetName="border" Value="{StaticResource Button.Pressed.Border}"/>
								<Setter Property="Background" Value="#FF3FA4E8"/>
								<Setter Property="Background" TargetName="border" Value="#FF42B5F0"/>
							</Trigger>
							<Trigger Property="IsEnabled" Value="false">
								<Setter Property="Background" TargetName="border" Value="{StaticResource Button.Disabled.Background}"/>
								<Setter Property="BorderBrush" TargetName="border" Value="{StaticResource Button.Disabled.Border}"/>
								<Setter Property="TextElement.Foreground" TargetName="contentPresenter" Value="{StaticResource Button.Disabled.Foreground}"/>
							</Trigger>
						</ControlTemplate.Triggers>
					</ControlTemplate>
				</Setter.Value>
			</Setter>
		</Style>
		<SolidColorBrush x:Key="OptionMark.Static.Background" Color="#FFFFFFFF"/>
		<SolidColorBrush x:Key="OptionMark.Static.Border" Color="#FF707070"/>
		<Style x:Key="OptionMarkFocusVisual">
			<Setter Property="Control.Template">
				<Setter.Value>
					<ControlTemplate>
						<Rectangle Margin="14,0,0,0" SnapsToDevicePixels="true" Stroke="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}" StrokeThickness="1" StrokeDashArray="1 2"/>
					</ControlTemplate>
				</Setter.Value>
			</Setter>
		</Style>
		<SolidColorBrush x:Key="OptionMark.MouseOver.Background" Color="#FFF3F9FF"/>
		<SolidColorBrush x:Key="OptionMark.MouseOver.Border" Color="#FF5593FF"/>
		<SolidColorBrush x:Key="OptionMark.MouseOver.Glyph" Color="#FF212121"/>
		<SolidColorBrush x:Key="OptionMark.Disabled.Background" Color="#FFE6E6E6"/>
		<SolidColorBrush x:Key="OptionMark.Disabled.Border" Color="#FFBCBCBC"/>
		<SolidColorBrush x:Key="OptionMark.Disabled.Glyph" Color="#FF707070"/>
		<SolidColorBrush x:Key="OptionMark.Pressed.Background" Color="#FFD9ECFF"/>
		<SolidColorBrush x:Key="OptionMark.Pressed.Border" Color="#FF3C77DD"/>
		<SolidColorBrush x:Key="OptionMark.Pressed.Glyph" Color="#FF212121"/>
		<SolidColorBrush x:Key="OptionMark.Static.Glyph" Color="#FF212121"/>
		<Style x:Key="CheckBoxStyle1" TargetType="{x:Type CheckBox}">
			<Setter Property="FocusVisualStyle" Value="{StaticResource FocusVisual}"/>
			<Setter Property="Background" Value="{StaticResource OptionMark.Static.Background}"/>
			<Setter Property="BorderBrush" Value="{StaticResource OptionMark.Static.Border}"/>
			<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
			<Setter Property="BorderThickness" Value="1"/>
			<Setter Property="Template">
				<Setter.Value>
					<ControlTemplate TargetType="{x:Type CheckBox}">
						<Grid x:Name="templateRoot" Background="Transparent" SnapsToDevicePixels="True">
							<Grid.ColumnDefinitions>
								<ColumnDefinition Width="Auto"/>
								<ColumnDefinition Width="*"/>
							</Grid.ColumnDefinitions>
							<Border x:Name="checkBoxBorder" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="1" VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
								<Grid x:Name="markGrid">
									<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"/>
									<Rectangle x:Name="indeterminateMark" Fill="{StaticResource OptionMark.Static.Glyph}" Margin="2" Opacity="0"/>
								</Grid>
							</Border>
							<ContentPresenter x:Name="contentPresenter" Grid.Column="1" Focusable="False" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
						</Grid>
						<ControlTemplate.Triggers>
							<Trigger Property="HasContent" Value="true">
								<Setter Property="FocusVisualStyle" Value="{StaticResource OptionMarkFocusVisual}"/>
								<Setter Property="Padding" Value="4,-1,0,0"/>
							</Trigger>
							<Trigger Property="IsMouseOver" Value="true">
								<Setter Property="Background" TargetName="checkBoxBorder" Value="{StaticResource OptionMark.MouseOver.Background}"/>
								<Setter Property="BorderBrush" TargetName="checkBoxBorder" Value="{StaticResource OptionMark.MouseOver.Border}"/>
								<Setter Property="Fill" TargetName="optionMark" Value="{StaticResource OptionMark.MouseOver.Glyph}"/>
								<Setter Property="Fill" TargetName="indeterminateMark" Value="{StaticResource OptionMark.MouseOver.Glyph}"/>
							</Trigger>
							<Trigger Property="IsEnabled" Value="false">
								<Setter Property="Background" TargetName="checkBoxBorder" Value="{StaticResource OptionMark.Disabled.Background}"/>
								<Setter Property="BorderBrush" TargetName="checkBoxBorder" Value="{StaticResource OptionMark.Disabled.Border}"/>
								<Setter Property="Fill" TargetName="optionMark" Value="{StaticResource OptionMark.Disabled.Glyph}"/>
								<Setter Property="Fill" TargetName="indeterminateMark" Value="{StaticResource OptionMark.Disabled.Glyph}"/>
							</Trigger>
							<Trigger Property="IsPressed" Value="true">
								<Setter Property="Background" TargetName="checkBoxBorder" Value="{StaticResource OptionMark.Pressed.Background}"/>
								<Setter Property="BorderBrush" TargetName="checkBoxBorder" Value="{StaticResource OptionMark.Pressed.Border}"/>
								<Setter Property="Fill" TargetName="optionMark" Value="{StaticResource OptionMark.Pressed.Glyph}"/>
								<Setter Property="Fill" TargetName="indeterminateMark" Value="{StaticResource OptionMark.Pressed.Glyph}"/>
							</Trigger>
							<Trigger Property="IsChecked" Value="true">
								<Setter Property="Opacity" TargetName="optionMark" Value="1"/>
								<Setter Property="Opacity" TargetName="indeterminateMark" Value="0"/>
								<Setter Property="Background" TargetName="markGrid" Value="blue"/>
								<Setter Property="Fill" TargetName="optionMark" Value="white"/>
							</Trigger>
							<Trigger Property="IsChecked" Value="{x:Null}">
								<Setter Property="Opacity" TargetName="optionMark" Value="0"/>
								<Setter Property="Opacity" TargetName="indeterminateMark" Value="1"/>
							</Trigger>
						</ControlTemplate.Triggers>
					</ControlTemplate>
				</Setter.Value>
			</Setter>
		</Style>
	</Window.Resources>
    <StackPanel>
        <Grid Height="180">
        	<Grid.Background>
        		<ImageBrush ImageSource="bckpic.jpg"/>
        	</Grid.Background>
            <StackPanel Width="150" Height="30" HorizontalAlignment="Right" VerticalAlignment="Top">
                <loc:RigthButton HorizontalAlignment="Right"></loc:RigthButton>
            </StackPanel>
        </Grid>
        <StackPanel Height="150">
            <StackPanel Orientation="Horizontal" >
                <Border Height="80" Width="80" Margin="35,10,10,10" CornerRadius="5" BorderBrush="Gray" BorderThickness="1">
                    <Border.Background>
                        <ImageBrush ImageSource="touxiang1.jpg"/>
                    </Border.Background>
                </Border>
                <StackPanel Width="180" Height="89" Margin="10,10,0,0">
                    <Border BorderBrush="Gray" CornerRadius="5" BorderThickness="1">
                        <StackPanel Width="180" Height="60">
                            <TextBox Height="25" Width="180" Background="{x:Null}" BorderThickness="0,0,0,1" Margin="0,5,0,0" FontSize="14" Foreground="Gray">用户名</TextBox>
                            <TextBox Height="25" Width="180" Background="{x:Null}" BorderThickness="0" Margin="0,2,0,0" FontSize="14" Foreground="Gray">密码</TextBox>
                        </StackPanel>
                    </Border>
                   
                    <StackPanel Orientation="Horizontal" Height="15" Width="180" Margin="0,10,0,0">
                        <CheckBox Style="{DynamicResource CheckBoxStyle1}">记住密码</CheckBox>
                        <CheckBox Style="{DynamicResource CheckBoxStyle1}" Margin="42,0,0,0">自动登陆</CheckBox>
                    </StackPanel>

                </StackPanel>

                <StackPanel Height="60" Margin="15">
                    <TextBlock Height="30">
						<Hyperlink NavigateUri="http://zc.qq.com">注册账号</Hyperlink>
					</TextBlock>
                    <TextBlock Height="30">
						<Hyperlink NavigateUri="http://aq.qq.com/">找回密码</Hyperlink>
					</TextBlock>
                </StackPanel>

            </StackPanel>

            <Border Height="30" Width="180" Margin="20,5,0,0" CornerRadius="5" BorderBrush="#FF0E95F1" BorderThickness="1">
                <Button Height="30" FontWeight="Bold" Width="180" Content="登  陆" FontFamily="宋体" Foreground="White" Background="#FF0E95F1" BorderThickness="0" Style="{DynamicResource ButtonStyle1}"></Button>
            </Border>    
        </StackPanel>
    </StackPanel>
</Window>


posted on 2019-04-01 14:53 NET未来之路 阅读( ...) 评论( ...) 编辑 收藏

转载于:https://www.cnblogs.com/lonelyxmas/p/10636401.html

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值