WPF 实现视频会议与会人员动态布局

 WPF 实现视频会议与会人员动态布局

控件名:SixGridView

作   者:WPFDevelopersOrg - 驚鏵

原文链接[1]:https://github.com/WPFDevelopersOrg/WPFDevelopers

  • 框架使用.NET40

  • Visual Studio 2019;

  • 接着上一篇是基于Grid实现的视频查看感觉有点浪费,所以修改为基于Panel又重新实现了。

  • Panel EndInit()后绘制鼠标经过的选中效果。

  • 当鼠标移动到候选封面区时,动画从上一次鼠标的位置到当前鼠标位置做移动动画。

39a328dee1f0442edc8c08c1c1a84bdf.png

1)新建 SixGirdView.cs 代码如下:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;namespace WPFDevelopers.Controls
{public class SixGirdView : Panel{public static readonly DependencyProperty SelectBrushProperty =DependencyProperty.Register("SelectBrush", typeof(Brush), typeof(SixGirdView),new PropertyMetadata(Brushes.Red));public static readonly DependencyProperty BorderThicknessProperty =DependencyProperty.Register("BorderThickness", typeof(Thickness), typeof(SixGirdView),new PropertyMetadata(new Thickness(1)));private readonly Dictionary<Rect, int> _dicRect = new Dictionary<Rect, int>();private readonly int _columns = 3;private readonly int _rows = 3;private Border _border;private int _last;private Rect _lastRect;private Storyboard _storyboard;public Brush SelectBrush{get => (Brush) GetValue(SelectBrushProperty);set => SetValue(SelectBrushProperty, value);}public Thickness BorderThickness{get => (Thickness) GetValue(BorderThicknessProperty);set => SetValue(BorderThicknessProperty, value);}public override void EndInit(){base.EndInit();var children = InternalChildren;if (_border == null && children.Count >= 1){_border = new Border{BorderThickness = BorderThickness,BorderBrush = SelectBrush};_border.RenderTransform = new TranslateTransform();children.Add(_border);}}protected override Size MeasureOverride(Size availableSize){var children = InternalChildren;int numCol = 0, numRow = 0;var isRow = false;Point point = default;Size size = default;_dicRect.Clear();double _width = availableSize.Width / _columns, _height = availableSize.Height / _rows;for (int i = 0, count = children.Count; i < count; ++i){if (i >= 6) continue;var uIElement = children[i];if (uIElement != null){uIElement.Measure(availableSize);if (i == 0){point = new Point(0, 0);size = new Size(availableSize.Width / _columns * 2, availableSize.Height / _rows * 2);numRow++;}else{var num = i - 1;var x = 0d;if (!isRow){x = _width * 2;numCol = numRow + 1;if (numCol < _columns){point = new Point(x, 0);}else{point = new Point(x, _height);isRow = true;numCol = 0;}numRow++;}else{x = _width * numCol;numCol++;x = x >= availableSize.Width ? 0 : x;point = new Point(x, _height * 2);}size = new Size(_width, _height);}uIElement.Arrange(new Rect(point, size));if (i >= 6 || i == 0) continue;var rect = new Rect(point.X, point.Y, size.Width, size.Height);_dicRect.Add(rect, i);}}_last = _last == 0 ? 1 : _last;if (_border != null){_border.Measure(availableSize);point = new Point(0, 0);size = new Size(availableSize.Width / _columns, availableSize.Height / _columns);_border.Arrange(new Rect(point, size));var _translateTransform = (TranslateTransform) _border.RenderTransform;if (_last == 1){_translateTransform.X = availableSize.Width / _columns * 2;}else{var uIElement = InternalChildren[_last];if (uIElement != null){var rect = _dicRect.FirstOrDefault(x => x.Value == _last).Key;if (rect != null){point = new Point(rect.X, rect.Y);CreateStoryboard(point);}}}}return availableSize;}protected override void OnPreviewMouseMove(MouseEventArgs e){base.OnPreviewMouseMove(e);var currentPoint = e.GetPosition(this);if (_lastRect.Contains(currentPoint))return;var model = _dicRect.Keys.FirstOrDefault(x => x.Contains(currentPoint));if (model == default) return;_dicRect.TryGetValue(model, out _last);if (_border == null) return;CreateStoryboard(new Point(model.X, model.Y));_lastRect = model;}private void CreateStoryboard(Point point){var sineEase = new SineEase {EasingMode = EasingMode.EaseOut};if (_storyboard == null){_storyboard = new Storyboard();}else{_storyboard.Stop();_storyboard.Children.Clear();}var animationX = new DoubleAnimation{Duration = TimeSpan.FromMilliseconds(500),To = point.X,EasingFunction = sineEase};Storyboard.SetTargetProperty(animationX,new PropertyPath("(Border.RenderTransform).(TranslateTransform.X)"));_storyboard.Children.Add(animationX);var animationY = new DoubleAnimation{Duration = TimeSpan.FromMilliseconds(500),To = point.Y,EasingFunction = sineEase};Storyboard.SetTargetProperty(animationY,new PropertyPath("(Border.RenderTransform).(TranslateTransform.Y)"));_storyboard.Children.Add(animationY);_storyboard.Begin(_border);}}
}

