概述

项目使用的是海康威视监控球头，厂家给出了完备的SDK及DEMO（winform项目），此处我们试图在WPF中实现云台功能的引用，需要将相关按钮与页面风格统一。监控云台按钮主要包括上、下、左、右及自动旋转几个方向按钮，调焦、拍照、设置四个其他相关按钮，通过设置按钮风格进行设置应该也可以实现，不过在此我们给出一种简单的替代方案，因主界面没有“最大化”功能，暂时无需考虑控件位置变化带来的显示问题。

大概思路

简单来说就是通过布局来控制按钮位置，底部称图来实现按钮风格：

设置按钮布局及风格，调整位置；
设计生成云台按钮组件图片素材；
组合，看效果。

云台控制按钮控件

云台控制按钮的.xaml代码：

<Border Grid.Row="1"/>
<Grid Grid.Row="1"><!--室内视频云台控制区域--><Grid.ColumnDefinitions><ColumnDefinition Width="3*"/><ColumnDefinition Width="2*"/></Grid.ColumnDefinitions><Grid.RowDefinitions><RowDefinition Height="2*"/><RowDefinition/><RowDefinition Height="2*"/></Grid.RowDefinitions><!--视频控制云台：向上按钮--><Button Grid.Column="0" Grid.Row="0" HorizontalAlignment="Center" VerticalAlignment="Top" Margin="0,30,0,0" MouseDown="BT_UP_MouseDown" MouseUp="BT_UP_MouseUp" Background="Transparent" Foreground="White" Content="" FontFamily="Fonts/#iconfont" FontSize="14" BorderThickness="0"Name="bt_up" Height="28" Width="30"/><!--视频控制云台：向左按钮--><Button Grid.Column="0" Grid.Row="1" HorizontalAlignment="Left" VerticalAlignment="Center" Margin="36,0,0,0"MouseDown="BT_Left_MouseDown" MouseUp="BT_Left_MouseUp" Background="Transparent" Foreground="White"Content="" FontFamily="Fonts/#iconfont" FontSize="14" BorderThickness="0"Name="bt_left" Height="28" Width="30"/><!--视频控制云台：中间旋转按钮--><Button Grid.Column="0" Grid.Row="1" HorizontalAlignment="Center" VerticalAlignment="Center" Content="" FontFamily="Fonts/#iconfont"  Height="20" Width="20" BorderThickness="0"Name="bt_turn" Click="BT_Auto_OnClick" Background="Transparent" Foreground="White" /><!--视频控制云台：向右按钮--><Button Grid.Column="0" Grid.Row="1" HorizontalAlignment="Right" VerticalAlignment="Center" Margin="0,0,36,0"MouseDown="BT_Right_MouseDown" MouseUp="BT_Right_MouseUp" Background="Transparent" Foreground="White"Content="" FontFamily="Fonts/#iconfont" FontSize="14" BorderThickness="0"Name="bt_right" Height="28" Width="30"/><!--视频控制云台：向下按钮--><Button Grid.Column="0" Grid.Row="2" HorizontalAlignment="Center" VerticalAlignment="Bottom" Margin="0,0,0,28"MouseDown="BT_Down_MouseDown" MouseUp="BT_Down_MouseUp" Background="Transparent" Foreground="White"Content="" FontFamily="Fonts/#iconfont" FontSize="14" BorderThickness="0"Name="bt_down" Height="28" Width="30"/><!--视频控制云台：拍照、设置按钮--><Button Grid.Column="1" Grid.Row="0" HorizontalAlignment="Left" VerticalAlignment="Bottom"Margin="10,0,0,0" Click="BT_TackPhoto_OnClick" Background="Transparent" BorderThickness="0"Name="bt_TakePhoto"  Height="33" Width="50"><StackPanel><Label Content="" FontSize="16" Foreground="White" HorizontalAlignment="Center" FontFamily="Fonts/#iconfont"/></StackPanel></Button><Button Grid.Column="1" Grid.Row="0" HorizontalAlignment="Right" VerticalAlignment="Bottom"Margin="0,0,10,0" Click="BT_SET_OnClick" Background="Transparent" BorderThickness="0"Name="bt_ViewSet"  Height="33" Width="50"><StackPanel><Label Content="" FontSize="16" Foreground="White" HorizontalAlignment="Center" FontFamily="Fonts/#iconfont"/></StackPanel></Button><!--视频控制云台：放大、缩小，调焦按钮--><Button Grid.Column="1" Grid.Row="2" HorizontalAlignment="Left" VerticalAlignment="Top"Margin="10,0,0,0" Click="BT_Big_OnClick" Background="Transparent" BorderThickness="0"Name="bt_big"  Height="33" Width="50"><StackPanel><Label Content="" FontSize="16" Foreground="White" HorizontalAlignment="Center" FontFamily="Fonts/#iconfont"/></StackPanel></Button><Button Grid.Column="1" Grid.Row="2" HorizontalAlignment="Right" VerticalAlignment="Top"Margin="0,0,10,0" Click="BT_Small_OnClick" Background="Transparent" BorderThickness="0"Name="bt_small"  Height="33" Width="50"><StackPanel><Label Content="" FontSize="16" Foreground="White" HorizontalAlignment="Center" FontFamily="Fonts/#iconfont"/></StackPanel></Button>
</Grid>

