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