.NET CORE(C#) WPF 方便的實現用戶控制項切換（祝大家新年快樂）

来源:https://www.cnblogs.com/Dotnet9-com/archive/2020/01/24/12232669.html
-Advertisement-
Play Games

微信公眾號： "Dotnet9" ，網站： "Dotnet9" ，問題或建議： "請網站留言" ， 如果對您有所幫助： "歡迎贊賞" 。 .NET CORE(C ) WPF 方便的實現用戶控制項切換（祝大家新年快樂） 快到2020年了，祝大家新年快樂，今年2019最後一更，謝謝大家支持！ 閱讀導航 1 ...


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

.NET CORE(C#) WPF 方便的實現用戶控制項切換（祝大家新年快樂）

快到2020年了，祝大家新年快樂，今年2019最後一更，謝謝大家支持！

閱讀導航

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

1. 本文背景

一個系統主界面，放上一個菜單，點擊菜單在客戶區切換不同的展示界面，這是很常規的設計，見下麵展示效果圖：

動畫

左側一個菜單，點擊菜單，右側切換界面，界面切換動畫使用MD控制項的組件實現（自己使用動畫也能實現）。

2. 代碼實現

使用 .NET CORE 3.1 創建名為 “MenuChange” 的WPF模板項目，添加1個Nuget庫：MaterialDesignThemes，版本為最新預覽版3.1.0-ci948。

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

  • AnimatedMenu
    • App.xaml
    • MainWindow.xaml
      • MainWindow.xaml.cs
    • ..[數個演示模塊用戶控制項]

2.1 引入樣式

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

<Application.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.Blue.xaml" />
            <ResourceDictionary Source="pack://application:,,,/MaterialDesignColors;component/Themes/Recommended/Accent/MaterialDesignColor.Indigo.xaml" />
        </ResourceDictionary.MergedDictionaries>
    </ResourceDictionary>
</Application.Resources>

2.2 演示窗體

文件【MainWindow.xaml】，佈局代碼、動畫代碼都在此文件中，源碼如下：

<Window x:Class="MenuChange.MainWindow"
        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"
        Height="600" Width="1024" WindowStartupLocation="CenterScreen" ResizeMode="NoResize" WindowStyle="None" >
    <Grid Background="#FFEEEEEE" MouseDown="Grid_MouseDown">
        <StackPanel VerticalAlignment="Top">
            <Grid Background="#FF0069C0" Height="10"/>
            <Grid Margin="5">
                <StackPanel HorizontalAlignment="Center" Orientation="Horizontal">
                    <TextBlock Text="Dotnet9.com" VerticalAlignment="Center" FontSize="20" FontFamily="Champagne &amp; Limousines" Margin="20 0"/>
                    <Button Width="30" Height="30" Background="{x:Null}" BorderBrush="{x:Null}" Padding="0" Foreground="Gray">
                        <materialDesign:PackIcon Kind="Wechat"/>
                    </Button>
                    <Button Width="30" Height="30" Background="{x:Null}" BorderBrush="{x:Null}" Padding="0" Foreground="Gray">
                        <materialDesign:PackIcon Kind="Qqchat"/>
                    </Button>
                    <Button Width="30" Height="30" Background="{x:Null}" BorderBrush="{x:Null}" Padding="0" Foreground="Gray">
                        <materialDesign:PackIcon Kind="GithubBox"/>
                    </Button>
                </StackPanel>
                <StackPanel Orientation="Horizontal" HorizontalAlignment="Right" Margin="10 0">
                    <Button Width="30" Height="30" Background="{x:Null}" BorderBrush="{x:Null}" Padding="0" Foreground="Gray">
                        <materialDesign:PackIcon Kind="BellOutline"/>
                    </Button>
                    <Button Width="30" Height="30" Background="{x:Null}" BorderBrush="{x:Null}" Padding="0" Foreground="Gray" Margin="0 0 10 0">
                        <materialDesign:PackIcon Kind="Settings"/>
                    </Button>
                    <Button x:Name="ButtonFechar" Width="30" Height="30" Background="{x:Null}" BorderBrush="{x:Null}" Padding="0" Foreground="Gray" Click="ButtonFechar_Click">
                        <materialDesign:PackIcon Kind="Close"/>
                    </Button>
                </StackPanel>
            </Grid>
        </StackPanel>

        <Grid Margin="250 55 0 0">
            <Grid x:Name="GridPrincipal" HorizontalAlignment="Center" VerticalAlignment="Center"/>
        </Grid>

        <Grid Width="250" HorizontalAlignment="Left" Background="#FF222222">
            <materialDesign:TransitioningContent x:Name="TrainsitionigContentSlide" OpeningEffect="{materialDesign:TransitionEffect SlideInFromLeft, Duration=0:0:0.2}">
                <Grid x:Name="GridCursor" Margin="0 100 0 0" Background="#FF0069C0" Width="10" HorizontalAlignment="Left" Height="60" VerticalAlignment="Top"/>
            </materialDesign:TransitioningContent>
            <Image Source="https://img.dotnet9.com/logo-head.png" VerticalAlignment="Top"/>
            <Image Source="https://img.dotnet9.com/logo-foot.png" VerticalAlignment="Bottom"/>
            <ListView x:Name="ListViewMenu" Margin="0 100" Foreground="LightGray" FontFamily="Champagne &amp; Limousines" FontSize="18" SelectionChanged="ListViewMenu_SelectionChanged" SelectedIndex="0">
                <ListViewItem Height="60">
                    <StackPanel Orientation="Horizontal">
                        <materialDesign:PackIcon Kind="Home" Width="30" Height="30" VerticalAlignment="Center" Margin="5"/>
                        <TextBlock Text="首頁" FontSize="17" VerticalAlignment="Center" Margin="20 0"/>
                    </StackPanel>
                </ListViewItem>
                <ListViewItem Height="60">
                    <StackPanel Orientation="Horizontal">
                        <materialDesign:PackIcon Kind="LanguageCsharp" Width="30" Height="30" VerticalAlignment="Center" Margin="5"/>
                        <TextBlock Text="WPF" FontSize="17" VerticalAlignment="Center" Margin="20 0"/>
                    </StackPanel>
                </ListViewItem>
                <ListViewItem Height="60">
                    <StackPanel Orientation="Horizontal">
                        <materialDesign:PackIcon Kind="LanguageCsharp" Width="30" Height="30" VerticalAlignment="Center" Margin="5"/>
                        <TextBlock Text="Winform" FontSize="17" VerticalAlignment="Center" Margin="20 0"/>
                    </StackPanel>
                </ListViewItem>
                <ListViewItem Height="60">
                    <StackPanel Orientation="Horizontal">
                        <materialDesign:PackIcon Kind="LanguageCsharp" Width="30" Height="30" VerticalAlignment="Center" Margin="5"/>
                        <TextBlock Text="ASP.NET CORE" FontSize="17" VerticalAlignment="Center" Margin="20 0"/>
                    </StackPanel>
                </ListViewItem>
                <ListViewItem Height="60">
                    <StackPanel Orientation="Horizontal">
                        <materialDesign:PackIcon Kind="LanguageCsharp" Width="30" Height="30" VerticalAlignment="Center" Margin="5"/>
                        <TextBlock Text="Xamarin.Forms" FontSize="17" VerticalAlignment="Center" Margin="20 0"/>
                    </StackPanel>
                </ListViewItem>
                <ListViewItem Height="60">
                    <StackPanel Orientation="Horizontal">
                        <materialDesign:PackIcon Kind="LanguageCpp" Width="30" Height="30" VerticalAlignment="Center" Margin="5"/>
                        <TextBlock Text="C++" FontSize="17" VerticalAlignment="Center" Margin="20 0"/>
                    </StackPanel>
                </ListViewItem>
            </ListView>
        </Grid>

    </Grid>
</Window>

簡單說明下：

  1. "GridPrincipal" 作為客戶區子模塊界面容器，展示新界面時，先移除舊用戶控制項，再添加新用戶控制項（站長以前使用時，是遍歷容器中所有用戶界面，對非選擇用戶控制項作隱藏操作，然後添加新用戶控制項或者對已存在的被選擇用戶控制項作顯示操作）。
  2. 左側菜單項使用 "ListView" 進行佈局，實際開發需要運用模板，使用MVVM做成動態菜單，方便擴展。
  3. 右側切換的子模塊界面應該使用Prism或者其他框架（自已實現的模塊dll）實現的子界面，方便動態擴展（需要和左側菜單項進行關聯）。

文件【MainWindow.xaml.cs】，後臺關閉窗體、菜單點擊切換子模塊界面、窗體移動等事件處理：

using System.Windows;
using System.Windows.Controls;
using System.Windows.Input;

namespace MenuChange
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }
        private void ButtonFechar_Click(object sender, RoutedEventArgs e)
        {
            Application.Current.Shutdown();
        }

        private void Grid_MouseDown(object sender, MouseButtonEventArgs e)
        {
            DragMove();
        }

        private void ListViewMenu_SelectionChanged(object sender, SelectionChangedEventArgs e)
        {
            int index = ListViewMenu.SelectedIndex;
            MoveCursorMenu(index);

            switch (index)
            {
                case 0:
                    GridPrincipal.Children.Clear();
                    GridPrincipal.Children.Add(new UserControlMain());
                    break;
                case 1:
                    GridPrincipal.Children.Clear();
                    GridPrincipal.Children.Add(new UserControlWPF());
                    break;
                case 2:
                    GridPrincipal.Children.Clear();
                    GridPrincipal.Children.Add(new UserControlWinform());
                    break;
                case 3:
                    GridPrincipal.Children.Clear();
                    GridPrincipal.Children.Add(new UserControlASPNETCORE());
                    break;
                case 4:
                    GridPrincipal.Children.Clear();
                    GridPrincipal.Children.Add(new UserControlXamarinForms());
                    break;
                case 5:
                    GridPrincipal.Children.Clear();
                    GridPrincipal.Children.Add(new UserControlCPP());
                    break;
                default:
                    break;
            }
        }

        private void MoveCursorMenu(int index)
        {
            TrainsitionigContentSlide.OnApplyTemplate();
            GridCursor.Margin = new Thickness(0, (100 + (60 * index)), 0, 0);
        }
    }
}