此时页面效果是这样的：

这样看着似乎也还行，是比较简约的风格；只是按钮背景透明后用户点击的区域不是太明显，我们继续加上按钮图片的试试看。

制作按钮组件素材

我们get一组按钮素材有几种方式：网上搜索、找UI同事、自己画。为了尽量降低违和感、使界面风格更统一，在找了几组素材效果都不太理想同事太忙的情况下我们先自己画。
作为非专业选手，这里尝试用野路子达成目的：利用PowerPoint可以设置形状“三维棱台”、“阴影”等格式的特点，用形状拖拽一个按钮出来。

按钮的背景颜色从主界面中其他控件的颜色中选择，阴影和立体效果通过PPT设置来实现。最初想的是画好后截图放在PS中去掉背景保存PNG，所以幻灯片的背景还选择了这个按钮所在区域的背景颜色，防止PS中魔棒工具删不干净边缘。后来发现在PPT中将形状组合后，直接右键另存为图片就可以保存成透明背景的图片了，yyds。

加入图片，根据效果微调

<Image Grid.Column="1" HorizontalAlignment="Center" VerticalAlignment="Bottom"Source="img/double.png" Margin="6,0,6,0" />

图片称底后调整一下按钮大小和位置，效果如下：

好像有点那么个意思了，从软件整体来看也不突兀。难度低、效率高，还要啥自行车？

WPF监控云台控制组件实现简单方案相关推荐

构建一个分布式操作系统的简单方案—答陈硕的“分布式系统中的进程标识”一文...
对分布式系统中的进程标识"一文的疑问刚才看到陈硕先生的一篇blog:"分布式系统中的进程标识",地址:http://www.cnblogs.com/Solstice/a ...
关于直播视频平台与监控视频平台技术架构方案
关于直播视频平台与监控视频平台技术架构方案前言讲个大实话,直播平台复杂在直播端(也就是播放端),而监控平台复杂在接入端(前端设备或平台). 至于技术难点,难者自知. 一.直播平台(想尽一切办法来降 ...
GPS时间服务器在电力监控系统中的应用方案
GPS时间服务器在电力监控系统中的应用方案前言近几年来,随着计算机自动化系统水平的提高,在各大计算机监控系统.微机保护装置.微机故障录波装置以及各类数据管理机得到了广泛的应用,而这些自动装置的配合 ...
子进程及时知道父进程已经退出的最简单方案
[精彩] 子进程及时知道父进程已经退出的最简单方案? http://www.chinaunix.net 作者:yuonunix 发表于:2003-10-31 10:14:14 [发表评论] [查看原 ...
DZ先生怪谈国标28181之大型监控组网ntpd校时方案
1. 自述还记得之前DZ先生讲过如何利用crontab做中小型校时方案吗?不记得的可以打开连接了解下https://blog.csdn.net/dzxs_gb28181/article/detail ...
前端监控与前端埋点方案
前端监控与前端埋点方案 https://blog.csdn.net/sinat_36521655/article/details/114650138 用户行为数据可以通过前端数据监控的方式获得,除 ...
服务器监控功能（3种方案）
服务器监控功能(3种方案) 一.Actuator监控 1. 添加依赖 2. application.yaml配置 3. 启动项目,访问二.SpringBoot Admin(单体) 1. Admin ...
java扫描局域网中可用ip_使用java线程扫描局域网ip简单方案
package com.cjh.thread; import java.io.BufferedReader; import java.io.IOException; import java.io.In ...
Ubuntu和Windows双系统服务器互相切换的简单方案
Ubuntu和Windows双系统服务器互相切换的简单方案适用场景解决方案适用场景服务器或者远端主机上装了Windows和Ubuntu双系统,但并没有联网BIOS条件.如何在事先进入了某个系统 ...
海康监控平台投屏电视墙方案切换失败故障
海康监控平台投屏电视墙方案切换失败故障平台版本: 故障提示:"设备不在线或登录失败,无法操作",提示如下图. 故障提示故障原因:海康B20视频矩阵宕机等: 故障解决: 1.登录 ...

WPF监控云台控制组件实现简单方案