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>

<br>#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

)