WPF 登录界面记录

舟渊

已于 2024-07-11 14:13:06 修改

阅读量423

点赞数 11

文章标签： wpf ui

于 2024-02-22 14:32:27 首次发布

本文链接：https://blog.csdn.net/weixin_43623326/article/details/136233324

版权

界面：

<Window x:Class="Fasetto.Word.MainWindow"
        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:Fasetto.Word"
        mc:Ignorable="d"
        WindowStyle="None"
        AllowsTransparency="True"
        WindowStartupLocation="CenterScreen"
        x:Name="AppWindow"
        Icon="Images/logo2.jpeg"
        MinWidth="{Binding WindowMinNumWidth}"
        MinHeight="{Binding WindowMinNumHeight}"
        Title="Welcome friend!" Height="600" Width="900">
    <Window.Resources>
        <Style TargetType="{x:Type local:MainWindow}">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type Window}">
                        <Border  Padding="{Binding OuterMarginsizeThickness,FallbackValue=10}">
                            <Grid>
                                <Border x:Name="Container" 
                                        Background="{StaticResource BackgroundLightBrush}"
                                        CornerRadius="{Binding WindowCornerRadius,FallbackValue=10}"/>
                                <Border CornerRadius="{Binding WindowCornerRadius}" Background="{Binding ForegrounTophBrush,FallbackValue=White}">
                                    <Border.Effect>
                                        <DropShadowEffect ShadowDepth="0" Opacity="0.2"/>
                                    </Border.Effect>
                                </Border>

                                <Grid>
                                    <Grid.OpacityMask>
                                        <VisualBrush Visual="{Binding ElementName=Container}"/>
                                    </Grid.OpacityMask>

                                    <Grid.RowDefinitions>
                                        <RowDefinition Height="{Binding TitleHeightGridLength,FallbackValue=42}"/>
                                        <RowDefinition Height="Auto"/>
                                        <RowDefinition Height="*"/>
                                    </Grid.RowDefinitions>
                                    <Grid  Grid.Column="0" Panel.ZIndex="1">
                                        <Grid.ColumnDefinitions>
                                            <ColumnDefinition Width="Auto"/>
                                            <ColumnDefinition Width="*"/>
                                            <ColumnDefinition Width="Auto"/>
                                        </Grid.ColumnDefinitions>
                                        <!--Icon-->
                                        <Button Style="{StaticResource SystemIconButton}" Command="{Binding MenuComand}">
                                            <Image Source="/Images/logo2.jpeg"/>
                                        </Button>
                                        <!--Title-->
                                        <Viewbox Grid.Column="0" Grid.ColumnSpan="3" Margin="0">
                                            <!--<TextBlock  Style="{StaticResource HeaderText}" Text="{Binding RelativeSource={RelativeSource Mode=TemplatedParent},Path=Title,FallbackValue='WellCome,Friend!'}"/>-->
                                            <StackPanel>
                                                <TextBlock FontSize="{StaticResource FontSizeReguler}">
                                                    <Run Text="W" Foreground="{StaticResource workOrangeBrush}"/><Run Text="O" Foreground="{StaticResource workBlueBrush}"/><Run Text="R" Foreground="{StaticResource workRedBrush}"/><Run Text="D" Foreground="{StaticResource workGreenBrush}"/>
                                                </TextBlock>
                                                <TextBlock Text="by fasetto" Foreground="{StaticResource ForegroundDarkBrush}" HorizontalAlignment="Center" VerticalAlignment="Center"/>
                                            </StackPanel>
                                        </Viewbox>
                                        <!--Window Buttons-->
                                        <StackPanel Grid.Column="2" Orientation="Horizontal">
                                            <Button Command="{Binding MinimzeComand}" Style="{StaticResource WindowControlButton}" Content="_" />
                                            <Button Command="{Binding MaximzeComand}" Style="{StaticResource WindowControlButton}" Content="[]" />
                                            <Button Command="{Binding CloseComand}" Style="{StaticResource windowCloseButton}" Content="x" />
                                        </StackPanel>
                                    </Grid>

                                    <Border Grid.Row="2">
                                        <Frame x:Name="MainFrame" Content="{Binding CurrentPage,Converter={local:ApplicationPageValueConverter}}"/>
                                        <!--<Border.Background>
                                            <ImageBrush TileMode="Tile" ViewboxUnits="Absolute" Viewport="0 0 500 500" ImageSource="/Images/Login.jpg"/>
                                        </Border.Background>-->
                                    </Border>
                                </Grid>
                            </Grid>
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Window.Resources>

    <WindowChrome.WindowChrome>
        <WindowChrome
            ResizeBorderThickness="{Binding ResizeBorderThickness}"
            CaptionHeight="{Binding TitleHeight}"
            CornerRadius="0"
            GlassFrameThickness="0"
            />
    </WindowChrome.WindowChrome>

    <Grid Background="{StaticResource ForegroundLighBrush}">
        <Frame x:Name="MainFrame" Content="{Binding CurrentPage,Converter={local:ApplicationPageValueConverter}}"/>
    </Grid>