2)新建 SixGirdViewExample.xaml 代码如下:

<UserControl x:Class="WPFDevelopers.Samples.ExampleViews.SixGirdViewExample"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:wpfdev="https://github.com/WPFDevelopersOrg/WPFDevelopers"xmlns:controls="clr-namespace:WPFDevelopers.Samples.Controls"xmlns:local="clr-namespace:WPFDevelopers.Samples.ExampleViews"mc:Ignorable="d" d:DesignHeight="450" d:DesignWidth="800"><controls:CodeViewer><wpfdev:SixGirdView BorderThickness="1" SelectBrush="Red"><wpfdev:SixGirdView.Resources><Style TargetType="TextBlock"><Setter Property="Foreground" Value="White"/><Setter Property="VerticalAlignment" Value="Center"/><Setter Property="HorizontalAlignment" Value="Center"/></Style><Style TargetType="Border"><Setter Property="Margin" Value="1"/></Style></wpfdev:SixGirdView.Resources><MediaElement x:Name="MyMediaElement" Loaded="MyMediaElement_Loaded"MediaEnded="MyMediaElement_MediaEnded"/><Border Background="#282C34"><wpfdev:SmallPanel><TextBlock Text="信号源1"/><Border Background="{DynamicResource PrimaryNormalSolidColorBrush}"VerticalAlignment="Top"HorizontalAlignment="Right"Padding="10,4"CornerRadius="3"><TextBlock Text="HD"/></Border></wpfdev:SmallPanel></Border><Border Background="#282C34"><TextBlock Text="无信号"/></Border><Border Background="#282C34"><TextBlock Text="无信号"/></Border><Border Background="#282C34"><TextBlock Text="无信号"/></Border><Border Background="#282C34"><TextBlock Text="无信号"/></Border></wpfdev:SixGirdView><controls:CodeViewer.SourceCodes><controls:SourceCodeModel CodeSource="/WPFDevelopers.SamplesCode;component/ExampleViews/SixGirdViewExample.xaml" CodeType="Xaml"/><controls:SourceCodeModel CodeSource="/WPFDevelopers.SamplesCode;component/ExampleViews/SixGirdViewExample.xaml.cs" CodeType="CSharp"/></controls:CodeViewer.SourceCodes></controls:CodeViewer>
</UserControl>

3)新建 SixGirdViewExample.xaml.cs 代码如下:

