silverlight ListBox 多列图片效果

这个功能之前用wpf写过一次这次用Silverlight写一次

这两种写法上基本上没有太大的差别

这个Demo并不完美，只是给大家提供一个思路

源码：SilverLightListPricture.rar

看一下效果

思路是：

修改ItemTemplate样式

ItemsPanelTemplate 用WrapPanel显示

先为image绑定图片添加一个转换类

using System;
using System.IO;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Ink;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Media.Imaging;
using System.Windows.Shapes;namespace SilverLightListPricture
{public class ConvertToRecipesImageInfo : IValueConverter{public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture){Stream _stream = value as Stream;BitmapImage bitmap = new BitmapImage();bitmap.SetSource(_stream);return bitmap;}public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture){throw new NotImplementedException();}}
}

我先把前端代码分解一下最后给出全部代码
先看一下是怎么修改listbox的ItemTemplate

是用一个image和一个*button做删除

 <DataTemplate x:Key="ItemTemplate"><Grid  Width="200" Height="210" ><Grid.ColumnDefinitions><ColumnDefinition></ColumnDefinition></Grid.ColumnDefinitions><Border  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=streamsInfo,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=activePricture}" Style="{StaticResource CloseButton}" ></Button></StackPanel></Grid></Border></Grid></DataTemplate>

button的样式

<Style x:Key="CloseButton" TargetType="Button">            <Setter Property="IsTabStop" Value="False"/><Setter Property="Template"><Setter.Value><ControlTemplate TargetType="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>

listbox用的时候要把它的ItemsPanelTemplate改用WrapPanel

重要的是ScrollViewer.HorizontalScrollBarVisibility是定要为Disabled这样就能防止wrapPanel横向滚动条出现

 <ListBox Grid.Row="0"   Margin="5" Width="640" Name="lsPricture"  ScrollViewer.VerticalScrollBarVisibility="Visible" ScrollViewer.HorizontalScrollBarVisibility="Disabled"ItemTemplate="{StaticResource ItemTemplate}"><ListBox.ItemsPanel><ItemsPanelTemplate><tools:WrapPanel Width="Auto" Background="#F3FFFF" ></tools:WrapPanel></ItemsPanelTemplate></ListBox.ItemsPanel></ListBox>

完整的前台代码

<UserControl x:Class="SilverLightListPricture.ListBoxPrictueDEMO"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"xmlns:d="http://schemas.microsoft.com/expression/blend/2008"xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"mc:Ignorable="d"xmlns:convertImage="clr-namespace:SilverLightListPricture"xmlns:tools="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Toolkit"><UserControl.Resources><convertImage:ConvertToRecipesImageInfo x:Key="ImageConverter"/><!--关闭按钮样式--><Style x:Key="CloseButton" TargetType="Button"><Setter Property="IsTabStop" Value="False"/><Setter Property="Template"><Setter.Value><ControlTemplate TargetType="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><DataTemplate x:Key="ItemTemplate"><Grid  Width="200" Height="210" ><Grid.ColumnDefinitions><ColumnDefinition></ColumnDefinition></Grid.ColumnDefinitions><Border  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=streamsInfo,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=activePricture}" Style="{StaticResource CloseButton}" ></Button></StackPanel></Grid></Border></Grid></DataTemplate></UserControl.Resources><Grid x:Name="LayoutRoot" Background="White"><Grid.RowDefinitions><RowDefinition Height="600"></RowDefinition><RowDefinition Height="73"></RowDefinition></Grid.RowDefinitions><ListBox Grid.Row="0"   Margin="5" Width="640" Name="lsPricture"  ScrollViewer.VerticalScrollBarVisibility="Visible" ScrollViewer.HorizontalScrollBarVisibility="Disabled"ItemTemplate="{StaticResource ItemTemplate}"><ListBox.ItemsPanel><ItemsPanelTemplate><tools:WrapPanel Width="Auto" Background="#F3FFFF" ></tools:WrapPanel></ItemsPanelTemplate></ListBox.ItemsPanel></ListBox><StackPanel Grid.Row="1"  VerticalAlignment="Center" HorizontalAlignment="Center"  Orientation="Horizontal"><Button Content="添加 " Width="120" Click="btn_AddEvent"></Button></StackPanel></Grid>
</UserControl>

