天天看點
傳回

.NET CORE(C#) WPF 友善的實作使用者控件切換（祝大家新年快樂）

微信公衆号：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 的微信公衆号，本站會及時推送最新技術文章

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

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

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

時間如流水，隻能流去不流回。

WPF c#
上一篇: 方法一：使用rocketmq-spring-boot-starter來配置、發送和消費RocketMQ消息
下一篇: C# WPF 一個設計界面

繼續閱讀