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

概述

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

大概思路

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

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

云台控制按钮控件

云台控制按钮的.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="&#xe686;" 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="&#xe685;" 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="&#xe80a;" 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="&#xe688;" 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="&#xe687;" 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="&#xe633;" 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="&#xe67e;" 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="&#xe684;" 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="&#xe683;" 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" />

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

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