Loading [MathJax]/jax/output/CommonHTML/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >专栏 >wpf listBox 多列大图片效果

wpf listBox 多列大图片效果

作者头像
lpxxn
发布于 2018-01-31 02:55:43
发布于 2018-01-31 02:55:43
2.4K00
代码可运行
举报
文章被收录于专栏:技术之路技术之路
运行总次数:0
代码可运行

修改ListBox的模版 多列大图片效果,加上删除button

看图

上代码!

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<Window x:Class="Thunder.SetCenter.RoomSetting.ActivityPhotoView"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="clr-namespace:Thunder.SetCenter.RoomSetting"
    xmlns:convertImage="clr-namespace:Thunder.SetCenter.FoodSetting"     
    Title="活动图片" Height="700" Width="850" Loaded="WinLoadedEvent">
    <Window.Resources>
        <convertImage:ConvertToRecipesImageInfo x:Key="ImageConverter"></convertImage:ConvertToRecipesImageInfo>
        <DataTemplate x:Key="ItemTemplate">
            <Grid  Width="200" Height="210" >
                <Grid.ColumnDefinitions>
                    <ColumnDefinition SharedSizeGroup="SingleWidthColumn" ></ColumnDefinition>
                </Grid.ColumnDefinitions>
                <Grid.Style>
                    <Style>
                        <Setter Property="TextBlock.Foreground" Value="Transparent"></Setter>
                    </Style>
                </Grid.Style>
                <Border Margin="2" 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=activePricture,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=id}" Style="{StaticResource CloseButton}" >                               
                            </Button>
                        </StackPanel>
                    </Grid>                   
                </Border>
            </Grid>
        </DataTemplate>
        <Style TargetType="{x:Type ListBoxItem}">
            <Setter Property="SnapsToDevicePixels" Value="true"/>
            <Setter Property="FontSize" Value="14"/>           
            <Setter Property="FocusVisualStyle" Value="{x:Null}"/>
            <Style.Resources>
                <!--SelectedItem with focus-->
                <SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" Color="LightBlue" Opacity=".4"/>
            </Style.Resources>

        </Style>
    </Window.Resources>
    <Grid >
        <Grid.RowDefinitions>
            <RowDefinition Height="589"></RowDefinition>
            <RowDefinition Height="73"></RowDefinition>
            <RowDefinition Height="24*" />
        </Grid.RowDefinitions>        
        <ListBox Grid.IsSharedSizeScope="True"   Grid.Row="0" Margin="5" Name="lsPricture" ItemTemplate="{StaticResource ItemTemplate}"
                 ScrollViewer.HorizontalScrollBarVisibility="Disabled" SnapsToDevicePixels="True">
            <ListBox.ItemsPanel>
                <ItemsPanelTemplate>
                    <WrapPanel Background="#F3FFFF" >
                        
                    </WrapPanel>
                </ItemsPanelTemplate>
            </ListBox.ItemsPanel>
        </ListBox>
        <StackPanel Grid.Row="1" HorizontalAlignment="Right"  Orientation="Horizontal">            
            <Button Content="添加 " Margin="0,17,10,21" Width="120" Click="btn_AddEvent"></Button>
            
            <TextBlock VerticalAlignment="Center" Margin="0,35,10,21">
                <Hyperlink Name="hpl_Back" Style="{StaticResource hpl_BackStyle}" Click="hpl_Back_Click">返回 Esc</Hyperlink>
            </TextBlock>
        </StackPanel>        
    </Grid>
</Window>
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
#region ConverToImageInfo 把DataTable里的转换成图片
    [System.Windows.Data.ValueConversion(typeof(byte[]),typeof(ImageSource))]
    public class ConvertToRecipesImageInfo:System.Windows.Data.IValueConverter
    {

        #region IValueConverter 成员

        public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
        {
            byte[] binaryimagedata=value as byte[];
            if (binaryimagedata == null) return "";
            using(Stream imageStreamSource =new MemoryStream(binaryimagedata,false))
            {
                
                JpegBitmapDecoder jpeDecoder=new JpegBitmapDecoder(imageStreamSource,BitmapCreateOptions.PreservePixelFormat,BitmapCacheOption.OnLoad);
                ImageSource imageSource=jpeDecoder.Frames[0];
                return imageSource;               
            }

        }

        public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
        {
            throw new NotImplementedException();
        }

        #endregion
    }
    #endregion
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
    <!--关闭按钮样式-->
    <Style x:Key="CloseButton" TargetType="{x:Type Button}">
        <Setter Property="OverridesDefaultStyle" Value="True"/>
        <Setter Property="IsTabStop" Value="False"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type 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>
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Shapes;
using ThunderSetCenterBLL.RoomSetting;
using System.Data;

