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