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

文章目录

  • 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.rhkb.cn/news/464150.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

基于Multisim数控直流稳压电源电路(含仿真和报告)

【全套资料.zip】数控直流稳压电源电路设计Multisim仿真设计数字电子技术 文章目录 功能一、Multisim仿真源文件二、原理文档报告资料下载【Multisim仿真报告讲解视频.zip】 功能 1.输出直流电压调节范围5-12V。 2.输出电流0-500mA。 3.输出直流电压能步进调节&#xff0c;步…

原来大佬的测试用例都是这样写的...

1、测试点与测试用例 测试点不等于测试用例&#xff0c;这是我们首先需要认识到的。 问题1&#xff1a;这些测试点在内容上有重复&#xff0c;存在冗余。 问题2&#xff1a;一些测试点的测试输入不明确&#xff0c;不知道测试时要测试哪些。 问题3&#xff1a;总是在搭相似…

ubuntu20.04 加固方案-设置SSH是否使用业界认可的加密算法

一、编辑/etc/ssh/sshd_config配置文件 打开终端。 使用文本编辑器&#xff08;如vim&#xff09;编辑/etc/ssh/sshd_config文件。 vi /etc/ssh/sshd_config 二、添加配置参数 在打开的配置文件中&#xff0c;如图位置添加如下参数&#xff1a; 查看支持的算法&#xff1a;h…

机器学习是什么?AIGC又是什么?机器学习与AIGC未来科技的双引擎

&#x1f497;&#x1f497;&#x1f497;欢迎来到我的博客&#xff0c;你将找到有关如何使用技术解决问题的文章&#xff0c;也会找到某个技术的学习路线。无论你是何种职业&#xff0c;我都希望我的博客对你有所帮助。最后不要忘记订阅我的博客以获取最新文章&#xff0c;也欢…

动态规划应该如何学习?

动态规划如何学习 参考灵神的视频和题解做的笔记&#xff08;灵神YYDS&#xff0c;以后也都会用这套逻辑去思考&#xff09; 枚举选哪个&#xff1a; 动态规划入门&#xff1a;从记忆化搜索到递推_哔哩哔哩_bilibili 746. 使用最小花费爬楼梯 - 力扣&#xff08;LeetCode&a…

虚拟化环境中的精简版 Android 操作系统 Microdroid

随着移动设备的普及和应用场景的多样化&#xff0c;安全性和隐私保护成为了移动操作系统的重要课题。Google推出的Microdroid&#xff0c;是一个专为虚拟化环境设计的精简版Android操作系统&#xff0c;旨在提供一个安全、隔离的执行环境。本文将详细介绍Microdroid的架构、功能…

【Docker系列】指定系统平台拉取 openjdk:8 镜像

&#x1f49d;&#x1f49d;&#x1f49d;欢迎来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:kwan 的首页,持续学…

(七)Python运算符和优先级

一、算数运算符 算数运算符&#xff0c;如下表所示&#xff1a; x1 y2 z3 # 加法运算 axy print(a,a) # 减法运算 by-x print(b,b) # 乘法运算 cy*z print(c,c) # 除法运算 dz/y print(d,d) # 取模运算 ez%y print(e,e) # 幂运算 fy**z print(f,f) 输出结果&#xff1a; 二…

Linux中使用NGINX

NGINX简介 Nginx&#xff08;engine x&#xff09;是俄罗斯人编写的十分轻量级的HTTP服务器是一个高性能的HTTP和反向代理服务器&#xff0c;同时也是一个IMAP/POP3/SMTP代理服务器官方网站&#xff1a;http://nginx.org/ NGINX概述 Nginx默认配置文件&#xff1a;/etc/ngin…

数据结构之线段树

线段树 线段树&#xff08;Segment Tree&#xff09;是一种高效的数据结构&#xff0c;广泛应用于计算机科学和算法中&#xff0c;特别是在处理区间查询和更新问题时表现出色。以下是对线段树的详细解释&#xff1a; 一、基本概念 线段树是一种二叉搜索树&#xff0c;是算法竞…