</Window>

<Page x:Class="Fasetto.Word.Page.LoginPageView"
      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" 
      xmlns:local="clr-namespace:Fasetto.Word.Page"
      mc:Ignorable="d" 
    d:DesignHeight="700" d:DesignWidth="700"
      Title="LoginPageView">
    <Border Background="{StaticResource workBlueBrush}">
        <Grid>
            <Grid.Background>
                <ImageBrush ImageSource="/Fasetto.Word;component/Images/背景2.jpg" TileMode="Tile" Viewport="0,0,500,500" ViewboxUnits="Absolute"/>
            </Grid.Background>

            <ScrollViewer VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Auto">
                <StackPanel
                    VerticalAlignment="Center"
                    HorizontalAlignment="Center"
                    TextBlock.TextAlignment="Center">

                    <Border Background="{StaticResource ForegroundLighBrush}" 
                            CornerRadius="10"
                            Padding="15 50 15 15"
                            Width="300"
                            Margin="50 50 50 50">

                        <StackPanel>
                            <TextBlock Text="Sign Up" FontSize="{StaticResource FontSizeLarge}" Foreground="{StaticResource workBlueBrush}"/>
                            <TextBlock Text="Is's about to get fun" FontSize="{StaticResource FontSizeReguler}" Foreground="{StaticResource ForegroundDarkBrush}"/>
                            <TextBox Tag="Emali"/>
                            <PasswordBox Tag="Password"/>

                            <Button Content="next" HorizontalAlignment="Center" />
                        </StackPanel>
                    </Border>
                    <Button Style="{StaticResource TextButton}" Content="I alreay have an account" HorizontalAlignment="Center" VerticalAlignment="Center"/>
                </StackPanel>
            </ScrollViewer>

        </Grid>
    </Border>
</Page>

