時間如流水,只能流去不流回!
點贊再看,養成習慣,這是您給我創作的動力!
本文 Dotnet9 https://dotnet9.com 已收錄,站長樂於分享dotnet相關技術,比如Winform、WPF、ASP.NET Core等,亦有C++桌面相關的Qt Quick和Qt Widgets等,只分享自己熟悉的、自己會的。
一、先看效果:
二、本文背景
有網友給站長Dotnet9留言:“WPF中能否實現UWP中SplitView效果,即抽屜效果嗎?” Dotnet9記得國外開源C# WPF控件庫MaterialDesignInXaml中有這種效果,可以查看本站寫的推薦文章:MaterialDesignInXaml控件介紹,站長也是個喜歡碼磚的人,對代碼是很感興趣的,遂Google了一個YouTube視頻敲出本文實現的代碼,希望對他和您有用。
三、代碼實現
站長使用.Net Core 3.1創建的WPF工程,創建PopUpAndNav解決方案後,需要添加兩個Nuget庫:MaterialDesignThemes和MaterialDesignColors。
工程比較簡單,主要就是演示窗口MainWindow:
代碼不多,我就全部貼上代碼吧。
添加MaterialDesignInXaml樣式:App.xaml
<application> xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:PopUpAndNav"
StartupUri="MainWindow.xaml">
<application.resources>
<resourcedictionary>
<resourcedictionary.mergeddictionaries>
<resourcedictionary>
<resourcedictionary>
<resourcedictionary>
<resourcedictionary>
/<resourcedictionary.mergeddictionaries>
/<resourcedictionary>
/<application.resources>
/<application>
演示窗口MainWindow.xaml代碼,使用簡單的自定義窗口,看效果圖,有右上角的標題欄菜單及左上角的抽屜菜單:
<window> 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:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:PopUpAndNav"
xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
mc:Ignorable="d" Foreground="White"
Title="MainWindow" Height="600" Width="1080" ResizeMode="NoResize" WindowStartupLocation="CenterScreen" WindowStyle="None">
<window.resources>
<storyboard>
<doubleanimationusingkeyframes>
<easingdoublekeyframe>
<easingdoublekeyframe>
/<doubleanimationusingkeyframes>
/<storyboard>
<storyboard>
<doubleanimationusingkeyframes>
<easingdoublekeyframe>
<easingdoublekeyframe>
/<doubleanimationusingkeyframes>
/<storyboard>
/<window.resources>
<window.triggers>
<eventtrigger>
<beginstoryboard>
/<eventtrigger>
<eventtrigger>
<beginstoryboard>
/<eventtrigger>
/<window.triggers>
<grid>
<grid>
<textblock>
<stackpanel>
<textblock>
<popupbox>
<stackpanel>
<button>
<button>
<button>
<separator>
<button>
/<stackpanel>
/<popupbox>
/<stackpanel>
/<grid>
<grid>
<stackpanel>
<grid>
<button>
<packicon>
/<button>
<button>
<packicon>
/<button>
/<grid>
<listview>
<listviewitem>
<stackpanel>
<packicon>
<textblock>
/<stackpanel>
/<listviewitem>
<listviewitem>
<stackpanel>
<packicon>
<textblock>
/<stackpanel>
/<listviewitem>
<listviewitem>
<stackpanel>
<packicon>
<textblock>
/<stackpanel>
/<listviewitem>
<listviewitem>
<stackpanel>
<packicon>
<textblock>
/<stackpanel>
/<listviewitem>
<listviewitem>
<stackpanel>
<packicon>
<textblock>
/<stackpanel>
/<listviewitem>
/<listview>
/<stackpanel>
/<grid>
/<grid>
/<window>
後臺MainWindow.xaml.cs,主要是處理窗體關閉事件及抽屜菜單的展開與摺疊:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
namespace PopUpAndNav
{
/// <summary>
/// Interaction logic for MainWindow.xaml
/// /<summary>
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
}
private void ButtonPopUpLogout_Click(object sender, RoutedEventArgs e)
{
Application.Current.Shutdown();
}
private void ButtonOpenMenu_Click(object sender, RoutedEventArgs e)
{
ButtonOpenMenu.Visibility = Visibility.Collapsed;
ButtonCloseMenu.Visibility = Visibility.Visible;
}
private void ButtonCloseMenu_Click(object sender, RoutedEventArgs e)
{
ButtonOpenMenu.Visibility = Visibility.Visible;
ButtonCloseMenu.Visibility = Visibility.Collapsed;
}
private void GridTitle_MouseDown(object sender, MouseButtonEventArgs e)
{
DragMove();
}
}
}
四、文章參考
上面的代碼是Dotnet9看 Disign com WPF 大神視頻手敲的,下面是大神youtube地址及本實例學習視頻。
參考:
Design com WPF : https://www.youtube.com/watch?v=YQ1EJJZBHyE
閱讀更多 沙漠盡頭的狼 的文章