少量代碼設計一個登錄界面（二） – .NET CORE(C#) WPF開發

微信公眾號：Dotnet9，網站：Dotnet9，問題或建議：請網站留言， 如果對您有所幫助：歡迎讚賞。

閱讀導航

1. 本文背景
2. 代碼實現
3. 本文參考
4. 源碼

1. 本文背景

同上篇文章《少量代碼設計一個登錄界面》，本篇介紹另一種登錄界面設計風格。

2. 代碼實現

使用 .NET CORE 3.1 創建名為 “Login” 的WPF模板項目，添加1個Nuget庫：MaterialDesignThemes.3.1.0-ci981。

解決方案主要文件目錄組織結構：

• Login
• App.xaml
• MainWindow.xaml
• MainWindow.xaml.cs

2.1 App.xaml文件引入樣式

文件【App.xaml】，在 StartupUri 中設置啟動的視圖【MainWindow.xaml】，並在【Application.Resources】節點增加 MaterialDesignThemes庫的樣式文件：

<code><application>             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             StartupUri="MainWindow.xaml">
    <application.resources>
        <resourcedictionary>
            <resourcedictionary.mergeddictionaries>
                <resourcedictionary>
                <resourcedictionary>
                <resourcedictionary>
                <resourcedictionary>
            /<resourcedictionary.mergeddictionaries>
        /<resourcedictionary>
    /<application.resources>
/<application>/<code>

2.2 MainWindow.xaml 登錄窗體

文件【MainWindow.xaml】，設計登錄主界面，代碼量很小，源碼如下：

<code><window>        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:Ignorable="d"
        Title="Login" Height="400" Width="600" ResizeMode="NoResize" WindowStyle="None"
        AllowsTransparency="True" Background="Transparent" WindowStartupLocation="CenterScreen"
        MouseLeftButtonDown="MoveWindow_MouseLeftButtonDown">

    <grid>
        <rectangle>
        <rectangle>
            <rectangle.fill>
                <lineargradientbrush>
                    <gradientstop>
                    <gradientstop>
                    <gradientstop>
                /<lineargradientbrush>
            /<rectangle.fill>
        /<rectangle>
        <stackpanel>
            <label>
            <stackpanel>
                <textblock>/<textblock>
                <textblock>/<textblock>
            /<stackpanel>
            <textblock>/<textblock>
            <stackpanel>
                <packicon>
                <textbox>
            /<stackpanel>
            <stackpanel>
                <packicon>
                <passwordbox>
            /<stackpanel>
            <grid>
                <checkbox>
                <label>
            /<grid>
            <button>
            <stackpanel>
                <label>
                <button>
                    <packicon> 

                /<button>
                <button>
                    <packicon>
                /<button>
                <button>
                    <packicon>
                /<button>
            /<stackpanel>
        /<stackpanel>
        <button>                Click="CloseWindow_Click">
            <packicon>
        /<button>
        <stackpanel>
            <textblock>
            <textblock>
            <textblock>
        /<stackpanel>
    /<grid>
/<window>/<code>

下面是後臺代碼：文件【MainWindow.xaml.cs】，關閉窗體、窗體移動等事件處理。

<code>using System.Windows;
using System.Windows.Input;

namespace Login
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// /<summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }

        private void CloseWindow_Click(object sender, RoutedEventArgs e)
        {
            this.Close();
        }

        private void MoveWindow_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
        {
            DragMove();
        }
    }
}/<code> 

3.本文參考

1. 視頻一：C# WPF Material Design UI: Login Window，配套源碼：Login1。
2. C# WPF開源控件庫《MaterialDesignInXAML》

4.源碼

演示代碼已全部奉上，為了方便演示，代碼中的圖片使用本站外鏈，代碼可直接拷貝並按代碼結構組織編譯即可運行。

除非註明，文章均由 Dotnet9 整理發佈，歡迎轉載。

轉載請註明本文地址：https://dotnet9.com/8091.html

歡迎掃描下方二維碼關注 Dotnet9 的微信公眾號，本站會及時推送最新技術文章

時間如流水，只能流去不流回！

閱讀更多 沙漠盡頭的狼 的文章

關鍵字: 設計 XAML