WPF+MVVM案例实战(二十一)- 制作一个侧边弹窗栏(AB类)

devtools/2024/11/7 22:11:33/

文章目录

  • 1、案例效果
  • 1、侧边栏分类
  • 2、AB类侧边弹窗实现
    • 1.文件创建
    • 2、样式代码与功能代码实现
    • 3、功能代码实现
  • 3 运行效果
  • 4、源代码获取


1、案例效果

在这里插入图片描述

1、侧边栏分类

  • A类 :左侧弹出侧边栏
  • B类 :右侧弹出侧边栏
  • C类 :顶部弹出侧边栏
  • D类 :底部弹出侧边栏

2、AB类侧边弹窗实现

1.文件创建

打开项目 Wpf_Examples ,在Views 文件夹下创建窗体界面文件 PopPanelWindow.xaml 。如下所示:
在这里插入图片描述

2、样式代码与功能代码实现

1、弹出床的两种实现,一种是鼠标移上按钮就触发,点击弹窗面板关闭效果。第二种是 单击按钮弹出侧边栏,鼠标点击其他空白区域退出弹窗栏。这里我们把第一种做成右侧弹出栏,第二种做成左侧弹出栏。

PopPanelWindow.xaml 界面样式如下所示:

<Window x:Class="Wpf_Examples.Views.PopPanelWindow"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:Wpf_Examples.Views"mc:Ignorable="d"Title="PopPanelWindow" Height="450" Width="600" Background="#2B2B2B"><Grid><Button Width="250" Height="30" Content="鼠标移上按弹出右侧边栏"><Button.Triggers><!--  用按钮的鼠标进入事件来触发进入动画  --><EventTrigger RoutedEvent="MouseEnter"><BeginStoryboard><!--  进入动画  --><Storyboard Storyboard.TargetName="border" Storyboard.TargetProperty="RenderTransform.X"><DoubleAnimation From="120"To="0"Duration="0:0:1"><DoubleAnimation.EasingFunction><!--  设置缓动模式和振荡次数  --><BackEase Amplitude="0.5" EasingMode="EaseOut" /></DoubleAnimation.EasingFunction></DoubleAnimation></Storyboard></BeginStoryboard></EventTrigger></Button.Triggers></Button><!--  侧边栏  --><Border x:Name="border"Width="200"HorizontalAlignment="Right"Background="LightSkyBlue"><!--位移效果-->  <Border.RenderTransform><TranslateTransform x:Name="tt" X="200" /></Border.RenderTransform><Border.Effect><DropShadowEffect Direction="205"Opacity="0.6"ShadowDepth="1"Color="Black" /></Border.Effect><Border.Triggers><!--  鼠标的左键按下事件来触发退出动画  --><EventTrigger RoutedEvent="MouseLeftButtonDown"><BeginStoryboard><!--  退出动画  --><Storyboard Storyboard.TargetName="tt" Storyboard.TargetProperty="X"><DoubleAnimation From="0"To="200"Duration="0:0:0.8" /></Storyboard></BeginStoryboard></EventTrigger></Border.Triggers></Border><Button Width="150" Height="30" Margin="0 80 0 0" Content="单击弹出左侧侧边栏" Click="Button_Click"/><!--  左侧边栏  --><Border x:Name="leftPanel"Width="200"HorizontalAlignment="Left"Background="LightSkyBlue"Visibility="Collapsed"><!--  位移效果  --><Border.RenderTransform><TranslateTransform x:Name="toRight" X="0" /></Border.RenderTransform><Border.Effect><DropShadowEffect Direction="225" Opacity="0.6" ShadowDepth="1" Color="Black" /></Border.Effect></Border></Grid>
</Window>

3、功能代码实现

