マイクロチャンネル公共数:Dotnet9、ウェブサイト:Dotnet9、質問や提案:してくださいウェブサイトのメッセージ、
あなたに役立つ場合:歓迎感謝。
.NET CORE(C#)WPFメニュー引き出し
読むナビ
- 本論文の背景
- コードの実装
- 参考記事
- ソース
1.この背景
引き出しメニューで簡単なアニメーションを使用します
2.コードの実装
使用.NET CORE 3.1テンプレート「AnimatedColorfulMenu」と呼ばれるWPFプロジェクトを作成し、Nugetライブラリを追加する:MaterialDesignThemes、最新プレビュー版は3.1.0-ci948です。
メインソリューションファイルディレクトリ編成:
- AnimatedColorfulMenu
- App.xaml
- MainWindow.xaml
2.1紹介のスタイル
]ノードApplication.Resourcesの[ファイル] App.xaml、ビューMainWindow.xamlでStartupUriに起動するように設定]、および増加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コードずっと、主に、メニューの左側を参照してください開始、-150場所の左ペインのメニュー表示するには、メニューをクリックして展開し、ディスプレイの左ペインでゆっくりとレンダリング、簡単なアニメーションを使用し、ソースとして、次のとおりです。
<Window x:Class="AnimatedColorfulMenu.MainWindow"
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:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
mc:Ignorable="d" Height="600" Width="1080" ResizeMode="NoResize"
WindowStartupLocation="CenterScreen" WindowStyle="None">
<Window.Resources>
<Storyboard x:Key="CloseMenu">
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" Storyboard.TargetName="GridMenu">
<EasingDoubleKeyFrame KeyTime="0" Value="150"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="0"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="GridBackground">
<EasingDoubleKeyFrame KeyTime="0" Value="1"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="0"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Key="OpenMenu">
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" Storyboard.TargetName="GridMenu">
<EasingDoubleKeyFrame KeyTime="0" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="150"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="GridBackground">
<EasingDoubleKeyFrame KeyTime="0" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="1"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</Window.Resources>
<Window.Triggers>
<EventTrigger RoutedEvent="ButtonBase.Click" SourceName="ButtonClose">
<BeginStoryboard x:Name="CloseMenu_BeginStoryboard" Storyboard="{StaticResource CloseMenu}"/>
</EventTrigger>
<EventTrigger RoutedEvent="ButtonBase.Click" SourceName="ButtonOpen">
<BeginStoryboard Storyboard="{StaticResource OpenMenu}"/>
</EventTrigger>
</Window.Triggers>
<Grid>
<Grid x:Name="GridBackground" Background="#55313131" Opacity="0"/>
<Button x:Name="ButtonOpen" HorizontalAlignment="Left" VerticalAlignment="Top" Background="{x:Null}" BorderBrush="{x:Null}" Width="30" Height="30" Padding="0">
<materialDesign:PackIcon Kind="Menu" Foreground="#FF313131"/>
</Button>
<!--左侧抽屉菜单,默认在显示窗体之外,点击菜单图标再通过简单的动画呈现出来-->
<Grid x:Name="GridMenu" Width="150" HorizontalAlignment="Left" Margin="-150 0 0 0" Background="White" RenderTransformOrigin="0.5,0.5">
<Grid.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform/>
<TranslateTransform/>
</TransformGroup>
</Grid.RenderTransform>
<StackPanel>
<Image Height="140" Source="https://img.dotnet9.com/logo-foot.png" Stretch="Fill"/>
<ListView Foreground="#FF313131" FontFamily="Champagne & Limousines" FontSize="18">
<ListViewItem Height="45" Padding="0">
<StackPanel Orientation="Horizontal" Margin="10 0">
<materialDesign:PackIcon Kind="Recycle" Width="20" Height="20" Foreground="Gray" Margin="5" VerticalAlignment="Center"/>
<TextBlock Text="回收" Margin="10"/>
</StackPanel>
</ListViewItem>
<ListViewItem Height="45" Padding="0">
<StackPanel Orientation="Horizontal" Margin="10 0">
<materialDesign:PackIcon Kind="HelpCircleOutline" Width="20" Height="20" Foreground="#FFF08033" Margin="5" VerticalAlignment="Center"/>
<TextBlock Text="帮助" Margin="10"/>
</StackPanel>
</ListViewItem>
<ListViewItem Height="45" Padding="0">
<StackPanel Orientation="Horizontal" Margin="10 0">
<materialDesign:PackIcon Kind="Lightbulb" Width="20" Height="20" Foreground="Green" Margin="5" VerticalAlignment="Center"/>
<TextBlock Text="发送反馈" Margin="10"/>
</StackPanel>
</ListViewItem>
<ListViewItem Height="45" Padding="0">
<StackPanel Orientation="Horizontal" Margin="10 0">
<materialDesign:PackIcon Kind="Heart" Width="20" Height="20" Foreground="#FFD41515" Margin="5" VerticalAlignment="Center"/>
<TextBlock Text="推荐" Margin="10"/>
</StackPanel>
</ListViewItem>
<ListViewItem Height="45" Padding="0">
<StackPanel Orientation="Horizontal" Margin="10 0">
<materialDesign:PackIcon Kind="StarCircle" Width="20" Height="20" Foreground="#FFE6A701" Margin="5" VerticalAlignment="Center"/>
<TextBlock Text="溢价认购" Margin="10"/>
</StackPanel>
</ListViewItem>
<ListViewItem Height="45" Padding="0">
<StackPanel Orientation="Horizontal" Margin="10 0">
<materialDesign:PackIcon Kind="Settings" Width="20" Height="20" Foreground="#FF0069C1" Margin="5" VerticalAlignment="Center"/>
<TextBlock Text="设置" Margin="10"/>
</StackPanel>
</ListViewItem>
</ListView>
</StackPanel>
<Button x:Name="ButtonClose" HorizontalAlignment="Right" VerticalAlignment="Top" Background="{x:Null}" Foreground="#CCC" BorderBrush="{x:Null}" Width="30" Height="30" Padding="0">
<materialDesign:PackIcon Kind="Close"/>
</Button>
</Grid>
</Grid>
</Window>
3.参考記事
- ビデオ:C#WPF材料設計UI:アニメーションカラフルナビゲーションドロワー、一致するソース:AnimatedColorfulMenu。
- C#WPFのオープンソースコントロールライブラリ「MaterialDesignInXAML」
4.ソース
実装コードは、すべてのテキストで指定されているレンダリングは、組織を実行するために、直接コピー、プレスソリューション・カタログコードファイルすることができます。
注記がある場合を除き、による記事Dotnet9仕上げリリース、転載を歓迎します。
:アドレスを指定してくださいこの記事を転載https://dotnet9.com/7397.html
マイクロチャネル公共数での注目Dotnet9 Fanger魏コードスキャンを歓迎し、このサイトは、速やかに最新の技術をプッシュします
時間は水のようなものです、あなたは流れに戻って行くことができません!
クリックして「を[ オリジナルを読む ]」、このサイトだけでなく、より多くの技術記事など、よりああ!!!
私のために現時点では、「[への道を指すように見て ]」これらの日?