.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
  • Dapr Outbox 執行流程
    Dapr Outbox 是1.12中的功能。 本文只介紹Dapr Outbox 執行流程，Dapr Outbox基本用法請閱讀官方文檔 。本文中appID=order-processor，topic=orders 本文前提知識：熟悉Dapr狀態管理、Dapr發佈訂閱和Outbox 模式。 Outbo ...
  • Advanced .Net Debugging 7：托管堆與垃圾收集
    引言 在前幾章我們深度講解了單元測試和集成測試的基礎知識，這一章我們來講解一下代碼覆蓋率,代碼覆蓋率是單元測試運行的度量值,覆蓋率通常以百分比表示，用於衡量代碼被測試覆蓋的程度，幫助開發人員評估測試用例的質量和代碼的健壯性。常見的覆蓋率包括語句覆蓋率（Line Coverage）、分支覆蓋率（Bra ...
  • C#S7.NET實現西門子PLCDB塊數據採集的完整步驟
    前言 本文介紹瞭如何使用S7.NET庫實現對西門子PLC DB塊數據的讀寫，記錄了使用電腦模擬，模擬PLC，自至完成測試的詳細流程，並重點介紹了在這個過程中的易錯點，供參考。 用到的軟體： 1.Windows環境下鏈路層網路訪問的行業標準工具（WinPcap_4_1_3.exe）下載鏈接：http ...
  • WPF控制項：密碼框綁定MVVM
    從依賴倒置原則（Dependency Inversion Principle, DIP）到控制反轉（Inversion of Control, IoC）再到依賴註入（Dependency Injection, DI）的演進過程，我們可以理解為一種逐步抽象和解耦的設計思想。這種思想在C#等面向對象的編 ...
  • Python中的私有屬性與私有方法
    關於Python中的私有屬性和私有方法 Python對於類的成員沒有嚴格的訪問控制限制，這與其他面相對對象語言有區別。關於私有屬性和私有方法，有如下要點： 1、通常我們約定，兩個下劃線開頭的屬性是私有的（private）。其他為公共的（public）； 2、類內部可以訪問私有屬性（方法）； 3、類外 ...
  • C++ 訪問說明符詳解：封裝數據，控制訪問，提升安全性
    C++ 訪問說明符 訪問說明符是 C++ 中控制類成員（屬性和方法）可訪問性的關鍵字。它們用於封裝類數據並保護其免受意外修改或濫用。 三種訪問說明符： public：允許從類外部的任何地方訪問成員。 private：僅允許在類內部訪問成員。 protected：允許在類內部及其派生類中訪問成員。 示 ...
  • static_cast與dynamic_cast到底是什麼？
    寫這個隨筆說一下C++的static_cast和dynamic_cast用在子類與父類的指針轉換時的一些事宜。首先，【static_cast，dynamic_cast】【父類指針，子類指針】，兩兩一組，共有4種組合：用 static_cast 父類轉子類、用 static_cast 子類轉父類、使用 ...
  • C語言數據結構：雙向鏈表的增刪操作
    /******************************************************************************************************** * * * 設計雙向鏈表的介面 * * * * Copyright (c) 2023-2 ...
  • @ComponentScan註解的實現，Spring掃描包的過程
    相信接觸過spring做開發的小伙伴們一定使用過@ComponentScan註解 @ComponentScan("com.wangm.lifecycle") public class AppConfig { } @ComponentScan指定basePackage，將包下的類按照一定規則註冊成Be ...
  • opensips開啟python支持
    操作系統 ：CentOS 7.6_x64 opensips版本： 2.4.9 python版本：2.7.5 python作為腳本語言，使用起來很方便，查了下opensips的文檔，支持使用python腳本寫邏輯代碼。今天整理下CentOS7環境下opensips2.4.9的python模塊筆記及使用 ...
所有分類