namespace Thunder.SetCenter.RoomSetting
{
    /// <summary>
    /// ActivityPhotoView.xaml 的交互逻辑
    /// </summary>
    public partial class ActivityPhotoView : Window
    {
        #region Value
        private ActivityPrictureBLL bll_ActivityPrictureBLL = new ActivityPrictureBLL();
        #endregion


        #region Ini And WinEvent
        public ActivityPhotoView()
        {
            InitializeComponent();
        }

        public void WinLoadedEvent(object sender, RoutedEventArgs e)
        {
            BindingData();
        }
        #endregion



        #region  Add Del Binding
        /// <summary>
        /// 绑定
        /// </summary>
        public void BindingData()
        {
            DataTable _BingData = bll_ActivityPrictureBLL.GetAcitviPricture();
            lsPricture.ItemsSource = _BingData.DefaultView;
        }

        /// <summary>
        /// 删除
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        public void Del_PrictureEvent(object sender, RoutedEventArgs e)
        {
            Button _DelBtn = sender as Button;
            int _delID = (int)_DelBtn.Tag;
        }

        public void btn_AddEvent(object sender, RoutedEventArgs e)
        {

        }

        public void hpl_Back_Click(object sender, RoutedEventArgs e)
        {
            this.Close();
        }

        #endregion
    }
}
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
create table activePricture
(
	id int identity(1,1),
	activeName varchar(50),
	activePricture  image
)
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2012-11-20 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
silverlight ListBox 多列图片效果
这个功能之前用wpf写过一次这次用Silverlight写一次 这两种写法上基本上没有太大的差别 这个Demo并不完美,只是给大家提供一个思路 源码:SilverLightListPricture.r
lpxxn
2018/01/31
1.4K0
silverlight  ListBox 多列图片效果
SilverLight企业应用框架设计【二】框架画面
注意,这里每个顶部菜单的ICO图标不是动态的,朋友们,想让他变成动态的就自己动手吧
liulun
2022/05/09
6120
SilverLight企业应用框架设计【二】框架画面
【愚公系列】2023年04月 WPF运动控制平台-005.运动平台之功能实现(完结)
---- 一、运动平台之功能实现 1.位置计算 物理可用距离 (40000), 取料位:19945P, 打包位:-19360P 像素位置:取料位:20px 打包位:1020px 把脉冲转换位距离 步进驱动器设置细分 8 步进电机步进角 1.8° 导程:8mm 计算步进电机走1cm需要的脉冲数 360 / 1.8 = 200个脉冲转一圈 200 * 8 = 1600个脉冲转一圈(细分情况) 1600 / 8 = 200 (步进电机走1mm需要) 故:走1cm需要脉冲
愚公搬代码
2023/04/28
4500
【愚公系列】2023年04月 WPF运动控制平台-005.运动平台之功能实现(完结)
请来围观:WPF开发的微信客户端!!!
公司的同事离职了,接下来的日子可能会忙碌,能完善DEMO的时间也会少了,因此,把做的简易DEMO整体先记录一下,等后续不断的完善。
沙漠尽头的狼
2022/06/13
1.9K0
请来围观:WPF开发的微信客户端!!!
WPF TreeGrid MVVM 模式下自定义表格带展开缩放效果,并且可以获取点击行的数据
MVVM其实就是:Model 、View、ViewModel三个的简称,就像MVC一样。 Model就是模型。View就是视图。ViewModel就是和view进行绑定的。
Shunnet
2022/05/31
6K0
WPF TreeGrid MVVM 模式下自定义表格带展开缩放效果,并且可以获取点击行的数据
wpf 自定义窗体 干货 干货
首先效果图如下: 步骤: 新建一个资源文件WindowsStyles.xaml 修改内容如下 : <ResourceDictionary xmlns="http://schemas.micr
zls365
2021/04/02
4790
【愚公系列】2023年04月 WPF运动控制平台-003.运动控制平台的UI设计
---- 一、运动控制平台的UI设计 1.代码 <Window x:Class="MotionPlatform.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expr
愚公搬代码
2023/04/16
4900
【愚公系列】2023年04月 WPF运动控制平台-003.运动控制平台的UI设计
WPF实现列表分页控件的示例代码分享
[TemplatePart(Name = CountPerPageTextBoxTemplateName, Type = typeof(TextBox))]
用户7718188
2022/11/06
1.3K0
win10 uwp 商业游戏 界面添加图标感谢
在显示启动的时候,是需要加载游戏需要使用的资源,如果觉得这时需要控制进度条,就需要使用注入的方法,给他知道现在的进度,不过我现在不去做这里,于是就很简单的代码做出来启动页面。
林德熙
2018/09/18
7940
win10 uwp 商业游戏 
            界面添加图标感谢