PopPanelWindow.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.Animation;
using System.Windows.Media.Imaging;
using System.Windows.Shapes;namespace Wpf_Examples.Views
{/// <summary>/// PopPanelWindow.xaml 的交互逻辑/// </summary>public partial class PopPanelWindow : Window{public PopPanelWindow(){InitializeComponent();// 注册窗口的鼠标点击事件this.MouseLeftButtonDown += PopPanelWindow_MouseLeftButtonDown;}private void Button_Click(object sender, RoutedEventArgs e){// 触发进入动画leftPanel.Visibility = Visibility.Visible;Storyboard enterStoryboard = new Storyboard();DoubleAnimation enterAnimation = new DoubleAnimation{From = 0,To = 200,Duration = TimeSpan.FromSeconds(1),EasingFunction = new BackEase { Amplitude = 0.5, EasingMode = EasingMode.EaseOut }};Storyboard.SetTarget(enterAnimation, toRight);Storyboard.SetTargetProperty(enterAnimation, new PropertyPath("X"));enterStoryboard.Children.Add(enterAnimation);enterStoryboard.Begin();}private void PopPanelWindow_MouseLeftButtonDown(object sender, MouseButtonEventArgs e){// 检查点击的位置是否在侧边栏之外if (!leftPanel.IsMouseOver && leftPanel.Visibility == Visibility.Visible){// 触发退出动画Storyboard exitStoryboard = new Storyboard();DoubleAnimation exitAnimation = new DoubleAnimation{From = 200,To = 0,Duration = TimeSpan.FromSeconds(0.6)};Storyboard.SetTarget(exitAnimation, toRight);Storyboard.SetTargetProperty(exitAnimation, new PropertyPath("X"));exitStoryboard.Children.Add(exitAnimation);exitStoryboard.Completed += (s, ev) => leftPanel.Visibility = Visibility.Collapsed;exitStoryboard.Begin();}}}
}

3 运行效果

在这里插入图片描述

4、源代码获取

源代码是包含上下左右侧边弹出栏全部功能的。代码下载后直接运行即可。
CSDN下载链接:WPF实战案例系列-侧边弹窗等案例


http://www.ppmy.cn/devtools/132134.html

相关文章

Redis实战-利用Lua解决批量插入防重方案

需求场景 一个最简单的插入需求&#xff0c;但是因为考虑写入性能&#xff0c;采用批量插入Mysql的方式&#xff0c;但是这引申了一个并发问题&#xff0c;假如网络抖动等其它原因造成了接口重复请求&#xff0c;批量插入情况下如何对一条条数据做好防重处理。 防重 OR 幂等 …

动态规划 之 斐波那契数列模型 算法专题

动态规划 分析:(五步) 状态表示 状态表示是什么? dp表里面的值锁表示的含义 状态表示怎么来的? 题目要求经验 题目要求线性状态表经验: 以i位置为结尾 以i位置为起点分析问题的过程中, 发现重复子问题 状态转移方程 dp[i] 等于什么(一个公式) 用之前或者之后的状态, 推…

Windows 命令提示符(cmd)中输入 mysql 并收到错误消息“MySQL不是内部或外部命令,也不是可运行的程序或批处理文件?

目录 背景: 过程&#xff1a; 1.找到MySQL安装的路径 2.编辑环境变量 3.打开cmd&#xff0c;输入mysql --version测试成功 总结: 背景: 很早之前安装了Mysql数据库&#xff0c;想查询一下当前安装的MySQL客户端的版本号&#xff0c;我在命令行界面输入mysql --verion命令回…

使用 Python 和 OpenCV 实现实时人脸识别

概述 人脸识别是一项重要的计算机视觉任务&#xff0c;广泛应用于安全监控、身份验证等领域。本文将详细介绍如何使用 Python 和 OpenCV 库实现实时人脸识别&#xff0c;并通过具体的代码示例来展示整个过程。 环境准备 在开始编写代码之前&#xff0c;确保已经安装了 OpenC…

《Vue3 报错》Uncaught TypeError: s.finally is not a function

解决方案&#xff1a; 新建文件 my-polyfill.js // 当浏览器环境不支持Promise.prototype.finally if (!Promise.prototype[finally]) {Promise.prototype[finally] function(callback) {let P this.constructor;return this.then(value > P.resolve(callback()).then(…

org.springframework.boot:type=Admin,name=SpringApplication异常

org.springframework.boot:typeAdmin,nameSpringApplication异常 问题&#xff1a;更换最新版本idea之后&#xff0c;启动springboot项目报错 javax.management.InstanceNotFoundException: org.springframework.boot:typeAdmin,nameSpringApplication idea自动默认的启动设…

如何调整电脑的背景色(黑色和白色切换)

1.切换谷歌浏览器里面内容的背景色 打开浏览器->右上角三个点->设置->外观->模式 中点击深色和浅色即可切换。 如果切换完之后并刷新发现有的网站还是没有变化&#xff0c;说明这个网站的背景色是依据电脑的背景色而变化的。也就是需要执行下面的第2个。 2.切换电…

SpringMVC的执行流程以及运行原理

文章目录 SpringMVC的执行流程以及运行原理一、引言二、SpringMVC核心组件与执行流程1、SpringMVC核心组件1.1、DispatcherServlet配置 2、SpringMVC执行流程 三、SpringMVC配置文件及注解四、总结 SpringMVC的执行流程以及运行原理 一、引言 SpringMVC作为Spring框架的核心模…