這個功能之前用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 多列图片效果的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。