AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

silverlight ListBox 多列图片效果

2017-10-18 915
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介：

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

 本文转自lpxxn博客园博客，原文链接：http://www.cnblogs.com/li-peng/p/3408357.html，如需转载请自行联系原作者

文章标签：
C#
前端开发
关键词：
silverlight listbox
silverlight listbox图片
silverlight图片
吞吞吐吐的
目录
相关文章
技术小甜
|
C# 前端开发 Web App开发
[Silverlight]打造具有放大缩小效果的图片导航
技术小甜
1118 0
科技小能手
|
前端开发
Silverlight实用窍门系列：43.Silverlight从ListBox拖拽图标到另一ListBox
科技小能手
954 0
科技小能手
Silverlight实用窍门系列：50.InkPresenter涂鸦板的基本使用，以及将效果保存为Png图片【附带源码实例】
科技小能手
1039 0
技术小胖子
|
Windows
稳扎稳打Silverlight(36) - 3.0控件之TreeView, ListBox增强, DataGrid增强, MediaElement增强
技术小胖子
989 0
科技小能手
Silverlight实用窍门系列：60.Silverlight中自定义Behavior，实现图片动画渐变Behavior
科技小能手
985 0
技术小胖子
Silverlight中的ListBox横向显示CheckBox
技术小胖子
1073 0
技术小胖子
|
PHP 索引
稳扎稳打Silverlight(5) - 2.0控件之ListBox, MediaElement, MultiScaleImage, PasswordBox
技术小胖子
1162 0
技术小胖子
|
索引
稳扎稳打Silverlight(17) - 2.0数据之详解DataGrid, 绑定数据到ListBox
技术小胖子
871 0
技术小胖子
|
索引
稳扎稳打Silverlight(17) - 2.0数据之详解DataGrid, 绑定数据到ListBox
技术小胖子
818 0
技术小胖子
上接稳扎稳打Silverlight(17) - 2.0数据之详解DataGrid, 绑定数据到ListBox
技术小胖子
1029 0

热门文章

最新文章

  • 1
    创建Silverlight自定义启动画面
  • 2
    一起谈.NET技术，Silverlight 2.5D RPG游戏技巧与特效处理：（九）粒子系统
  • 3
    快速浏览Silverlight3 Beta：在线与离线状态检测
  • 4
    ArcGIS API for Silverlight 当DataGrid选中项时，地图聚焦弹出窗口，并可以播放音频文件
  • 5
    分享Silverlight/WPF/Windows Phone一周学习导读(12月13日-12月19日)
  • 6
    谈谈Silverlight 2中的视觉状态管理 Part2
  • 7
    Silverlight实用窍门系列：69.Silverlight的ScrollViewer
  • 8
    Silverlight网络寻奇 at 090428
  • 9
    推荐并简要分析一个silverlight的相册DEMO--ImageSnipper(V2)
  • 10
    Silverlight动画制作之From/To/By基本动画
  • 1
    Silverlight & Blend动画设计系列二：旋转动画（RotateTransform）
    1028
  • 2
    silverlight，WPF动画终极攻略之白云飘，坐车去旅游篇（Blend 4开发）
    1265
  • 3
    silverlight，WPF动画终极攻略之迟来的第三章 动画整合篇（Blend 4开发）
    1164
  • 4
    Silverlight & Blend动画设计系列六：动画技巧（Animation Techniques）之对象与路径转化、波感特效
    1062
  • 5
    Silverlight & Blend动画设计系列五：故事板(StoryBoards)和动画(Animations)
    953
  • 6
    Silverlight & Blend动画设计系列四：倾斜动画（SkewTransform）
    853
  • 7
    Silverlight & Blend动画设计系列三：缩放动画（ScaleTransform）
    946
  • 8
    在Silverlight程序中使用Thread一个很容易被忽略的问题
    755
  • 9
    Silverlight Map 技术点总结
    990
  • 10
    silverlight起步（二）——第一个silverligth
    896

    • 相关电子书

    更多
  • 低代码开发师（初级）实战教程
  • 冬季实战营第三期：MySQL数据库进阶实战
  • 阿里巴巴DevOps 最佳实践手册
    • 下一篇
    阿里云oss简介和如何对接使用