样式:

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                    xmlns:local="clr-namespace:Fasetto.Word">

    <Style TargetType="{x:Type TextBlock}" x:Key="HeaderText" BasedOn="{StaticResource TextBlockStyle}">
        <Setter Property="Foreground" Value="{StaticResource ForegroundMainBrush}"/>
        <Setter Property="VerticalAlignment" Value="Center"/>
        <Setter Property="HorizontalAlignment" Value="Center"/>
        <Setter Property="Margin" Value="0 4"/>
    </Style>

    <Style  TargetType="{x:Type TextBox}" BasedOn="{StaticResource BaseStyle}">
        <Setter Property="FontSize" Value="{StaticResource FontSizeLarge}"/>
        <Setter Property="Padding" Value="10"/>
        <Setter Property="Margin" Value="0 5 0 5"/>
        <Setter Property="BorderBrush" Value="{StaticResource workBlueBrush}"/>
        <Setter Property="BorderThickness" Value="0 0 0 1"/>

        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type TextBoxBase}">

                    <Grid>
                        <Border x:Name="border" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" SnapsToDevicePixels="True">
                            <ScrollViewer x:Name="PART_ContentHost" Focusable="False" HorizontalScrollBarVisibility="Hidden" VerticalScrollBarVisibility="Hidden"/>
                        </Border>
                        <TextBlock IsHitTestVisible="False"
                                   Text="{TemplateBinding Tag}"
                                   x:Name="placeholder"
                                   Padding="{TemplateBinding Padding}"
                                   VerticalAlignment="Center"
                                   HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
                                   Foreground="{StaticResource ForegroundDarkBrush}">


                            <TextBlock.Style>
                                <Style TargetType="{x:Type TextBlock}">
                                    <Setter Property="Visibility" Value="Collapsed"/>
                                    <Style.Triggers>
                                        <DataTrigger Binding="{Binding Text,RelativeSource={RelativeSource TemplatedParent}}" Value="">
                                            <Setter Property="Visibility" Value="Visible"/>
                                        </DataTrigger>
                                    </Style.Triggers>
                                </Style>
                            </TextBlock.Style>
                        </TextBlock>
                    </Grid>


                    <ControlTemplate.Triggers>
                        <Trigger Property="IsEnabled" Value="False">
                            <Setter Property="Opacity" TargetName="border" Value="0.56"/>
                        </Trigger>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter Property="BorderBrush" TargetName="border" Value="#FF7EB4EA"/>
                        </Trigger>
                        <Trigger Property="IsKeyboardFocused" Value="True">
                            <Setter Property="BorderBrush" TargetName="border" Value="#FF569DE5"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <Style TargetType="PasswordBox">
        <Setter Property="FontSize" Value="{StaticResource FontSizeLarge}"/>
        <Setter Property="Padding" Value="10"/>
        <Setter Property="Margin" Value="0 5 0 5"/>
        <Setter Property="BorderBrush" Value="{StaticResource workBlueBrush}"/>
        <Setter Property="BorderThickness" Value="0 0 0 1"/>
        <Setter Property="local:PasswordBoxWaterMark.IsMonitoring" Value="true"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type PasswordBox}">
                    <Border x:Name="border" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" SnapsToDevicePixels="True">
                        <Grid>
                            <ScrollViewer x:Name="PART_ContentHost" Focusable="False" HorizontalScrollBarVisibility="Hidden" VerticalScrollBarVisibility="Hidden"/>
                            <TextBlock x:Name="WaterMark" 
                                       Focusable="False" 
                                       IsHitTestVisible="False"
                                       Visibility="Collapsed" 
                                       Text="{TemplateBinding Tag}" 
                                       Padding="{TemplateBinding Padding}"
                                       VerticalAlignment="Center"
                                       HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
                                       Foreground="{StaticResource ForegroundMainBrush}"
                                       Opacity="0.5"/>
                        </Grid>
                    </Border>
                    <ControlTemplate.Triggers>
                        <Trigger Property="local:PasswordBoxWaterMark.PasswordLength" Value="0">
                            <Setter TargetName="WaterMark" Property="Visibility" Value="Visible"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

</ResourceDictionary>

PasswordBox添加水印辅助类：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;

namespace Fasetto.Word
{
    /// <summary>
    /// PasswordBox添加水印辅助类
    /// </summary>
    public class PasswordBoxWaterMark : DependencyObject
    {
        public static bool GetIsMonitoring(DependencyObject obj)
        {
            return (bool)obj.GetValue(IsMonitoringProperty);
        }

        public static void SetIsMonitoring(DependencyObject obj, bool value)
        {
            obj.SetValue(IsMonitoringProperty, value);
        }

        public static readonly DependencyProperty IsMonitoringProperty =
            DependencyProperty.RegisterAttached("IsMonitoring", typeof(bool), typeof(PasswordBoxWaterMark), new UIPropertyMetadata(false, OnIsMonitoringChanged));



        public static int GetPasswordLength(DependencyObject obj)
        {
            return (int)obj.GetValue(PasswordLengthProperty);
        }

        public static void SetPasswordLength(DependencyObject obj, int value)
        {
            obj.SetValue(PasswordLengthProperty, value);
        }

        public static readonly DependencyProperty PasswordLengthProperty =
            DependencyProperty.RegisterAttached("PasswordLength", typeof(int), typeof(PasswordBoxWaterMark), new UIPropertyMetadata(0));

        private static void OnIsMonitoringChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
        {
            var pb = d as PasswordBox;
            if (pb == null)
            {
                return;
            }
            if ((bool)e.NewValue)
            {
                pb.PasswordChanged += PasswordChanged;
            }
            else
            {
                pb.PasswordChanged -= PasswordChanged;
            }
        }

        private static void PasswordChanged(object sender, RoutedEventArgs e)
        {
            var pb = sender as PasswordBox;
            if (pb == null)
            {
                return;
            }
            SetPasswordLength(pb, pb.Password.Length);
        }
    }
}