方便演示，點擊菜單，切換子用戶控制項時時寫死的，見上面的說明，左側菜單及右側切換的子用戶控制項需要進行關聯配置，方便擴展，建議使用Prism的模塊化開發。

2.3 演示主模塊

文件【UserControlMain.xaml】，只展示其中一個子模塊用戶控制項吧，其他類似，文末有源碼、可運行Demo供下載參考。

註意： 需要使用MD控制項的 TransitioningContent 組件將用戶控制項可視區域包裹起來，用於使用MD的移動切換動畫，其中 OpeningEffect 見名思意，即是展示此用戶控制項時，動畫如何播放，見下麵代碼，SlideInFromLeft 是指示展示時由左向右緩動，相反 SlideInFromRight即是由右向左緩動，其他屬性可查閱MD官網或者Demo研究。

<UserControl x:Class="MenuChange.UserControlMain"
             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"
             Height="auto" Width="auto">
    <Grid>
        <materialDesign:TransitioningContent x:Name="TrainsitionigContentSlide" OpeningEffect="{materialDesign:TransitionEffect SlideInFromLeft, Duration=0:0:0.8}">
            <StackPanel Background="#33ff0000">
                <TextBox HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="30" Foreground="White" Text="https://dotnet9.com"/>
                <Image Source="https://img.dotnet9.com/20200124165746.png"/>
            </StackPanel>
        </materialDesign:TransitioningContent>
    </Grid>
