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,如需转载请自行联系原作者


相关文章
|
6月前
C#WPF 图片在显示时没有问题,但在运行时图片显示不出来的解决
选中项目,点击右上角的显示全部文件按钮,会将默认隐藏的文件显示出来,选中所需图片,右键,添加到项目,然后选择图片查看属性,生成操作选择resource。完毕。本人目前的解决方案。
257 41
C#WPF 图片在显示时没有问题,但在运行时图片显示不出来的解决
|
8月前
|
C# 虚拟化 开发者
WPF技术之ListBox控件
WPF ListBox控件是一种用于显示和选择多个项的常用控件。它可以展示任意类型的数据,并允许用户通过鼠标或键盘进行选择操作
588 0
|
8月前
WPF-样式问题-处理ListBox、ListView子项内容全填充问题
WPF-样式问题-处理ListBox、ListView子项内容全填充问题
112 0
|
8月前
WPF-样式问题-ListBox或ListView中子项全填充去除边线问题
WPF-样式问题-ListBox或ListView中子项全填充去除边线问题
64 0
如何解决WPF中 ScrollViewer 内包含 TreeView 或者 ListBox 等控件时滚轮事件被劫持的问题
如何解决WPF中 ScrollViewer 内包含 TreeView 或者 ListBox 等控件时滚轮事件被劫持的问题
|
C#
WPF 调用资源图片
原文:WPF 调用资源图片      最近做的wpf项目中,在开发的时候,把图片放到了bin下面,采用了imagePath =System.IO.Directory.GetCurrentDirectory()+"/images/starShow.
1261 0
|
C# C++
WPF - Group分组对ListBox等列表样式的约束
原文:WPF - Group分组对ListBox等列表样式的约束   在做WPF主题支持时,出现一个分组引起的莫名错误,可是折腾了我一番。在没有使用样式时,列表分组很正常,使用了别人写的ListBox列表样式后,发现GroupItem分组区没有内容,是空的,本篇把这一问题的解决过程给大家说一下,做主题时可以注意分组对列表样式的限制了。
1634 0
|
C#
【C#/WPF】Image图片的Transform变换:平移、缩放、旋转
原文:【C#/WPF】Image图片的Transform变换:平移、缩放、旋转 WPF中图像控件Image的变换属性Transform: 平移 缩放 旋转 即要想实现图片的平移、缩放、旋转,是修改它所在的Image控件的Transform变换属性。
4733 0
|
C#
【C#/WPF】图片的切割/切图/裁剪图片
原文:【C#/WPF】图片的切割/切图/裁剪图片 前台准备两个Image控件。上面是显示原图,下面显示切割后的效果。 对应的后台代码: public par...
2116 0
|
C# 图形学
在WPF里面实现以鼠标位置为中心缩放移动图片
原文:在WPF里面实现以鼠标位置为中心缩放移动图片 在以前的文章使用WPF Resource以及Transform等技术实现鼠标控制图片缩放和移动的效果里面,介绍了如何在WPF里面移动和放大缩小图片,程序也支持使用滚轮的方式缩放图片。
1588 0