C#WPF实战出真汁03--登录界面设计

发布于：2025-08-16 ⋅ 阅读:(21) ⋅ 点赞:(0)

1、登录界面设计要点

简洁直观的布局
登录界面应避免复杂元素，突出核心功能。通常包含用户名/邮箱输入框、密码输入框、登录按钮及可选功能（如“记住我”“忘记密码”）。保持表单字段不超过5个，减少用户认知负担。

清晰的视觉层次
通过尺寸、颜色对比区分主次操作。登录按钮使用高对比色（如蓝色或绿色），次要操作（如注册链接）采用低调设计。错误提示需醒目但友好，避免仅用红色文字，可搭配图标辅助说明。

响应式与无障碍设计
确保界面适配不同设备，输入框尺寸足够大（最小48x48px便于触控）。 密码输入框需提供“显示/隐藏”切换功能，提升可用性。

情感化微交互
登录成功时使用短暂动画（如勾选图标+渐变跳转），失败时通过微震动提示错误字段。加载状态显示进度条或骨架屏，避免静态“加载中”文字。

2、WPF 登录界面设计 

布局与控件选择
使用 Grid 或 StackPanel 布局，包含以下控件：

  • TextBox 用于用户名输入（可添加 Watermark 提示）。
  • PasswordBox 用于密码输入（隐藏明文）。
  • CheckBox 可选“记住密码”功能。
  • Button 提交登录（绑定命令或事件）。
  • 超链接控件（如“忘记密码”或“注册”）。

样式与美观性

  • 使用 Border 和 CornerRadius 实现圆角输入框。
  • 应用 LinearGradientBrush 实现背景渐变。
  • 图标集成：通过 Image 控件添加用户/密码图标。
  • 响应式设计：通过 ViewBox 或 RelativePanel 适配不同窗口尺寸。

数据绑定与验证

  • 使用 INotifyPropertyChanged 实现双向绑定（如用户名/密码属性）。
  • 输入验证：通过 IDataErrorInfo 或 ValidationRule 检查空输入或格式错误。
  • 错误提示：用 ToolTip 或 TextBlock 显示验证消息。

3、UI界面设计

完成代码如下，这就不每行代码解析了：