后台代码

using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.IO;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;namespace SilverLightListPricture
{public partial class ListBoxPrictueDEMO : UserControl{ObservableCollection<ImageInfo> SourceCollection = new ObservableCollection<ImageInfo>();public ListBoxPrictueDEMO(){InitializeComponent();bindSource();}//删除public void Del_PrictureEvent(object sender, RoutedEventArgs e){}void bindSource(){lsPricture.ItemsSource = SourceCollection;}public void btn_AddEvent(object sender, RoutedEventArgs e){OpenFileDialog openFileDialog = new OpenFileDialog();openFileDialog.Filter = "图片文件(*.jpg,*.png,*.bmp)|*.jpg;*.png;*.bmp|All Files (*.*)|*.*";if (openFileDialog.ShowDialog() == true){FileInfo file = openFileDialog.File;Stream stream = file.OpenRead();SourceCollection.Add(new ImageInfo { streamsInfo = stream, activePricture = "tag" });}}}public class ImageInfo{public string activePricture{get;set;}public Stream streamsInfo{get;set;}}
}

好了就说到这

源码：SilverLightListPricture.rar

silverlight ListBox 多列图片效果相关推荐

wpf listBox 多列大图片效果
修改ListBox的模版多列大图片效果,加上删除button 看图上代码! <Window x:Class="Thunder.SetCenter.RoomSetting.Activ ...
php表格列宽拖拽,JavaScript_JQuery拖动表头边框线调整表格列宽效果代码，类似于桌面程序中的表格拖动 - phpStudy...
JQuery拖动表头边框线调整表格列宽效果代码类似于桌面程序中的表格拖动表头的效果,当鼠标停留在表头边框线上时,鼠标会变成表示左右拖动的形状,接着拖动鼠标,会在表格中出现一条随鼠标移动的竖线,最后放 ...
鼠标滚动缩放图片效果
前段时间本人在做项目时,做了一个鼠标滚动缩放图片效果,图片支持多个,多个图片循环缩放,花了点时间整理了下,把它贴出来,与大家分享下,在ie6.0,ie7.0,firefox都测试过,没有问题. < ...
HTML5与jQuery实现渐变绚丽网页图片效果
HTML5与jQuery如何实现渐变绚丽网页图片效果呢?通过HTML5和jQuery创建一个灰度/彩色的实现绚丽渐变效果.在HTML5出现之前,要想实现此类似渐变效果,需要彩图和灰度图像 ...
29.CSS3边框图片效果
第二十三章 CSS边框图片效果一.属性解释用几个属性就可以嵌入图片形式的边框. 1.border-image-source : 引入背景图片地址 2.border-image-slice : ...
在创建的Silverlight Control中使用图片
在创建的Silverlight Control中使用图片在做控件的Template的时,有可能需要用到位图.但是直接把图片放到ControlTemplate中去,在编译运行时会有xamlprase ...
开源ImageFilter库v0.4：新增26种图片效果
开源ImageFilter库v0.4:新增26种图片效果在原有70多种滤镜(v0.3)基础上,又新增实现26种图片效果.目前三个平台的源码已同步并测试完毕. 有朋友反映在ios平台上使用时出现编译错 ...
开源ImageFilter库v0.2：新增7类滤镜，支持12种图片效果
开源ImageFilter库v0.2:新增7类滤镜,支持12种图片效果经过近三天的开发,在原有40套滤镜(v0.1)基本上,又新增实现了7类滤镜(v0.2),通过组合使用,可直接做出12种图片效果. ...
开源ImageFilter库v0.3：新增22种图片效果
开源ImageFilter库v0.3:新增22种图片效果在原有50多套滤镜(v0.1)基础上,又新增实现22种图片效果.目前三个平台的源码已同步并测试完毕. 下面是图片效果: 原图: ZoomBlu ...

silverlight ListBox 多列图片效果

silverlight ListBox 多列图片效果相关推荐

最新文章

热门文章