Silverlight Telerik控件学习:数据录入、数据验证
相信很多人都听说过这句名言:garbage in ,garbage out ! 数据录入不规范(或错误)就象一颗定时炸弹,迟早会给系统带来麻烦,所以在数据录入时做好验证是很有必要的。 相对传统asp.net开发而言,SL4中的数据验证要轻松很多(主要得益于Xaml的Binding特性),步骤如下: 1、定义业务Model类时,在需要验证的属性setter中,写好业务逻辑,对于不合规范的value,要抛出异常! 同时切记Model类要实现INotifyPropertyChanged接口,同时每个setter方
菩提树下的杨过
2018/01/23
3K0
Silverlight Telerik控件学习:数据录入、数据验证
FluentValidation在C# WPF中的应用
介绍FluentValidation的文章不少,零度编程(站长注:原文已失连)的介绍我引用下:
沙漠尽头的狼
2024/01/26
2130
FluentValidation在C# WPF中的应用
WPF-ListBox
这里还是使用一个demo来展示ListBox的使用,这里是用LIstBox嵌套CheckBox,使用ListBox的SelectionChanged事件来实时告诉使用者选中了那个复选框,是true还是false。并最后有统计按钮,统计总共选了那些复选框。
MaybeHC
2024/04/23
900
WPF-ListBox
[WPF] WPF做的漂亮的登陆界面[附源码]
登陆界面上的logo都是从网上找的,请大家替换成自己公司的logo即可。。。。。 WPF界面库,非常漂亮的WPF界面【附源码】 https://www.itsvse.com/thread-4941-1-1.html WPF登陆界面美化: 1:账号和密码框都做了美化, 2:关闭按钮和登陆按钮都做了美化,当鼠标移动上去,都做了处理, 3:总体界面四个边角是圆弧形,挺好看的。。。。 代码如下,源码会在帖子下方:
zls365
2020/08/19
6.2K0
[WPF] WPF做的漂亮的登陆界面[附源码]
WPF --- 重写圆角DataGrid样式
因要符合UI设计, 需要一个圆角的 DataGrid 样式,且需要一个更美观的滚动条,所以重写了一下微软 「WPF」 原生的 DataGrid 的样式,包含如下内容:
Niuery Diary
2023/10/22
6940
WPF --- 重写圆角DataGrid样式
WPF 通过位处理合并图片 读取图片读取图片像素合并两张图片界面
本文告诉大家,在使用 WPF 合并两张图片的处理,可以使用像素之间的与或和异或的方式,对三个颜色的通道进行处理。
林德熙
2019/03/13
2.3K0
WPF 通过位处理合并图片
            读取图片读取图片像素合并两张图片界面
WPF 修改图片颜色
在 WPF 可以使用很多图片处理的方法,本文告诉大家的是一个图片处理,可以把处理的图片保存在文件。
林德熙
2018/09/19
3.4K0
WPF 修改图片颜色
Silverlight Load Client Image 加载客户端图片
Silverlight Load Client Image 加载客户端图片 这里做了一个用Silverlight加载客户端图片的例子。并且用了一个最简单的数据双向绑定。 beginning 这里例子的代码很简单不用做太多的说明。 前端界面设计 XAML: <UserControl x:Class="LoadClientImage.Page" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation
用户1172164
2018/03/01
7170
如何实现日期范围选择器
原文链接: https://github.com/WPFDevelopersOrg/WPFDevelopers
郑子铭
2024/12/20
1230
如何实现日期范围选择器
[WPF]动手写一个简单的消息对话框
消息对话框是UI界面中不可或缺的组成部分,用于给用户一些提示,警告或者询问的窗口。在WPF中,消息对话框是系统原生(user32.dll)的MessageBox,无法通过Style或者Template来修改消息对话框的外观。因此,当需要一个与应用程序主题风格一致的消息对话框时,只能自己动手造轮子了。
czwy
2023/11/23
4060
[WPF]动手写一个简单的消息对话框
[WPF自定义控件库]为Form和自定义Window添加FunctionBar
我常常看到同一个应用程序中的表单的按钮————也就是“确定”、“取消”那两个按钮————实现得千奇百怪,其实只要使用统一的Style起码就可以统一按钮的大小,而我喜欢更进一步将”确定“、”取消“或其它按钮封装进一个自定义控件里。
dino.c
2019/06/11
7830
[WPF自定义控件库]为Form和自定义Window添加FunctionBar
推荐阅读
相关推荐
silverlight ListBox 多列图片效果
更多 >
领券
社区富文本编辑器全新改版!诚邀体验~
全新交互,全新视觉,新增快捷键、悬浮工具栏、高亮块等功能并同时优化现有功能,全面提升创作效率和体验
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
查看详情【社区公告】 技术创作特训营有奖征文