wpf仿qq登陆UI界面(DMSkin入门级示例)

【实例截图】

【核心代码】

<DMSkin:DMSkinWindow x:Class="QQL.MainWindow"
        xmlns:DMSkin="clr-namespace:DMSkin.WPF.Small;assembly=DMSkin.WPF.Small"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:QQL"
        xmlns:gif="http://wpfanimatedgif.codeplex.com"
        mc:Ignorable="d" MouseDown="Window_MouseDown"   WindowStyle="None" BorderThickness="20"
        Title="MainWindow" Height="372" Width="472" 
Foreground="White"
Background="Transparent"
DMShowMin="True"
DMShowMax="False" 
DMShowClose="True" 
DMWindowShadowSize="10" 
DMWindowShadowColor="#FF999999" 
DMSystemButtonSize="30"     
DMSystemButtonForeground="#ffffffff" 
DMSystemButtonHoverColor="#33000000" 
DMSystemButtonHoverForeground="White"
DMSystemButtonCloseHoverColor="Red"
DMSystemButtonShadowEffect="0"
ResizeMode="CanMinimize"
WindowStartupLocation="CenterScreen">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="182"></RowDefinition>
            <RowDefinition></RowDefinition>
        </Grid.RowDefinitions>
        <Border>
            <Grid>
                <Border>
                    <Image gif:ImageBehavior.AnimatedSource="Images/back.gif" Stretch="Fill"  />
                </Border>
                <Image Source="Images/logo-banner.png" Stretch="None" VerticalAlignment="Center" HorizontalAlignment="Center" Margin="0,15,0,0"></Image>
                <Border Background="#00FFFFFF"></Border>
                <TextBlock Margin="0,9,70,0"  FontFamily="{StaticResource IconFont}" 
                Text="&#xe971;" VerticalAlignment="Top" HorizontalAlignment="Right"  FontSize="12"/>
            </Grid>
        </Border>
        <Border Grid.Row="1"  Background="#FFEBF2F9" CornerRadius="0,0,3,3">
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="130"></ColumnDefinition>
                    <ColumnDefinition></ColumnDefinition>
                    <ColumnDefinition Width="100"></ColumnDefinition>
                </Grid.ColumnDefinitions>
                <Grid>
                    <Ellipse Width="80" Height="80" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="42,12,0,0">
                        <Ellipse.Fill>
                            <ImageBrush ImageSource="jacket.jpg"/>
                        </Ellipse.Fill>
                    </Ellipse>
                    <Button FontFamily="{StaticResource IconFont}" Margin="5,0,0,5" Content="&#xe62a;" FontSize="25" HorizontalAlignment="Left" VerticalAlignment="Bottom" Style="{DynamicResource ButtonStyle1}"></Button>
                </Grid>
                <Grid Grid.Column="1">
                    <Grid.RowDefinitions>
                        <RowDefinition></RowDefinition>
                        <RowDefinition Height="20"></RowDefinition>
                        <RowDefinition Height="55"></RowDefinition>
                    </Grid.RowDefinitions>
                    <Border Background="White" Grid.Row="0" Width="195" Height="60" BorderThickness="1" BorderBrush="#FFD1D1D1" CornerRadius="3" VerticalAlignment="Bottom">
                        <Grid>
                            <Border VerticalAlignment="Center" Background="#FFD1D1D1" Height="1"></Border>
                            <TextBox Text="944095635" BorderThickness="0"  Margin="6,5,16,0" VerticalAlignment="Top" Height="20" VerticalContentAlignment="Center" ></TextBox>
                            <TextBlock Margin="0,9,7,0"  FontFamily="{StaticResource IconFont}" Text="&#xe971;" VerticalAlignment="Top" HorizontalAlignment="Right" Foreground="#FFB4B4B4" FontSize="12"/>
                            <PasswordBox Password="********" BorderThickness="0"  Margin="6,0,6,5" VerticalAlignment="Bottom" Height="20" VerticalContentAlignment="Center" ></PasswordBox>
                            <TextBlock Margin="0,0,5,6"  FontFamily="{StaticResource IconFont}" Text="&#xe671;" VerticalAlignment="Bottom" HorizontalAlignment="Right" Foreground="#FFB4B4B4" FontSize="16"/>
                        </Grid>
                    </Border>
                    <Grid Grid.Row="1" VerticalAlignment="Center" Margin="2,3,2,0">
                        <CheckBox Style="{StaticResource QQCheckBox}" Content="记住密码" HorizontalAlignment="Left" IsChecked="True"></CheckBox>
                        <CheckBox Style="{StaticResource QQCheckBox}" Content="自动登录" HorizontalAlignment="Right"></CheckBox>
                    </Grid>
                    <Button Grid.Row="2" Content="登  录" Width="195" Height="32" Style="{DynamicResource ButtonStyle3}" Background="#FF00B2DE" ></Button>
                </Grid>
                <Grid Grid.Column="2">
                    <StackPanel Margin="0,9,35,0">
                        <Button  Margin="8" Content="注册账号"  HorizontalAlignment="Left" VerticalAlignment="Bottom" Style="{DynamicResource ButtonStyle2}"></Button>
                        <Button  Margin="8" Content="找回密码"  HorizontalAlignment="Left" VerticalAlignment="Bottom" Style="{DynamicResource ButtonStyle2}"></Button>
                    </StackPanel>
                    <Button  Margin="0,0,5,5"  Style="{StaticResource CodeButton}" HorizontalAlignment="Right" VerticalAlignment="Bottom" ></Button>
                </Grid>
            </Grid>
        </Border>
    </Grid>
</DMSkin:DMSkinWindow>