C# WPF 简单自定义菜单切换动画

微信公众号:Dotnet9,网站:Dotnet9,问题或建议,请网站留言;
如果您觉得Dotnet9对您有帮助,欢迎赞赏

C# WPF 简单自定义菜单切换动画

内容目录

  1. 实现效果
  2. 业务场景
  3. 编码实现
  4. 本文参考
  5. 源码下载

1.实现效果

自定义菜单切换动画

2.业务场景

菜单切换动画

3.编码实现

3.1 添加Nuget库

使用 .Net Core 3.1 创建名为“CustomMenu”的WPF解决方案,添加两个Nuget库:MaterialDesignThemes和MaterialDesignColors。

MaterialDesign控件库

3.2 工程结构

只修改了App.xaml(添加MD控件样式)和MainWindow.xaml(主窗口实现效果)。

3.3 App.xaml引入MD控件样式

<Application x:Class="CustomMenu.App"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:local="clr-namespace:CustomMenu"
             StartupUri="MainWindow.xaml">
    <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.MergedDictionaries>
            <!--PRIMARY-->
            <SolidColorBrush x:Key="PrimaryHueLightBrush" Color="#349FDA"/>
            <SolidColorBrush x:Key="PrimaryHueLightForegroundBrush" Color="#FF333333"/>
            <SolidColorBrush x:Key="PrimaryHueMidBrush" Color="#0288d1"/>
            <SolidColorBrush x:Key="PrimaryHueMidForegroundBrush" Color="#FFDDDDDD"/>
            <SolidColorBrush x:Key="PrimaryHueDarkBrush" Color="#015f92"/>
            <SolidColorBrush x:Key="PrimaryHueDarkForegroundBrush" Color="#FFFFFF"/>
            <!--ACCENT-->
            <SolidColorBrush x:Key="SecondaryAccentBrush" Color="#FF50F350"/>
            <SolidColorBrush x:Key="SecondaryAccentForegroundBrush" Color="#FFFFFF"/>
        </ResourceDictionary>
    </Application.Resources>
</Application>

3.4 主窗体 MainWindow.xaml

添加菜单、设置菜单项切换动画等:

<Window x:Class="CustomMenu.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:local="clr-namespace:CustomMenu"
        xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
        mc:Ignorable="d"
        Title="MainWindow" Height="600" Width="1080" Background="#FF292929" ResizeMode="NoResize" WindowStyle="None"
        WindowStartupLocation="CenterScreen">

    <Window.Resources>
        <Storyboard x:Key="Move0">
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)"
                                           Storyboard.TargetName="ellipse">
                <EasingDoubleKeyFrame KeyTime="0:0:0.4" Value="0">
                    <EasingDoubleKeyFrame.EasingFunction>
                        <BackEase EasingMode="EaseInOut"/>
                    </EasingDoubleKeyFrame.EasingFunction>
                </EasingDoubleKeyFrame>
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>

        <Storyboard x:Key="Move1">
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)"
                                           Storyboard.TargetName="ellipse">
                <EasingDoubleKeyFrame KeyTime="0:0:0.4" Value="40">
                    <EasingDoubleKeyFrame.EasingFunction>
                        <BackEase EasingMode="EaseInOut"/>
                    </EasingDoubleKeyFrame.EasingFunction>
                </EasingDoubleKeyFrame>
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>

        <Storyboard x:Key="Move2">
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)"
                                           Storyboard.TargetName="ellipse">
                <EasingDoubleKeyFrame KeyTime="0:0:0.4" Value="80">
                    <EasingDoubleKeyFrame.EasingFunction>
                        <BackEase EasingMode="EaseInOut"/>
                    </EasingDoubleKeyFrame.EasingFunction>
                </EasingDoubleKeyFrame>
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>
    </Window.Resources>

    <Window.Triggers>
        <EventTrigger RoutedEvent="ListBoxItem.Selected" SourceName="item0">
            <BeginStoryboard x:Name="Move0_BeginStoryboard" Storyboard="{StaticResource Move0}"/>
        </EventTrigger>
        <EventTrigger RoutedEvent="ListBoxItem.Selected" SourceName="item1">
            <BeginStoryboard x:Name="Move1_BeginStoryboard" Storyboard="{StaticResource Move1}"/>
        </EventTrigger>
        <EventTrigger RoutedEvent="ListBoxItem.Selected" SourceName="item2">
            <BeginStoryboard x:Name="Move2_BeginStoryboard" Storyboard="{StaticResource Move2}"/>
        </EventTrigger>
    </Window.Triggers>

    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="40"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <Border Grid.Row="0" BorderBrush="{StaticResource SecondaryAccentBrush}" BorderThickness="0 0 0 1">
            <StackPanel HorizontalAlignment="Right" VerticalAlignment="Center" Orientation="Horizontal">
                <Button Style="{StaticResource MaterialDesignFlatButton}">
                    <materialDesign:PackIcon Kind="Minus"/>
                </Button>
                <Button Style="{StaticResource MaterialDesignFlatButton}">
                    <materialDesign:PackIcon Kind="Close"/>
                </Button>
            </StackPanel>
        </Border>

        <Grid Grid.Row="1">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="200"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>

            <ListView Width="200" HorizontalAlignment="Left">
                <ListViewItem x:Name="item0" Content="首页" Height="40"/>
                <ListViewItem x:Name="item1" Content="浏览" Height="40"/>
                <ListViewItem x:Name="item2" Content="视频" Height="40"/>
            </ListView>

            <Grid Grid.ColumnSpan="2" Width="5" Margin="195 0" HorizontalAlignment="Left">
                <Rectangle Fill="{StaticResource SecondaryAccentBrush}" Width="2" HorizontalAlignment="Right"/>
                <Ellipse x:Name="ellipse" Width="10" Height="10" VerticalAlignment="Top" Fill="{StaticResource SecondaryAccentBrush}" Margin="0 15"
                         RenderTransformOrigin="0.5 0.5">
                    <Ellipse.RenderTransform>
                        <TransformGroup>
                            <ScaleTransform/>
                            <SkewTransform/>
                            <RotateTransform/>
                            <TranslateTransform/>
                        </TransformGroup>
                    </Ellipse.RenderTransform>
                </Ellipse>
            </Grid>
        </Grid>
    </Grid>