【C++】继承的理解

1.继承的概念和定义 1.1继承的概念 继承 (inheritance) 机制是面向对象程序设计 使代码可以复用 的最重要的手段&#xff0c;它允许程序员在 保 持原有类特性的基础上进行扩展 &#xff0c;增加功能&#xff0c;这样产生新的类&#xff0c;称派生类。继承 呈现了面向对象 程序…

C++ 详细讲解 洛谷P1428 小鱼比可爱

&#xff08;其实这道题难度不高&#xff0c;但是博主正在适应c语言加上这道题目太可爱了所以忍不住发发~&#xff09; 目录 1.题目要求 2.题目解读 3.代码实现 1.题目要求 2.题目解读 这道题需要使用c中的容器储存小鱼的可爱程度和不如自己可爱的小鱼的数目&#xff0c;…

Android亮屏Job的功耗优化方案

摘要: Job运行时会带来持锁的现象,目前灭屏放电Job的锁托管已经有doze和绿盟标准监管,但是亮屏时仍旧存在过长的持锁现象,故为了优化功耗和不影响用户体验下,新增亮屏放电下如果满足冻结和已运行过一次Job,则进行job限制,当非冻结时恢复的策略 1.现象: (gms_schedu…

Spring1(初始Spring 解耦实现 SpringIOC SpringDI Spring常见面试题)

Spring1 创建项目集成maven创建一个Maven项目实现&#xff1a; 初识SpringSpring简介Spring的发展历史Spring之父体系结构生态系统官方文档解耦实现JDBCSpringBoot整合MyBatis和lombok&#xff0c;开启驼峰映射三层思想 SpringIOC实现 SpringDIset注入全部代码&#xff1a;实现…

服务器新建用户

文章目录 前言一、步骤二、问题三、赋予管理员权限总结 前言 环境&#xff1a; 一、步骤 创建用户需要管理员权限sudo sudo useradd tang为用户设置密码 sudo passwd tang设置密码后&#xff0c;可以尝试使用 su 切换到 tang 用户&#xff0c;确保该用户可以正常使用&#…

leetcode-88-合并两个有序数组

题解&#xff1a; 解法一&#xff1a;从后向前同时遍历两个数组&#xff0c;因为nums1后面是0&#xff0c;从后遍历节省空间。 1、定义三个指针&#xff0c;分别为&#xff1a;len1m-1指向nums1的最后一个非0数字&#xff1b;len2n-1指向nums2的最后一个数字&#xff1b;len3…

操作系统(10) (并发(2)------基于软件/硬件/操作系统层面解决两个进程之间的临界区问题/抢占式/非抢占式内核)

目录 1. 基于软件层面(Petersons Solution) Petersons Solution 满足三个要求: 好处: 缺点 2. 基于硬件层面 1. Disabling Interrupts (禁用中断) 概念解释&#xff1a; 代码框架&#xff1a; 要求&#xff1a; 禁用中断的好处与问题&#xff1a; 2. Test and Set Lock (…

Java | Leetcode Java题解之第526题优美的排列

题目&#xff1a; 题解&#xff1a; class Solution {public int countArrangement(int n) {int[] f new int[1 << n];f[0] 1;for (int mask 1; mask < (1 << n); mask) {int num Integer.bitCount(mask);for (int i 0; i < n; i) {if ((mask & (1…

2024年大厂AI大模型面试题精选与答案解析

前言 随着AI市场&#xff0c;人工智能的爆火&#xff0c;在接下来的金九银十招聘高峰期&#xff0c;各大科技巨头和国有企业将会对AGI人才的争夺展开一场大战&#xff0c;为求职市场注入了新的活力。 为了助力求职者在面试中展现最佳状态&#xff0c;深入理解行业巨头的选拔标…