silverlight ListBox 多列图片效果
时间:2022-04-25
本文章向大家介绍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
- 【C】用C语言提取bmp图片像素,并进行K-means聚类分析——容易遇到的问题
- SEED缓冲区溢出实验笔记
- HTTP严格安全传输(HTTP Strict Transport Security, HSTS)chromuim实现源码分析(一)
- Linux下ls命令显示符号链接权限为777的探索
- Django form表单
- Django ORM那些相关操作
- 使用mitmproxy嗅探双向认证ssl链接——嗅探AWS IoT SDK的mqtts
- Django中ORM介绍和字段及其参数
- 几个实现分页的方法
- 如何识别IDA反汇编中动态链接库中的函数
- Kali Linux安装TL-WN821N USB无线网卡驱动(make失败)
- Cookie、Session登陆验证相关介绍和用法
- 题型分析
- .NET CORE 框架ABP的代码生成器(ABP Code Power Tools )使用说明文档
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- InvocationHandler中invoke方法中的第一个参数proxy的用途
- height、offsetheight、clientheight、scrollheight、innerheight、outerheight
- mysql sql-mode 解析和设置
- JAVABEAN EJB POJO区别
- @Component和@Bean以及@Autowired、@Resource
- mybatis generator and 和or条件
- 『.Net反射』ILGenerator.Emit 动态MSIL 编程
- Spring通过XML配置文件以及通过注解形式来AOP 来实现前置,后置,环绕,异常通知
- 切面编程(环绕通知与前后置通知区别)
- Spring在代码中获取bean的几种方式
- Spring 一个接口多个实现类怎么注入
- ASP.NET MVC Controller的激活
- js 逗号表达式
- spring动态调用方法
- Spring AOP动态代理原理与实现方式