</UserControl>

已奉上關鍵代碼，全部代碼文末有下載鏈接...

3.本文參考

  1. 視頻一：C# WPF Material Design UI: Fast Food Sales，配套源碼：Pizzaria1。
  2. C# WPF開源控制項庫《MaterialDesignInXAML》

4.源碼

站長方便演示，文中的圖片使用的本站外鏈圖片：

演示Demo下載

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

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

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

Dotnet9

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

點擊《【閱讀原文】》，本站還有更多技術類文章等著您哦！！！

此刻順便為我點個《【再看】》可好？


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 一、UML的基本概念
    為什麼用UML 項目需要,在項目開發實現前期進行框架技術設計（條條大路通羅馬通羅馬，畫圖或者寫代碼都可以，適合就可以！）。 用戶的交互我們通常用Axure（原型設計）體現, 框架和功能結構設計則用UML體現,清楚自已使用目的,是否有用仁者見仁智者見智。 A:方便業務設計交流，理清思路，統一的規範描述 ...
  • JDBC（二）
    1. PreparedStatement預編譯的語句對象 預編譯語句PreparedStatement 是java.sql中的一個介面，它是Statement的子介面。通過Statement對象執行SQL語句時，需要將SQL語句發送給DBMS，由 DBMS首先進行編譯後再執行。預編譯語句和State ...
  • Django框架(十)：視圖(三) Cookie、Session
    1. Cookie Cookie，有時也用其複數形式Cookies，指某些網站為了辨別用戶身份、進行session跟蹤而儲存在用戶本地終端上的數據（通常經過加密）。Cookie最早是網景公司的前雇員Lou Montulli在1993年3月的發明。Cookie是由伺服器端生成，發送給User-Agen ...
  • MySql主要性能指標說明
    在項目當中資料庫一般都會成為主要的性能與負載瓶頸，那麼針對資料庫各項性能指標的監控與對應的優化是開發與運維人員需要面對的主要工作，而且這部分的工作會貫穿項目從開發到運行的整個周期里。 這篇文章中我們對MySql資料庫中的幾個主要的性能指標的計算與統計進行下說明與總結。 在MySql中通過show g ...
  • 大數據開發環境需要的安裝包合集，親測沒問題
    大數據環境需要的安裝包合集，包括： apache flume 1.7.0 bin.tar.gz apache hive 1.2.1 bin.tar.gz hadoop 2.7.2.tar.gz hbase 1.3.1 bin.tar.gz jdk 8u144 linux x64.tar kafka_ ...
  • #《Essential C++》讀書筆記# 第一章 C++ 編程基礎
    前言 Stanley B.Lippman 先生所著的《C++ Primer》是學習C++的一本非常優秀的教科書，但《C++ Primer》作為一本大部頭書，顯然不適合所有的初學者。所以Lippman先生又返璞歸真地寫了這本短小輕薄的《Essentia C++》。這本書以簡短的章節篇幅，幫助初學者快速... ...
  • Java框架之MyBatis 06-全局配置-mapper映射-分步查詢
    MyBatis MyBatis是Apache的一個開源項目iBatis, iBatis一詞來源於“internet”和“abatis”的組合，是一個基於Java的持久層框架。 iBatis 提供的持久層框架包括SQL Maps和Data Access Objects（DAO） Mybatis 是一個 ...
  • Java對接微信公眾號模板消息推送
    內容有點多，請耐心！ 最近公司的有這個業務需求，又很湊巧讓我來完成： 首先想要對接，先要一個公眾號，再就是開發文檔了：https://developers.weixin.qq.com/doc/offiaccount/Getting_Started/Overview.html 不過請註意這一點 ok， ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類