wpf listBox 多列大图片效果

修改ListBox的模版 多列大图片效果，加上删除button

看图

上代码！

<Window x:Class="Thunder.SetCenter.RoomSetting.ActivityPhotoView"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="clr-namespace:Thunder.SetCenter.RoomSetting"
    xmlns:convertImage="clr-namespace:Thunder.SetCenter.FoodSetting"     
    Title="活动图片" Height="700" Width="850" Loaded="WinLoadedEvent">
    <Window.Resources>
        <convertImage:ConvertToRecipesImageInfo x:Key="ImageConverter"></convertImage:ConvertToRecipesImageInfo>
        <DataTemplate x:Key="ItemTemplate">
            <Grid  Width="200" Height="210" >
                <Grid.ColumnDefinitions>
                    <ColumnDefinition SharedSizeGroup="SingleWidthColumn" ></ColumnDefinition>
                </Grid.ColumnDefinitions>
                <Grid.Style>
                    <Style>
                        <Setter Property="TextBlock.Foreground" Value="Transparent"></Setter>
                    </Style>
                </Grid.Style>
                <Border Margin="2" BorderThickness="1" BorderBrush="SteelBlue" CornerRadius="3">
                    <Grid   Margin="0">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="185"></RowDefinition>
                            <RowDefinition></RowDefinition>                            
                        </Grid.RowDefinitions>
                        <Image Grid.Row="0"  Source="{Binding Path=activePricture,Converter={StaticResource ImageConverter}}" Margin="0"  ></Image>
                        <StackPanel Grid.Row="1" HorizontalAlignment="Right" >
                            <Button Width="20"  BorderThickness="0" Background="Transparent" Click="Del_PrictureEvent"  Name="btn_Del"  Tag="{Binding Path=id}" Style="{StaticResource CloseButton}" >                               
                            </Button>
                        </StackPanel>
                    </Grid>                   
                </Border>
            </Grid>
        </DataTemplate>
        <Style TargetType="{x:Type ListBoxItem}">
            <Setter Property="SnapsToDevicePixels" Value="true"/>
            <Setter Property="FontSize" Value="14"/>           
            <Setter Property="FocusVisualStyle" Value="{x:Null}"/>
            <Style.Resources>
                <!--SelectedItem with focus-->
                <SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" Color="LightBlue" Opacity=".4"/>
            </Style.Resources>

        </Style>
    </Window.Resources>
    <Grid >
        <Grid.RowDefinitions>
            <RowDefinition Height="589"></RowDefinition>
            <RowDefinition Height="73"></RowDefinition>
            <RowDefinition Height="24*" />
        </Grid.RowDefinitions>        
        <ListBox Grid.IsSharedSizeScope="True"   Grid.Row="0" Margin="5" Name="lsPricture" ItemTemplate="{StaticResource ItemTemplate}"
                 ScrollViewer.HorizontalScrollBarVisibility="Disabled" SnapsToDevicePixels="True">
            <ListBox.ItemsPanel>
                <ItemsPanelTemplate>
                    <WrapPanel Background="#F3FFFF" >
                        
                    </WrapPanel>
                </ItemsPanelTemplate>
            </ListBox.ItemsPanel>
        </ListBox>
        <StackPanel Grid.Row="1" HorizontalAlignment="Right"  Orientation="Horizontal">            
            <Button Content="添加 " Margin="0,17,10,21" Width="120" Click="btn_AddEvent"></Button>
            
            <TextBlock VerticalAlignment="Center" Margin="0,35,10,21">
                <Hyperlink Name="hpl_Back" Style="{StaticResource hpl_BackStyle}" Click="hpl_Back_Click">返回 Esc</Hyperlink>
            </TextBlock>
        </StackPanel>        
    </Grid>
</Window>

　　

#region ConverToImageInfo 把DataTable里的转换成图片
    [System.Windows.Data.ValueConversion(typeof(byte[]),typeof(ImageSource))]
    public class ConvertToRecipesImageInfo:System.Windows.Data.IValueConverter
    {

        #region IValueConverter 成员

        public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
        {
            byte[] binaryimagedata=value as byte[];
            if (binaryimagedata == null) return "";
            using(Stream imageStreamSource =new MemoryStream(binaryimagedata,false))
            {
                
                JpegBitmapDecoder jpeDecoder=new JpegBitmapDecoder(imageStreamSource,BitmapCreateOptions.PreservePixelFormat,BitmapCacheOption.OnLoad);
                ImageSource imageSource=jpeDecoder.Frames[0];
                return imageSource;               
            }

        }

        public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
        {
            throw new NotImplementedException();
        }

        #endregion
    }
    #endregion

　　

    <!--关闭按钮样式-->
    <Style x:Key="CloseButton" TargetType="{x:Type Button}">
        <Setter Property="OverridesDefaultStyle" Value="True"/>
        <Setter Property="IsTabStop" Value="False"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type Button}">
                    <Border Background="Transparent">
                        <Canvas>
                            <Line X1="4" Y1="4" X2="11" Y2="11" Stroke="#9FA1A0" StrokeThickness="2"></Line>
                            <Line X1="11" Y1="4" X2="4" Y2="11" Stroke="#9FA1A0" StrokeThickness="2"></Line>
                        </Canvas>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

　　

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
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.Imaging;
using System.Windows.Shapes;
using ThunderSetCenterBLL.RoomSetting;
using System.Data;

namespace Thunder.SetCenter.RoomSetting
{
    /// <summary>
    /// ActivityPhotoView.xaml 的交互逻辑
    /// </summary>
    public partial class ActivityPhotoView : Window
    {
        #region Value
        private ActivityPrictureBLL bll_ActivityPrictureBLL = new ActivityPrictureBLL();
        #endregion


        #region Ini And WinEvent
        public ActivityPhotoView()
        {
            InitializeComponent();
        }

        public void WinLoadedEvent(object sender, RoutedEventArgs e)
        {
            BindingData();
        }
        #endregion



        #region  Add Del Binding
        /// <summary>
        /// 绑定
        /// </summary>
        public void BindingData()
        {
            DataTable _BingData = bll_ActivityPrictureBLL.GetAcitviPricture();
            lsPricture.ItemsSource = _BingData.DefaultView;
        }

        /// <summary>
        /// 删除
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        public void Del_PrictureEvent(object sender, RoutedEventArgs e)
        {
            Button _DelBtn = sender as Button;
            int _delID = (int)_DelBtn.Tag;
        }

        public void btn_AddEvent(object sender, RoutedEventArgs e)
        {

        }

        public void hpl_Back_Click(object sender, RoutedEventArgs e)
        {
            this.Close();
        }

        #endregion
    }
}

　　

create table activePricture
(
	id int identity(1,1),
	activeName varchar(50),
	activePricture  image
)