</Window>

4.本文参考

Design com WPF 大神的学习视频:CustomMenu

开源控件库:MaterialDesignInXamlToolkit

本站对MD开源控件库的介绍:控件介绍

5.代码下载

Github源码下载:下载

除非注明,文章均由 Dotnet9 整理发布,欢迎转载。

转载请注明本文地址:https://dotnet9.com/6820.html

欢迎扫描下方二维码关注 Dotnet9 的微信公众号,本站会及时推送最新技术文章

原文地址:https://www.cnblogs.com/Dotnet9-com/p/12155809.html

时间: 2024-10-11 11:20:07

C# WPF 简单自定义菜单切换动画的相关文章

用jQuery和css3实现的一个模仿淘宝ued博客左边的菜单切换动画效果

今天看到淘宝ued博客上左边的菜单导航动画效果不错,就用jQuery和css3做了一个简单的例子,主要是实现运用了jQuery 事件和css3 transition属性. 用一个元素来实现鼠标滑动到某个导航的背景效果,文字颜色也运用css3 transition 渐变的效果 当鼠标滑动其他导航的时候,加背景的元素的top值也会随着变化,定位到当前的导航上,同时文字字体颜色也会跟着改变: 主要实现的html代码如下: <div class="menuBox"> <div

IOS自定义场景切换动画。

IOS中我们可以通过Storyborad以及segue来实现我们自己的场景切换动画,新建项目使用Single View Application模板并取名为MyCustomSegue. 使用storyboard托出另一UIViewController并分设置两个控制器的视图颜色,并设置跳转页面的segue为custom 设置如图 新建文件MyCustomChangeSegue并重新perform方法 1 @implementation MyCustomChangeSegue 2 3 -(void)

[android] 练习样式主题自定义activity切换动画

主要练习了自定义样式和主题,继承android系统默认的样式并修改,练习xml定义淡入淡出动画 anim/fade_in.xml <?xml version="1.0" encoding="utf-8"?> <alpha xmlns:android="http://schemas.android.com/apk/res/android" android:duration="3000" android:from

微信小程序——自定义菜单切换栏tabbar组件

效果图: wxml代码: <view class="top_tabbar" > <block wx:for="{{itemName}}" wx:key="{{index}}"> <view class="item_name {{tabIndex == index ? 'active' : ''}}" bindtap="handleItem" data-index="{

js实现菜单切换

小案例:实现菜单栏的切换,点击左侧边栏,展示右侧主体的页面 首先实现html页面的编写: <div id="header"></div> <div id="main"> <!--左侧边栏--> <div class="affix"> <h4>用户中心</h4> <ul> <li><a href="#container-myo

iOS 自定义页面的切换动画与交互动画

在iOS7之前,开发者为了寻求自定义Navigation Controller的Push/Pop动画,只能受限于子类化一个UINavigationController,或是用自定义的动画去覆盖它.但是随着iOS7的到来,Apple针对开发者推出了新的工具,以更灵活地方式管理UIViewController切换. 自定义导航栏的Push/Pop动画 为了在基于UINavigationController下做自定义的动画切换,先建立一个简单的工程,这个工程的rootViewController是一个

Android为ViewPager增加切换动画——自定义ViewPager

转载请注明出处:http://blog.csdn.net/allen315410/article/details/44224517 在上篇博客中,我写了一个使用属性动画为ViewPager添加切换动画的方法,并且可以兼容到Android3.0以下版本的设备上,那么关于为ViewPager添加动画的方式还会有另外一种实现方案,就是自定义一个自己带动画效果的ViewPager,关于上篇博客,还没来得及查看的朋友可以点击这里进行查看.下面,我们将新建一个工程,来说说怎样自定义一个自带切换动画效果的Vi

iOS 自定义页面的切换动画与交互动画 By Swift(转)

交互动画切换动画Swiftiosios7 目录(?)[-] 最终效果预览 自定义导航栏的PushPop动画 自定义Modal的PresentDismiss动画 自定义导航栏的交互式动画 使用UIPercentDrivenInteractiveTransition 自定义交互控制器 最终效果 UPDATED 在iOS7之前,开发者为了寻求自定义Navigation Controller的Push/Pop动画,只能受限于子类化一个UINavigationController,或是用自定义的动画去覆盖

EasyUI+zTree实现简单的树形菜单切换

使用easyui_ztree实现简单的树形菜单切换效果 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <!--导入juery核心配置文件--> <script type="text/javascript" src="../js/jquery-1.8.3.js"></script> <!--导入eas