using System;
using System.IO;
using System.Windows;
using System.Windows.Controls;namespace WPFDevelopers.Samples.ExampleViews
{/// <summary>/// NineGridViewExample.xaml 的交互逻辑/// </summary>public partial class SixGirdViewExample : UserControl{public SixGirdViewExample(){InitializeComponent();}private void MyMediaElement_Loaded(object sender, RoutedEventArgs e){var path = "E:\\DCLI6K5UIAEmH9R.mp4";if (File.Exists(path))MyMediaElement.Source = new Uri(path);}private void MyMediaElement_MediaEnded(object sender, RoutedEventArgs e){MyMediaElement.Position = new TimeSpan(0);}}
}
95772ebcf04af6a9d65e4c8716fc4c7b.gif

参考资料

[1]

原文链接: https://github.com/WPFDevelopersOrg/WPFDevelopers

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/280252.shtml

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

相关文章

chromebook刷机_如何获取Android应用以查看Chromebook上的外部存储

chromebook刷机Android apps are a great way to expand the sometimes limited capabilities of Chromebooks, but they can be a problem if you store most of your data on an external medium—like an SD card, for example. Android应用程序是扩展Chromebook有时有限功能…

android 指纹添加_如何将手势添加到Android手机的指纹扫描仪

android 指纹添加So you have a shiny new Android phone, equipped with a security-friendly fingerprint scanner. Congratulations! But did you know that, while useful on its own, you can actually make the fingerprint scanner do more than just unlock your phone…

百度高管:问心无愧

1月23日下午消息&#xff0c;今天下午&#xff0c;百度召开百家号2019内容创作者盛典&#xff0c;百度副总裁沈抖出席并发布演讲。 就在前一天&#xff0c;一篇名为《搜索引擎百度已死》的文章刷屏&#xff0c;文中提到百度搜索有一半以上会指向百度自家产品&#xff0c;尤其百…

Vuex 学习笔记

Vuex 是什么&#xff1f; Vuex 是一个专为 Vue.js应用程序开发的状态管理模式。由于SPA应用的模块化&#xff0c;每个组件都有它各自的数据&#xff08;state&#xff09;、视图&#xff08;view&#xff09;和方法&#xff08;actions&#xff09;&#xff0c;当项目内容越来越…

xdf文档怎么转换为pdf_如何将PDF文件和图像转换为Google文档文档

xdf文档怎么转换为pdfYou probably know you can create and edit documents with Google Docs, but you can edit more than just .doc files. Google Drive can also convert any PDF, JPG, PNG, or GIF into a document with fully editable text. Here’s how. 您可能知道可…

在现代 Windows 上使用经典 Windows 2000、XP、Vista 任务栏

你好&#xff0c;这里是 Dotnet 工具箱&#xff0c;定期分享 Dotnet 有趣&#xff0c;实用的工具和组件&#xff0c;希望对您有用&#xff01;前言您第一次使用的 Windows 是哪个版本的&#xff1f;我最早使用的 Windows XP&#xff0c;然后再经过 XP、7、8/8.1 、Windows 10&a…

airdroid黑屏_如何使用AirDroid从PC控制Android设备

airdroid黑屏AirDroid for Android replaces your USB cable for connecting to your PC. Transfer files back and forth, send text messages, play music, view your photos, and manage applications using a web browser or a desktop client. 适用于Android的AirDroid取代…

分析java程序

2019独角兽企业重金招聘Python工程师标准>>> 最近公司的一个账单推送的服务&#xff0c;发现有延迟。我排查的时候发现&#xff0c;有一个程序日志不动了&#xff08;采用消息队列&#xff0c;部署了两台服务器来负载均衡&#xff09;。 网上说&#xff1a; jstack …

环境部署(九):linux下安装python+chrome+Xvfb

在基于selenium进行的UI自动化测试中&#xff0c;开发调试环境一般都是windows操作系统。完成后需要部署到专门的测试环境。 如要要部署到linux环境的服务器&#xff08;阿里云、腾讯云&#xff09;执行&#xff0c;那么测试脚本也需要对应的浏览器支持&#xff0c; 才能正常进…

地理围栏_什么是“地理围栏”?

