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>

　　

<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 )

　　

本文转自lpxxn博客园博客，原文链接：http://www.cnblogs.com/li-peng/archive/2012/11/20/2778657.html，如需转载请自行联系原作者