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 多列图片效果的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。