<pu:WindowX
    x:Class="HQ.fResApp.LoginWindow"
    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:local="clr-namespace:HQ.fResApp"
    xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:pu="clr-namespace:Panuon.UI.Silver;assembly=Panuon.UI.Silver"
    Title=""
    Width="800"
    Height="450"
    pu:WindowXCaption.Header=" "
    pu:WindowXCaption.HideBasicButtons="True"
    BorderThickness="0"
    Loaded="WindowX_Loaded"
    MouseLeftButtonDown="MoveWindow_MouseLeftButtonDown"
    ResizeMode="NoResize"
    WindowStartupLocation="CenterScreen"
    mc:Ignorable="d">
    <Window.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Light.xaml" />
                <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Defaults.xaml" />
                <ResourceDictionary Source="pack://application:,,,/MaterialDesignColors;component/Themes/Recommended/Primary/MaterialDesignColor.DeepPurple.xaml" />
                <ResourceDictionary Source="pack://application:,,,/MaterialDesignColors;component/Themes/Recommended/Accent/MaterialDesignColor.Lime.xaml" />
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Window.Resources>
    <Grid>
        <Grid x:Name="signBlock">
            <Grid.ColumnDefinitions>
                <ColumnDefinition />
                <ColumnDefinition Width="350" />
            </Grid.ColumnDefinitions>
            <StackPanel Margin="20,-35,0,0">
                <Label
                    Margin="0,10"
                    HorizontalAlignment="Left"
                    VerticalAlignment="Top"
                    Content="用户登录"
                    FontFamily="Segoe UI Black"
                    FontSize="20"
                    Foreground="#2F4056" />
                <StackPanel Margin="0,45,0,0" Orientation="Horizontal">
                    <materialDesign:PackIcon
                        Width="30"
                        Height="30"
                        VerticalAlignment="Center"
                        Foreground="#cccccc"
                        Kind="Account" />
                    <TextBox
                        x:Name="txtUName"
                        Width="350"
                        Margin="5"
                        Padding="5,0,5,0"
                        materialDesign:HintAssist.Foreground="#cccccc"
                        materialDesign:HintAssist.Hint="输入您的登录账号"
                        FontSize="15" />
                </StackPanel>
                <StackPanel Margin="0,33,0,0" Orientation="Horizontal">
                    <materialDesign:PackIcon
                        Width="30"
                        Height="30"
                        VerticalAlignment="Center"
                        Foreground="#cccccc"
                        Kind="Lock" />
                    <PasswordBox
                        x:Name="txtUPwd"
                        Width="350"
                        Margin="5"
                        Padding="5,0,5,0"
                        materialDesign:HintAssist.Hint="输入您的登录密码"
                        FontSize="15" />
                </StackPanel>
                <Button
                    Width="150"
                    Height="50"
                    Margin="-160,50,10,0"
                    HorizontalAlignment="Center"
                    materialDesign:ButtonAssist.CornerRadius="25"
                    materialDesign:ShadowAssist.ShadowDepth="Depth2"
                    Background="#5863f9"
                    BorderBrush="#5863f9"
                    Content="登录"
                    FontFamily="Impact"
                    FontSize="18"
                    IsDefault="True" />
                <Button
                    Width="150"
                    Height="50"
                    Margin="230,-50,10,0"
                    HorizontalAlignment="Center"
                    materialDesign:ButtonAssist.CornerRadius="25"
                    materialDesign:ShadowAssist.ShadowDepth="Depth2"
                    Background="#5863f9"
                    BorderBrush="#5863f9"
                    Click="CloseWindow_Click"
                    Content="退出"
                    FontFamily="Impact"
                    FontSize="18"
                    IsDefault="True" />
                <Grid Margin="0,50,20,0">
                    <CheckBox
                        x:Name="chkRemember"
                        Margin="5,10"
                        VerticalAlignment="Center"
                        Content="记住密码"
                        Cursor="Hand"
                        FontSize="14"
                        Foreground="#707070" />
                    <TextBlock
                        Margin="10"
                        HorizontalAlignment="Right"
                        VerticalAlignment="Center"
                        Cursor="Hand"
                        FontSize="14"
                        Foreground="#5863f9">
                        <Hyperlink
                            x:Name="btnForget"
                            Click="BtnForget_Click"
                            Foreground="#5863f9">
                            忘记密码？
                        </Hyperlink>
                    </TextBlock>
                </Grid>
            </StackPanel>
            <StackPanel
                Grid.Column="1"
                Margin="0,-13,0,0"
                Background="#5863f9"
                Orientation="Vertical">
                <Button
                    Padding="10"
                    HorizontalAlignment="Right"
                    VerticalAlignment="Top"
                    Background="{x:Null}"
                    BorderBrush="{x:Null}"
                    Click="CloseWindow_Click"
                    Cursor="Hand"
                    ToolTip="关闭">
                    <materialDesign:PackIcon Kind="Close" />
                </Button>
                <StackPanel Margin="0,50,0,0">
                    <TextBlock
                        HorizontalAlignment="Center"
                        FontFamily="Champagne &amp; Limousines"
                        FontSize="48"
                        FontWeight="Bold"
                        Foreground="White"
                        Text="蜀味正道" />
                    <TextBlock
                        Width="280"
                        Margin="0,50,0,0"
                        HorizontalAlignment="Center"
                        FontFamily="Champagne &amp; Limousines"
                        FontSize="22"
                        Foreground="White"
                        Text="蜀味正道，您的专属管家！"
                        TextAlignment="Center"
                        TextWrapping="Wrap" />
                </StackPanel>
                <StackPanel Margin="30,100,0,0" Orientation="Vertical">
                    <StackPanel Orientation="Horizontal">
                        <Label
                            Margin="10,0,0,0"
                            VerticalAlignment="Center"
                            Content="业务咨询："
                            FontSize="15"
                            Foreground="#F0F0F0" />
                        <TextBlock
                            x:Name="linkTel"
                            VerticalAlignment="Center"
                            FontFamily="Champagne &amp; Limousines"
                            FontSize="15"
                            Foreground="#F0F0F0"
                            TextAlignment="Center"
                            TextWrapping="Wrap" />
                    </StackPanel>
                    <StackPanel Orientation="Horizontal">
                        <Label
                            Margin="10,0,0,0"
                            VerticalAlignment="Center"
                            Content="邮箱地址："
                            FontSize="15"
                            Foreground="#F0F0F0" />
                        <TextBlock
                            x:Name="linkEmal"
                            VerticalAlignment="Center"
                            FontFamily="Champagne &amp; Limousines"
                            FontSize="15"
                            Foreground="#F0F0F0"
                            TextAlignment="Center"
                            TextWrapping="Wrap" />
                    </StackPanel>
                    <StackPanel Orientation="Horizontal">
                        <Label
                            Margin="10,0,0,0"
                            VerticalAlignment="Center"
                            Content="公司官网："
                            FontSize="15"
                            Foreground="#F0F0F0" />
                        <TextBlock
                            VerticalAlignment="Center"
                            FontFamily="Champagne &amp; Limousines"
                            FontSize="15"
                            Foreground="#F0F0F0"
                            TextAlignment="Center"
                            TextWrapping="Wrap">
                            <Hyperlink
                                x:Name="LinkWeb"
                                Click="LinkWeb_Click"
                                Foreground="#F0F0F0">
                                <TextBlock x:Name="LinkWebTxt" />
                            </Hyperlink>
                        </TextBlock>
                    </StackPanel>
                </StackPanel>
            </StackPanel>
        </Grid>
    </Grid>
</pu:WindowX>

4、后台业务逻辑代码 

原创不易，打字截图不易，走过路过，不要错过，欢迎点赞，收藏，转载，复制，抄袭，留言，动动你的金手指，早日实现财务自由！

网站公告

今日签到

点亮在社区的每一天
去签到

热门文章

最新发布