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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏DOTNET

ASP.NET Web API编程——模型验证与绑定

1.模型验证 使用特性约束模型属性 可以使用System.ComponentModel.DataAnnotations提供的特性来限制模型。 例如,Requi...

99450
来自专栏DOTNET

ASP.NET Web API编程——序列化与内容协商

1 多媒体格式化器 多媒体类型又叫MIME类型,指示了数据的格式。在HTTP协议中多媒体类型描述了消息体的格式。一个多媒体类型包括两个字符串:类型和子类型。 例...

42760
来自专栏MasiMaro 的技术博文

PE解析器的编写(四)——数据目录表的解析

在PE结构中最重要的就是区块表和数据目录表,上节已经说明了如何解析区块表,下面就是数据目录表,在数据目录表中一般只关心导入表,导出表和资源这几个部分,但是资源实...

28820
来自专栏C#

DotNet程序集解析

    在.NET Framework框架中,程序集是重用、安全性以及版本控制的最小单元。程序集的定义为:程序集是一个或多个类型定义文件及资源文件的集合。...

19590
来自专栏菩提树下的杨过

利用xml轻松读取web.config中的用户自定义节

虽然vs.net2.0为我们提供了 ConfigurationManager.AppSettings["..."]; ConfigurationManage...

189100
来自专栏听雨堂

VB中Unicode的转换

    VB本身的字符串格式就是Unicode,用Winsock发送字符串的话,会默认把字符串转换为Ansi的格式进行发送。Ansi格式,对于英文符号等仍然使用...

25880
来自专栏魂祭心

原 状态机 搜索字符串中的特定占位符

34870
来自专栏小灰灰

Java 实现 markdown转Html

背景 将markdown文档转换为html,主要是web应用中有些场景会用到,如博客系统,支持markdown语法的评论功能等 要自己去实现这个功能,并没有那么...

675100
来自专栏林德熙的博客

WPF 开发

如果使用NamedPipeServerStream、Mutex做单实例,需要传入字符串,这时如果传入一个固定的字符串,会在多用户的时候无法使用。

24910
来自专栏码农阿宇

关于CS1061报错(XX不包含XXX的定义,并且找不到类型为XX的第一个参.....)的一种可能的解决的办法

在我编程中,我遇到了一个这样的报错, ? 可是我引用的product类中又确实定义了这么一个方法, protected void BindPageData(i...

28160

扫码关注云+社区

领取腾讯云代金券