地理围栏The term is popping up more frequently in news articles, appearing in product manuals, and highlighted as a feature in tons of mobile applications, but what exactly is geofencing? Read on as we explain what it is, why it’s appearing in more produ…

嵌套映射

1. 多对一嵌套查询映射使用案例 package com.zixue.dao;import com.zixue.annotation.MyBatisRepository; import com.zixue.entity.Emp;/*** 员工表的DAO组件* */ MyBatisRepository public interface EmpDao {void save(Emp emp);Emp findById(int id);Emp findById2(int id)…

gopro dataset_如何将GoPro安装到DSLR相机

gopro datasetIf you have a DSLR camera with a hot shoe, it’s easy to attach various flashes and other accessories right to your camera. But with a couple of cheap attachments on hand, you can mount your GoPro to your DSLR camera as well. 如果您的DSLR相机带…

jQuery已经过时了,还需要学吗?

说起jQuery&#xff0c;很多刚参加工作的程序员都没用过&#xff0c;甚至没听过。曾几何时jQuery可是秒杀一切Js库&#xff0c;大有一统江山的情况&#xff0c;可是在顶峰的时候&#xff0c;瞬间被Vue、React、Angela三大框架斩于马下。从百度指数&#xff0c;我们也看出在2015…

Bootstrap01

Bootstrap01内容概要 一.使用Bootstrap的步骤 1.下载Bootstrap类库,包含三个部分,fonts,css,Bootstrap 2.导入项目中,在头部引入JQ,css和Bootstrap 注意:JQ要引入在Bootstrap前面! 3.使用css样式时,全部使用class属性 二.全局CSS概要 1.仅支持H5文档格式 2.移动设备优先,需要在…

ios raise_如何在iOS 10中关闭“ Raise to Wake”

ios raiseRaise to Wake is a new Lock screen feature available in iOS 10. It allows you to wake your phone’s screen simply by picking up your phone. This feature is on by default, but if you’d rather not use it, it’s simple to turn off. “唤醒”是iOS 10中…

资源调度器调研

2019独角兽企业重金招聘Python工程师标准>>> 场景描述&#xff1a; 异步触发和Crontab触发 YARN(Yet Another Resource Negotiator)Hadoop 资源管理器 主要构成&#xff1a; RM(ResourceManager)是一个全局的资源管理器&#xff0c;负责整个系统的资源管理和分配。…

WPF-19 IValueConverter接口

我们先来看看微软官方给出的定语&#xff1a;提供将自定义逻辑应用于绑定的方法&#xff0c;我们来看一下该接口的定义&#xff0c;Convert提供了将数据源到UI的格式化&#xff0c;ConvertBack表示反向namespace System.Windows.Data {//// Summary:// Provides a way to a…

使用 Azure CLI 将 IaaS 资源从经典部署模型迁移到 Azure Resource Manager 部署模型

以下步骤演示如何使用 Azure 命令行接口 (CLI) 命令将基础结构即服务 (IaaS) 资源从经典部署模型迁移到 Azure Resource Manager 部署模型。 本文中的操作需要 Azure CLI。 Note 此处描述的所有操作都是幂等的。 如果你遇到功能不受支持或配置错误以外的问题&#xff0c;建议你…

黑苹果不能imessage_如何修复iMessage在iOS 10中不显示消息效果

黑苹果不能imessageiMessage got a huge update in iOS 10, adding things like third-party app integration, rich links, and a number of fun graphical effects for messages. If you’re seeing messages that say something like “(sent with Invisible Ink)” instead…

从技术总监到开源社区运营:过去两年,我都做了点啥?

这是头哥侃码的第267篇原创今天&#xff0c;这是我离开前公司的第 7 天。相信有不少吃瓜群众都很好奇&#xff0c;你这些天都在干啥&#xff1f;是不是蓬莱乐逍遥&#xff0c;过上了那悠闲的神仙日子&#xff1f;还是趁着疫情管控逐渐放开&#xff0c;和家人一起去深山老林里吸…