乡下人产国偷v产偷v自拍,国产午夜片在线观看,婷婷成人亚洲综合国产麻豆,久久综合给合久久狠狠狠9

  • <output id="e9wm2"></output>
    <s id="e9wm2"><nobr id="e9wm2"><ins id="e9wm2"></ins></nobr></s>

    • 分享

      .NET CORE(C#) WPF 值得推薦的動畫菜單設(shè)計

       丹楓無跡 2021-04-15

      微信公眾號:Dotnet9,網(wǎng)站:Dotnet9,問題或建議:請網(wǎng)站留言,
      如果對您有所幫助:歡迎贊賞。

      .NET CORE(C#) WPF 值得推薦的動畫菜單設(shè)計

      閱讀導(dǎo)航

      1. 本文背景
      2. 代碼實現(xiàn)
      3. 本文參考
      4. 源碼

      1. 本文背景

      YouTube上老外的一個設(shè)計,站長覺得不錯,分享給大家作為參考,抽屜菜單的動畫做的非常不錯。

      運行起始界面:

      起始界面

      站長運行操作一遍,錄制了動畫大家看看:

      動畫菜單

      2. 代碼實現(xiàn)

      使用 .NET CORE 3.1 創(chuàng)建名為 “AnimatedMenu” 的WPF模板項目,添加1個Nuget庫:MaterialDesignThemes,版本為最新預(yù)覽版3.1.0-ci948。

      解決方案主要文件目錄組織結(jié)構(gòu):

      • AnimatedMenu
        • App.xaml
        • MainWindow.xaml
          • MainWindow.xaml.cs

      2.1 引入樣式

      文件【App.xaml】,在 StartupUri 中設(shè)置啟動的視圖【MainWindow.xaml】,并在【Application.Resources】節(jié)點增加 MaterialDesignThemes庫的樣式文件:

      <Application.Resources>
          <ResourceDictionary>
              <ResourceDictionary.MergedDictionaries>
                  <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Dark.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.Blue.xaml" />
              </ResourceDictionary.MergedDictionaries>
          </ResourceDictionary>
      </Application.Resources>
      

      2.2 演示窗體

      文件【MainWindow.xaml】,布局代碼、動畫代碼都在此文件中,源碼如下:

      <Window x:Class="AnimatedMenu.MainWindow"
              xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
              xmlns:materialDesign="http:///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./markup-compatibility/2006"
              mc:Ignorable="d" MouseLeftButtonDown="MoveWindow_MouseLeftButtonDown"
              Height="600" Width="1024" WindowStyle="None" WindowStartupLocation="CenterScreen">
          <WindowChrome.WindowChrome>
              <WindowChrome CaptionHeight="0"/>
          </WindowChrome.WindowChrome>
          <Window.Resources>
              <Storyboard x:Key="OpenMenu">
                  <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" Storyboard.TargetName="GridMain">
                      <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
                      <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="250"/>
                  </DoubleAnimationUsingKeyFrames>
                  <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)" Storyboard.TargetName="GridMain">
                      <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
                      <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="50"/>
                  </DoubleAnimationUsingKeyFrames>
                  <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" Storyboard.TargetName="StackPanelMenu">
                      <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
                      <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="250"/>
                  </DoubleAnimationUsingKeyFrames>
                  <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" Storyboard.TargetName="listViewItem">
                      <EasingDoubleKeyFrame KeyTime="0" Value="-250"/>
                      <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="-250"/>
                      <EasingDoubleKeyFrame KeyTime="0:0:0.7" Value="0"/>
                  </DoubleAnimationUsingKeyFrames>
                  <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" Storyboard.TargetName="listViewItem1">
                      <EasingDoubleKeyFrame KeyTime="0" Value="-250"/>
                      <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="-250"/>
                      <EasingDoubleKeyFrame KeyTime="0:0:0.9" Value="0"/>
                  </DoubleAnimationUsingKeyFrames>
                  <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" Storyboard.TargetName="listViewItem2">
                      <EasingDoubleKeyFrame KeyTime="0" Value="-250"/>
                      <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="-250"/>
                      <EasingDoubleKeyFrame KeyTime="0:0:1.1" Value="0"/>
                  </DoubleAnimationUsingKeyFrames>
                  <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" Storyboard.TargetName="listViewItem3">
                      <EasingDoubleKeyFrame KeyTime="0" Value="-250"/>
                      <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="-250"/>
                      <EasingDoubleKeyFrame KeyTime="0:0:1.3" Value="0"/>
                  </DoubleAnimationUsingKeyFrames>
                  <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" Storyboard.TargetName="listViewItem4">
                      <EasingDoubleKeyFrame KeyTime="0" Value="-250"/>
                      <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="-250"/>
                      <EasingDoubleKeyFrame KeyTime="0:0:1.5" Value="0"/>
                  </DoubleAnimationUsingKeyFrames>
                  <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" Storyboard.TargetName="button">
                      <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
                      <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="0"/>
                      <EasingDoubleKeyFrame KeyTime="0:0:1.5" Value="1"/>
                  </DoubleAnimationUsingKeyFrames>
                  <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)" Storyboard.TargetName="button">
                      <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
                      <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="0"/>
                      <EasingDoubleKeyFrame KeyTime="0:0:1.5" Value="1"/>
                  </DoubleAnimationUsingKeyFrames>
              </Storyboard>
              <Storyboard x:Key="CloseMenu">
                  <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" Storyboard.TargetName="GridMain">
                      <EasingDoubleKeyFrame KeyTime="0" Value="250"/>
                      <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="0"/>
                  </DoubleAnimationUsingKeyFrames>
                  <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)" Storyboard.TargetName="GridMain">
                      <EasingDoubleKeyFrame KeyTime="0" Value="50"/>
                      <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="0"/>
                  </DoubleAnimationUsingKeyFrames>
                  <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" Storyboard.TargetName="StackPanelMenu">
                      <EasingDoubleKeyFrame KeyTime="0" Value="250"/>
                      <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="0"/>
                  </DoubleAnimationUsingKeyFrames>
              </Storyboard>
          </Window.Resources>
          <Window.Triggers>
              <EventTrigger RoutedEvent="ButtonBase.Click" SourceName="ButtonOpenMenu">
                  <BeginStoryboard Storyboard="{StaticResource OpenMenu}"/>
              </EventTrigger>
              <EventTrigger RoutedEvent="ButtonBase.Click" SourceName="ButtonCloseMenu">
                  <BeginStoryboard x:Name="CloseMenu_BeginStoryboard" Storyboard="{StaticResource CloseMenu}"/>
              </EventTrigger>
          </Window.Triggers>
          <Grid Background="#FF3580BF">
              <StackPanel x:Name="StackPanelMenu" Width="250" HorizontalAlignment="Left" Margin="-250 0 0 0" RenderTransformOrigin="0.5,0.5">
                  <StackPanel.RenderTransform>
                      <TransformGroup>
                          <ScaleTransform/>
                          <SkewTransform/>
                          <RotateTransform/>
                          <TranslateTransform/>
                      </TransformGroup>
                  </StackPanel.RenderTransform>
                  <StackPanel Orientation="Horizontal" VerticalAlignment="Top" Height="100" HorizontalAlignment="Center">
                      <Button Style="{StaticResource MaterialDesignFloatingActionMiniAccentButton}" Background="{x:Null}" BorderBrush="{x:Null}" Padding="0" Width="50" Height="50" Margin="10">
                          <materialDesign:PackIcon Kind="Settings" Width="40" Height="40"/>
                      </Button>
                      <Button x:Name="button" Style="{StaticResource MaterialDesignFloatingActionMiniAccentButton}" BorderBrush="{x:Null}" Padding="0" Width="80" Height="80" Margin="10" RenderTransformOrigin="0.5,0.5">
                          <Button.RenderTransform>
                              <TransformGroup>
                                  <ScaleTransform/>
                                  <SkewTransform/>
                                  <RotateTransform/>
                                  <TranslateTransform/>
                              </TransformGroup>
                          </Button.RenderTransform>
                          <Button.Background>
                              <ImageBrush ImageSource="https://img./logo.png" Stretch="UniformToFill"/>
                          </Button.Background>
                      </Button>
                      <Button Style="{StaticResource MaterialDesignFloatingActionMiniAccentButton}" Background="{x:Null}" BorderBrush="{x:Null}" Padding="0" Width="50" Height="50" Margin="10">
                          <materialDesign:PackIcon Kind="InformationOutline" Width="40" Height="40"/>
                      </Button>
                  </StackPanel>
                  <ListView>
                      <ListViewItem x:Name="listViewItem" Height="60" RenderTransformOrigin="0.5,0.5">
                          <ListViewItem.RenderTransform>
                              <TransformGroup>
                                  <ScaleTransform/>
                                  <SkewTransform/>
                                  <RotateTransform/>
                                  <TranslateTransform/>
                              </TransformGroup>
                          </ListViewItem.RenderTransform>
                          <StackPanel Orientation="Horizontal" Margin="10 0">
                              <materialDesign:PackIcon Kind="Home" Width="30" Height="30" VerticalAlignment="Center" Margin="5"/>
                              <TextBlock Text="主頁" Margin="10" VerticalAlignment="Center"/>
                          </StackPanel>
                      </ListViewItem>
                      <ListViewItem x:Name="listViewItem1" Height="60" RenderTransformOrigin="0.5,0.5">
                          <ListViewItem.RenderTransform>
                              <TransformGroup>
                                  <ScaleTransform/>
                                  <SkewTransform/>
                                  <RotateTransform/>
                                  <TranslateTransform/>
                              </TransformGroup>
                          </ListViewItem.RenderTransform>
                          <StackPanel Orientation="Horizontal" Margin="10 0">
                              <materialDesign:PackIcon Kind="AccountSearch" Width="30" Height="30" VerticalAlignment="Center" Margin="5"/>
                              <TextBlock Text="搜索" Margin="10" VerticalAlignment="Center"/>
                          </StackPanel>
                      </ListViewItem>
                      <ListViewItem x:Name="listViewItem2" Height="60" RenderTransformOrigin="0.5,0.5">
                          <ListViewItem.RenderTransform>
                              <TransformGroup>
                                  <ScaleTransform/>
                                  <SkewTransform/>
                                  <RotateTransform/>
                                  <TranslateTransform/>
                              </TransformGroup>
                          </ListViewItem.RenderTransform>
                          <StackPanel Orientation="Horizontal" Margin="10 0">
                              <materialDesign:PackIcon Kind="Wechat" Width="30" Height="30" VerticalAlignment="Center" Margin="5"/>
                              <TextBlock Text="微信" Margin="10" VerticalAlignment="Center"/>
                          </StackPanel>
                      </ListViewItem>
                      <ListViewItem x:Name="listViewItem3" Height="60" RenderTransformOrigin="0.5,0.5">
                          <ListViewItem.RenderTransform>
                              <TransformGroup>
                                  <ScaleTransform/>
                                  <SkewTransform/>
                                  <RotateTransform/>
                                  <TranslateTransform/>
                              </TransformGroup>
                          </ListViewItem.RenderTransform>
                          <StackPanel Orientation="Horizontal" Margin="10 0">
                              <materialDesign:PackIcon Kind="Qqchat" Width="30" Height="30" VerticalAlignment="Center" Margin="5"/>
                              <TextBlock Text="QQ" Margin="10" VerticalAlignment="Center"/>
                          </StackPanel>
                      </ListViewItem>
                      <ListViewItem x:Name="listViewItem4" Height="60" RenderTransformOrigin="0.5,0.5">
                          <ListViewItem.RenderTransform>
                              <TransformGroup>
                                  <ScaleTransform/>
                                  <SkewTransform/>
                                  <RotateTransform/>
                                  <TranslateTransform/>
                              </TransformGroup>
                          </ListViewItem.RenderTransform>
                          <StackPanel Orientation="Horizontal" Margin="10 0">
                              <materialDesign:PackIcon Kind="Facebook" Width="30" Height="30" VerticalAlignment="Center" Margin="5"/>
                              <TextBlock Text="臉書" Margin="10" VerticalAlignment="Center"/>
                          </StackPanel>
                      </ListViewItem>
                  </ListView>
              </StackPanel>
              <Grid x:Name="GridMain" Background="#FFFBFBFB" Width="1024" RenderTransformOrigin="0.5,0.5">
                  <Grid.RenderTransform>
                      <TransformGroup>
                          <ScaleTransform/>
                          <SkewTransform/>
                          <RotateTransform/>
                          <TranslateTransform/>
                      </TransformGroup>
                  </Grid.RenderTransform>
                  <Grid.ColumnDefinitions>
                      <ColumnDefinition Width="*"/>
                      <ColumnDefinition Width="250"/>
                  </Grid.ColumnDefinitions>
      
                  <Grid Grid.Column="1" Background="#FF3580BF">
                      <Image Height="150" VerticalAlignment="Top" Source="https:///wp-content/uploads/2017/04/About-Header.jpg" Stretch="UniformToFill"/>
                      <Ellipse Height="100" Width="100" VerticalAlignment="Top" HorizontalAlignment="Right" Margin="20 100" Stroke="White">
                          <Ellipse.Fill>
                              <ImageBrush ImageSource="https://img./logo.png" Stretch="UniformToFill"/>
                          </Ellipse.Fill>
                      </Ellipse>
                      <TextBlock Text="Dotnet9" Foreground="White" FontSize="28" FontFamily="Nirmala UI Semilight" Margin="10 100" VerticalAlignment="Top"/>
                      <StackPanel Margin="0 150">
                          <Grid Height="60" Margin="20 50 20 0">
                              <Grid.ColumnDefinitions>
                                  <ColumnDefinition Width="*"/>
                                  <ColumnDefinition Width="*"/>
                              </Grid.ColumnDefinitions>
                              <Grid.RowDefinitions>
                                  <RowDefinition Height="30"/>
                                  <RowDefinition Height="30"/>
                              </Grid.RowDefinitions>
                              <TextBlock Text="追隨者" VerticalAlignment="Bottom" Foreground="#FFFBFBFB" Margin="5,0,5,5"/>
                              <TextBlock Text="1.5K" VerticalAlignment="Top" Foreground="#FFFBFBFB" Grid.Row="1" Margin="10 0"/>
      
                              <TextBlock Text="跟隨" VerticalAlignment="Bottom" Foreground="#FFFBFBFB" Margin="5,0,5,5" Grid.Column="1"/>
                              <TextBlock Text="2.3K" VerticalAlignment="Top" Foreground="#FFFBFBFB" Grid.Row="1" Margin="10 0" Grid.Column="1"/>
                          </Grid>
      
                          <TextBlock TextWrapping="Wrap" Margin="10" Foreground="#FFFBFBFB" FontSize="14">
                              <Run Text="網(wǎng)名:沙漠盡頭的狼"/>
                              <LineBreak/>
                              <LineBreak/>
                              <Run Text="網(wǎng)站:https://"/>
                              <LineBreak/>
                              <Run Text="    Dotnet9的博客 - 一個熱衷于互聯(lián)網(wǎng)分享精神的個人博客站點"/>
                              <LineBreak/>
                              <LineBreak/>
                              <Run Text="座右銘:時間如流水,只能流去不流回。"/>
                          </TextBlock>
                      </StackPanel>
                  </Grid>
                  <Grid>
                      <Grid.RowDefinitions>
                          <RowDefinition Height="40"/>
                          <RowDefinition Height="50"/>
                          <RowDefinition Height="*"/>
                          <RowDefinition Height="*"/>
                          <RowDefinition Height="*"/>
                      </Grid.RowDefinitions>
                      <Grid.ColumnDefinitions>
                          <ColumnDefinition Width="*"/>
                          <ColumnDefinition Width="*"/>
                          <ColumnDefinition Width="*"/>
                      </Grid.ColumnDefinitions>
      
                      <Button x:Name="ButtonCloseMenu" Style="{StaticResource MaterialDesignFloatingActionMiniAccentButton}" Width="30" Height="30" Padding="0" Background="{x:Null}" BorderBrush="{x:Null}" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="5" Click="ButtonCloseMenu_Click" Visibility="Collapsed">
                          <materialDesign:PackIcon Kind="Menu" Foreground="#FF3580BF"/>
                      </Button>
                      <Button x:Name="ButtonOpenMenu" Style="{StaticResource MaterialDesignFloatingActionMiniAccentButton}" Width="30" Height="30" Padding="0" Background="{x:Null}" BorderBrush="{x:Null}" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="5" Click="ButtonOpenMenu_Click">
                          <materialDesign:PackIcon Kind="Menu" Foreground="#FF3580BF"/>
                      </Button>
      
      
                      <TextBlock Text="照片" Foreground="#FF3580BF" FontSize="30" FontWeight="Bold" Margin="5" Grid.Row="1"/>
      
                      <Grid Margin="5" Grid.Row="2" Grid.Column="0">
                          <Grid.Effect>
                              <DropShadowEffect BlurRadius="20" Color="#FFEEEEEE" ShadowDepth="1"/>
                          </Grid.Effect>
                          <Image Source="https:///wp-content/uploads/2019/12/wpf.png" Stretch="UniformToFill"/>
                          <StackPanel Orientation="Horizontal" Margin="5" HorizontalAlignment="Right" VerticalAlignment="Bottom">
                              <materialDesign:PackIcon Kind="Heart" Foreground="#FFFBFBFB"/>
                              <TextBlock Text="25" Foreground="#FFFBFBFB"/>
                          </StackPanel>
                      </Grid>
                      <Grid Margin="5" Grid.Row="2" Grid.Column="1">
                          <Grid.Effect>
                              <DropShadowEffect BlurRadius="20" Color="#FFEEEEEE" ShadowDepth="1"/>
                          </Grid.Effect>
                          <Image Source="https:///wp-content/uploads/2019/12/winform.png" Stretch="UniformToFill"/>
                          <StackPanel Orientation="Horizontal" Margin="5" HorizontalAlignment="Right" VerticalAlignment="Bottom">
                              <materialDesign:PackIcon Kind="Heart" Foreground="#FFFBFBFB"/>
                              <TextBlock Text="50" Foreground="#FFFBFBFB"/>
                          </StackPanel>
                      </Grid>
                      <Grid Margin="5" Grid.Row="2" Grid.Column="2">
                          <Grid.Effect>
                              <DropShadowEffect BlurRadius="20" Color="#FFEEEEEE" ShadowDepth="1"/>
                          </Grid.Effect>
                          <Image Source="https:///wp-content/uploads/2019/12/asp-net-core.png" Stretch="UniformToFill"/>
                          <StackPanel Orientation="Horizontal" Margin="5" HorizontalAlignment="Right" VerticalAlignment="Bottom">
                              <materialDesign:PackIcon Kind="Heart" Foreground="#FFFBFBFB"/>
                              <TextBlock Text="18" Foreground="#FFFBFBFB"/>
                          </StackPanel>
                      </Grid>
                      <Grid Margin="5" Grid.Row="3" Grid.Column="0">
                          <Grid.Effect>
                              <DropShadowEffect BlurRadius="20" Color="#FFEEEEEE" ShadowDepth="1"/>
                          </Grid.Effect>
                          <Image Source="https://img./Xamarin.Forms.png" Stretch="UniformToFill"/>
                          <StackPanel Orientation="Horizontal" Margin="5" HorizontalAlignment="Right" VerticalAlignment="Bottom">
                              <materialDesign:PackIcon Kind="Heart" Foreground="#FFFBFBFB"/>
                              <TextBlock Text="32" Foreground="#FFFBFBFB"/>
                          </StackPanel>
                      </Grid>
                      <Grid Margin="5" Grid.Row="3" Grid.Column="1">
                          <Grid.Effect>
                              <DropShadowEffect BlurRadius="20" Color="#FFEEEEEE" ShadowDepth="1"/>
                          </Grid.Effect>
                          <Image Source="https:///wp-content/uploads/2019/12/front-end.png" Stretch="UniformToFill"/>
                          <StackPanel Orientation="Horizontal" Margin="5" HorizontalAlignment="Right" VerticalAlignment="Bottom">
                              <materialDesign:PackIcon Kind="Heart" Foreground="#FFFBFBFB"/>
                              <TextBlock Text="32" Foreground="#FFFBFBFB"/>
                          </StackPanel>
                      </Grid>
                  </Grid>
              </Grid>
              <StackPanel Orientation="Horizontal" VerticalAlignment="Top" Height="40" HorizontalAlignment="Right" Margin="10">
                  <Button Style="{StaticResource MaterialDesignFloatingActionMiniAccentButton}" Width="30" Height="30" Padding="0" Background="{x:Null}" BorderBrush="{x:Null}">
                      <materialDesign:PackIcon Kind="Bell"/>
                  </Button>
                  <Button x:Name="ButtonClose" Style="{StaticResource MaterialDesignFloatingActionMiniAccentButton}" Width="30" Height="30" Padding="0" Background="{x:Null}" BorderBrush="{x:Null}" Click="ButtonClose_Click">
                      <materialDesign:PackIcon Kind="Close"/>
                  </Button>
              </StackPanel>
          </Grid>
      </Window>
      

      簡單說明下:

      1. "StackPanelMenu" 作為左側(cè)菜單容器,默認是顯示在窗體外,距離窗體左邊緣-250,點擊左上角菜單按鈕圖標可控制此容器的顯示與隱藏,注:菜單開關(guān)由兩個按鈕組成 "ButtonOpenMenu" 和 "ButtonCloseMenu"。
      2. 左側(cè)菜單項使用 "ListView" 進行布局,實際開發(fā)需要運用模板,使用MVVM做成動態(tài)菜單,方便擴展。
      3. 中間的5張演示照片,也和2類似。直接使用Grid進行的布局,實際上都需要做成模板。
      4. 抽屜菜單動畫見 Window.Resouces 中的動畫代碼,展開抽屜菜單動畫是 "OpenMenu",左側(cè)菜單向右、向下移動,右側(cè)展示區(qū)域及個人信息概況界面同時也是向右、向下移動;關(guān)閉抽屜菜單動畫是 "CloseMenu",動畫移動方向與展開時相反(說的是廢話),這段動畫代碼值得好好學(xué)習(xí)、復(fù)用。

      文件【MainWindow.xaml.cs】,后臺關(guān)閉窗體、抽屜菜單按鈕切換、窗體移動等事件處理:

      private void ButtonClose_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 MoveWindow_MouseLeftButtonDown(object sender, System.Windows.Input.MouseButtonEventArgs e)
      {
          DragMove();
      }
      

      代碼已全部奉上...

      3.本文參考

      1. 視頻一:C# WPF Material Design UI: Animated Menu,配套源碼:AnimatedMenu1。
      2. C# WPF開源控件庫《MaterialDesignInXAML》

      4.源碼

      效果圖實現(xiàn)代碼在文中已經(jīng)全部給出,站長方便演示,文中的圖片使用的本站外鏈圖片,代碼可直接Copy,按解決方案目錄組織代碼文件即可運行。

      演示Demo下載


      除非注明,文章均由 Dotnet9 整理發(fā)布,歡迎轉(zhuǎn)載。

      轉(zhuǎn)載請注明本文地址:https:///7669.html

      歡迎掃描下方二維碼關(guān)注 Dotnet9 的微信公眾號,本站會及時推送最新技術(shù)文章


      時間如流水,只能流去不流回!

      點擊《【閱讀原文】》,本站還有更多技術(shù)類文章等著您哦!?。?/p>

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

        本站是提供個人知識管理的網(wǎng)絡(luò)存儲空間,所有內(nèi)容均由用戶發(fā)布,不代表本站觀點。請注意甄別內(nèi)容中的聯(lián)系方式、誘導(dǎo)購買等信息,謹防詐騙。如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容,請點擊一鍵舉報。
        轉(zhuǎn)藏 分享 獻花(0

        0條評論

        發(fā)表

        請遵守用戶 評論公約

        類似文章 更多