silverlight ListBox 多列图片效果

2023-07-25 22:59:40

这个功能之前用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="" Height="" >

                <Grid.ColumnDefinitions>

                    <ColumnDefinition></ColumnDefinition>

                </Grid.ColumnDefinitions>

                <Border  BorderThickness="" BorderBrush="SteelBlue" CornerRadius="">

                    <Grid   Margin="">

                        <Grid.RowDefinitions>

                            <RowDefinition Height=""></RowDefinition>

                            <RowDefinition></RowDefinition>

                        </Grid.RowDefinitions>

                        <Image Grid.Row=""  Source="{Binding Path=streamsInfo,Converter={StaticResource ImageConverter}}" Margin=""  ></Image>

                        <StackPanel Grid.Row="" HorizontalAlignment="Right" >

                            <Button Width=""  BorderThickness="" 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="" Y1="" X2="" Y2="" Stroke="#9FA1A0" StrokeThickness=""></Line>

                                <Line X1="" Y1="" X2="" Y2="" Stroke="#9FA1A0" StrokeThickness=""></Line>

                            </Canvas>

                        </Border>

                    </ControlTemplate>

                </Setter.Value>

            </Setter>

        </Style>

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

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

 <ListBox Grid.Row=""   Margin="" Width="" 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="" Y1="" X2="" Y2="" Stroke="#9FA1A0" StrokeThickness=""></Line>

                                <Line X1="" Y1="" X2="" Y2="" Stroke="#9FA1A0" StrokeThickness=""></Line>

                            </Canvas>

                        </Border>

                    </ControlTemplate>

                </Setter.Value>

            </Setter>

        </Style>

        <DataTemplate x:Key="ItemTemplate">

            <Grid  Width="" Height="" >

                <Grid.ColumnDefinitions>

                    <ColumnDefinition></ColumnDefinition>

                </Grid.ColumnDefinitions>

                <Border  BorderThickness="" BorderBrush="SteelBlue" CornerRadius="">

                    <Grid   Margin="">

                        <Grid.RowDefinitions>

                            <RowDefinition Height=""></RowDefinition>

                            <RowDefinition></RowDefinition>

                        </Grid.RowDefinitions>

                        <Image Grid.Row=""  Source="{Binding Path=streamsInfo,Converter={StaticResource ImageConverter}}" Margin=""  ></Image>

                        <StackPanel Grid.Row="" HorizontalAlignment="Right" >

                            <Button Width=""  BorderThickness="" 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=""></RowDefinition>

            <RowDefinition Height=""></RowDefinition>

        </Grid.RowDefinitions>

        <ListBox Grid.Row=""   Margin="" Width="" 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=""  VerticalAlignment="Center" HorizontalAlignment="Center"  Orientation="Horizontal">

            <Button Content="添加 " Width="" 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

码农公寓

相关文章