ToupCam API 使用手册（2）
基于官方SDK，API手册版本
1.7.6855.20160217，cs文件版本44.16010.2019.1128
官方SDK下载地址：SDK
本文章主要讲解一下自定义图片列表控件，配合自定义的图片列表控件，可以对相机拍照后的图片进行直接的预览，并对图片进行简单的删除操作，实现简单的图片管理功能。
文章目录
- 构建前端
- 准备工作
- 新建PictureBoxList控件
- Main页面引用
- 运行效果
构建前端
ComboBox，用来控制选择相机，并打开相机PictureBox，用来显示相机的视频流PictureBoxList，自定义控件，用来展示拍摄到的图片。单击删除按钮，可以对图片进行删除并支持添加自定义事件OnItemDeleteClick，方便执行其它操作，比如将图片从硬盘中删除Button，用来拍照，向相机发送拍照指令
准备工作
ImageUtil.cs
引入工具类
ImageUtil，方便对图片的一些操作，比如Byte转Bitmap、Bitmap转BitmapImage等
OnItemDeleteClickEventArgs.cs、OnItemDoubleClickEventArgs.cs
分别对应图片列表中对象的
删除按钮、双击等事件用到的参数
CommonConverter
常用转换器，里面有
ByteToBitMapImageConverter会在后面用到
新建PictureBoxList控件
- 前端代码如下：
<UserControl x:Class="ToupCamTestWPF.Controls.PictureBoxList"
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:converter="clr-namespace:ToupCamTestWPF.Converter"
xmlns:local="clr-namespace:ToupCamTestWPF.Controls"
mc:Ignorable="d" Unloaded="UserControl_Unloaded"
d:DesignHeight="450" d:DesignWidth="800">
<UserControl.Resources>
<converter:ImageByteToBitmapImageConverter x:Key="ByteToBitMapImageConverter"/>
<Style TargetType="{x:Type ListBoxItem}">
<Setter Property="SnapsToDevicePixels" Value="true"/>
<Setter Property="OverridesDefaultStyle" Value="true"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ListBoxItem}">
<Grid SnapsToDevicePixels="true">
<Border x:Name="Border" Background="Transparent" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Width="170" BorderBrush="#0091B2" Margin="5" Padding="0 5 0 5" BorderThickness="1" Height="auto"/>
<ContentPresenter />
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsSelected" Value="true">
<Setter Property="Background" TargetName="Border" Value="Transparent"/>
<Setter Property="BorderBrush" TargetName="Border" Value="#0091B2"/>
<Setter Property="BorderThickness" TargetName="Border" Value="3"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</UserControl.Resources>
<Grid>
<ScrollViewer ScrollViewer.VerticalScrollBarVisibility="Auto" ScrollViewer.HorizontalScrollBarVisibility="Auto">
<ListBox x:Name="item_Control" Background="Transparent" SelectedItem="{Binding SelectedItem,UpdateSourceTrigger=PropertyChanged,RelativeSource={RelativeSource Mode=FindAncestor,AncestorType={x:Type UserControl}}}"
ItemsSource="{Binding ImagesSource,RelativeSource={RelativeSource Mode=FindAncestor,AncestorType={x:Type UserControl}}}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<!--绑定类型为UserControl的祖元素-->
<StackPanel Orientation="{Binding ListOrientation,RelativeSource={RelativeSource Mode=FindAncestor,AncestorType={x:Type UserControl}}}"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<StackPanel HorizontalAlignment="Center" Width="160" Margin="5" ContextMenu="{Binding ItemContextMenu,RelativeSource={RelativeSource AncestorType={x:Type UserControl},Mode=FindAncestor},Mode=TwoWay}">
<StackPanel.Style>
<Style TargetType="StackPanel">
<Style.Triggers>
<Trigger Property="Selector.IsSelected" Value="true">
<Setter Property="Background" Value="AliceBlue"></Setter>
</Trigger>
</Style.Triggers>
</Style>
</StackPanel.Style>
<Image Width="150" Height="115" Margin="5 5 5 5" Stretch="Fill" PreviewMouseLeftButtonDown="Image_PreviewMouseLeftButtonDown" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<Image.Source>
<MultiBinding Converter="{StaticResource ResourceKey=ByteToBitMapImageConverter}" ConverterParameter="FormatLastFirst">
<Binding Path="ItemBitmapImage"/>
<Binding Path="ImageByte"/>
</MultiBinding>
</Image.Source>
</Image>
<StackPanel>
<Grid Margin="5 3 5 5">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Button Content="删除" x:Name="btn_delete" Grid.Column="1" Padding="0" Width="40" Height="30" VerticalAlignment="Center" HorizontalAlignment="Right" Click="Btn_delete_Click"/>
</Grid>
</StackPanel>
</StackPanel>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ListBox>
</ScrollViewer>
</Grid>
</UserControl>
- 后台代码如下：
using System;
using System.Windows;
using System.Windows.Input;
using System.Windows.Controls;
using System.Collections;
using ToupCamTestWPF.Controls.EventArgs;
namespace ToupCamTestWPF.Controls
{
/// Main页面引用
- 前台代码添加命名空间：
xmlns:controls="clr-namespace:ToupCamTestWPF.Controls"
- 前台代码添加控件：
<controls:PictureBoxList x:Name="pic_box" Grid.Row="2" ListOrientation="Horizontal" OnItemDeleteClick="pic_box_OnItemDeleteClick"></controls:PictureBoxList>
- 后台代码添加删除按钮单击事件：
private void pic_box_OnItemDeleteClick(object sender, Controls.EventArgs.OnItemDeleteClickEventArgs e)
{
string file_path = e.ImageItem.ImageUrl;
if (File.Exists(file_path))
{
try
{
File.Delete(file_path);
}
catch { }
}
list.Remove(e.ImageItem);
}
运行效果
演示项目下载地址：下载地址