iis服务器助手广告广告
返回顶部
首页 > 资讯 > 后端开发 > 其他教程 >WPF使用WrapPanel实现虚拟化效果
  • 547
分享到

WPF使用WrapPanel实现虚拟化效果

2024-04-02 19:04:59 547人浏览 独家记忆
摘要

WrapPanel 实现虚拟化 1.框架使用大于等于.net40; 2.Visual Studio 2022; 3.项目使用 MIT 开源许可协议; 4.众所周知

WrapPanel 实现虚拟化

1.框架使用大于等于.net40

2.Visual Studio 2022;

3.项目使用 MIT 开源许可协议;

4.众所周知 WPF 的 StackPanel 在加载大量数据时性能会特别差,但是官方提供了一个虚拟化容器VirtualizingStackPanel;

  • VirtualizingStackPanel.IsVirtualizing 附加属性设置为 true时就开启虚拟化。
  • VirtualizingStackPanel.IsVirtualizing 附加属性设置为 falseVirtualizingStackPanel行为与普通StackPanel属性的行为相同。

5.WrapPanel 默认是不支持虚拟化的,所以需要自行实现。

1) VirtualizingWrapPanel 查看源码  |   VirtualizingWrapPanel 查看源码。

2) 准备数据HospitalList.cs如下:

using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.windows.Media;

namespace WPFDevelopers.Minimal.Sample.Models
{
    public class HospitalList : ObservableCollection<Hospital>
    {
        public HospitalList()
        {
            var hospitals = new string[] { "No. 189, Grove St, Los Angeles", "No. 3669, Grove St, Los Angeles" };
            var names = new string[] { "Doctor Fang", "Judge Qu" };
            var images = new string[] 
                { "https://pic2.zhimg.com/80/v2-0711e97955adc9be9fbcff67e1007535_720w.jpg",
                  //"Https://pic2.zhimg.com/80/v2-5b7f84c63075ba9771f6e6dc29a54615_720w.jpg",
                  "https://pic3.zhimg.com/80/v2-a3D6d8832090520e7ed6c748a8698e4e_720w.jpg",
                  "https://pic3.zhimg.com/80/v2-de7554ac9667a59255fe002bb8753ab6_720w.jpg"
                };
            var state = 0;
            for (var i = 1; i < 10000; i++)
            {
                Add(new Hospital { Id = $"9999{i}", DoctorName = i % 2 == 0 ? names[0]:names[1], HospitalName = i % 2 == 0 ? hospitals[0] : hospitals[1] ,State = state ,UserImage = images[state] });
                state++;
                if (state > 2)
                    state = 0;
            }
        }
    }

    public class Hospital
    {
        public string Id { get; set; }
        public string DoctorName { get; set; }
        public string HospitalName { get; set; }
        public string UserImage { get; set; }
        public int State { get; set; }
    }
}

3) 新建展示VirtualizingWrapPanelExample.xaml如下:

 <ws:Window x:Class="WPFDevelopers.Minimal.Sample.ExampleViews.VirtualizingWrapPanelExample"
        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"
        xmlns:ws="https://GitHub.com/WPFDevelopersOrg/WPFDevelopers.Minimal"
        xmlns:local="clr-namespace:WPFDevelopers.Minimal.Sample.ExampleViews"
        xmlns:model="clr-namespace:WPFDevelopers.Minimal.Sample.Models"
        xmlns:converts="clr-namespace:WPFDevelopers.Minimal.Sample.Converts"
        mc:Ignorable="d" WindowStartupLocation="CenterScreen"
        Title="System V1.0" Height="450" Width="900">
    <Window.Resources>
        <model:HospitalList x:Key="myHospitalList"/>
        <converts:StateConvert  x:Key="stateConvert"></converts:StateConvert>
    </Window.Resources>
    <Grid Margin="4">
        <WrapPanel HorizontalAlignment="Left">
            <WrapPanel.Resources>
                <Style TargetType="Border">
                    <Setter Property="Padding" Value="2"></Setter>
                    <Setter Property="BorderThickness" Value="1"></Setter>
                </Style>
                <Style TargetType="Rectangle">
                    <Setter Property="Width" Value="15"></Setter>
                    <Setter Property="Height" Value="15"></Setter>
                    <Setter Property="Opacity" Value=".2"></Setter>
                </Style>
            </WrapPanel.Resources>
            <WrapPanel>
                <Border BorderBrush="Green">
                    <Rectangle Fill="Green"/>
                </Border>
                <TextBlock Text="Idle" Foreground="Black" Margin="4,0"/>
            </WrapPanel>
            <WrapPanel>
                <Border BorderBrush="Orange">
                    <Rectangle Fill="Orange"/>
                </Border>
                <TextBlock Text="Slightly Idle" Foreground="Black" Margin="4,0"/>
            </WrapPanel>
            <WrapPanel>
                <Border BorderBrush="Red">
                    <Rectangle Fill="Red"/>
                </Border>
                <TextBlock Text="Busy" Foreground="Black" Margin="4,0"/>
            </WrapPanel>
        </WrapPanel>
        <TextBlock HorizontalAlignment="Right" Foreground="Black"
                   Margin="4,2" FontSize="16">
            <Run Text="Count:"></Run>
            <Run Text="{Binding ElementName=DocumentsList,Path=.Items.Count,Mode=OneTime}"></Run>
        </TextBlock>

        <ListBox x:Name="DocumentsList"
      ItemsSource="{Binding Source={StaticResource myHospitalList}}"
                     Margin="0,24,0,0">
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <Border BorderBrush="{Binding State,Converter={StaticResource stateConvert}}" 
                            BorderThickness="1"
                            Width="196"
                            Height="94">
                        <Grid>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition/>
                                <ColumnDefinition/>
                            </Grid.ColumnDefinitions>
                            <Grid.RowDefinitions>
                                <RowDefinition/>
                                <RowDefinition/>
                                <RowDefinition/>
                            </Grid.RowDefinitions>
                            <Rectangle 
                                Fill="{Binding State,Converter={StaticResource stateConvert}}" 
                                Opacity=".2" Grid.ColumnSpan="2" 
                                Grid.RowSpan="3"/>

                            <Border Grid.RowSpan="2" Grid.Column="0" Width="60" Height="60"
                                       Margin="0,4,0,0" CornerRadius="10">
                                <Border.Background>
                                    <ImageBrush ImageSource="{Binding UserImage}" Stretch="Uniform"/>
                                </Border.Background>
                            </Border>
                            <TextBlock Grid.Column="1" Grid.Row="0"
                     Text="{Binding Path=Id}" Margin="0,4,0,0"/>
                            <TextBlock Grid.Column="1" Grid.Row="1"
                     Text="{Binding Path=DoctorName}"/>
                            <TextBlock Grid.ColumnSpan="2" Grid.Row="2"
                                       Padding="10,0"
                     Text="{Binding Path=HospitalName}" TextTrimming="CharacterEllipsis"/>
                        </Grid>
                    </Border>
                </DataTemplate>
            </ListBox.ItemTemplate>
            <ListBox.Template>
                <ControlTemplate>
                    <Border CornerRadius="2" 
                   BorderBrush="{TemplateBinding BorderBrush}"
                   BorderThickness="{TemplateBinding BorderThickness}">
                        <ScrollViewer x:Name="ScrollViewer"
                                      Padding="{TemplateBinding Padding}" 
                                      Background="{TemplateBinding Background}" 
                                      BorderBrush="Transparent" BorderThickness="0"  IsTabStop="False">
                            <ItemsPresenter />
                        </ScrollViewer>
                    </Border>
                </ControlTemplate>
            </ListBox.Template>

            <ListBox.ItemsPanel>
                <ItemsPanelTemplate>
                    <ws:VirtualizingWrapPanel ItemWidth="200"
                                                 ItemHeight="100"/>
                </ItemsPanelTemplate>
            </ListBox.ItemsPanel>
        </ListBox>
    </Grid>
</ws:Window>

4) 状态StateConvert.cs如下:

using System;
using System.Windows.Data;
using System.Windows.Media;

namespace WPFDevelopers.Minimal.Sample.Converts
{
    public class StateConvert : IValueConverter
    {
        public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo cultureInfo)
        {
            var color = Brushes.Green;
            if (value != null)
            {
                var state = int.Parse(value.ToString());
                switch (state)
                {
                    case 0:
                        color = Brushes.Green;
                        break;
                    case 1:
                        color = Brushes.Orange;
                        break;
                    case 2:
                        color = Brushes.Red;
                        break;
                }
            }

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

实现效果

到此这篇关于WPF使用WrapPanel实现虚拟化效果的文章就介绍到这了,更多相关WPF WrapPanel虚拟化内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

--结束END--

本文标题: WPF使用WrapPanel实现虚拟化效果

本文链接: https://www.lsjlt.com/news/167812.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • WPF使用WrapPanel实现虚拟化效果
    WrapPanel 实现虚拟化 1.框架使用大于等于.NET40; 2.Visual Studio 2022; 3.项目使用 MIT 开源许可协议; 4.众所周知...
    99+
    2022-11-13
  • Python使用OpenCV实现虚拟缩放效果
    目录介绍要求目标构建结论介绍 OpenCV 彻底改变了整个图像处理领域。从图像分类到对象检测,我们不仅可以使用 OpenCV 库做一些很酷的事情,而且还可以构建一流的应用程序。 今天...
    99+
    2022-11-13
  • vue怎么实现虚拟滚动效果
    这篇文章主要讲解了“vue怎么实现虚拟滚动效果”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“vue怎么实现虚拟滚动效果”吧!效果图:滚动原理为了理解虚拟滚动...
    99+
    2022-10-19
  • 如何使用Python+OpenCV实现拖拽虚拟方块效果
    本篇内容主要讲解“如何使用Python+OpenCV实现拖拽虚拟方块效果”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“如何使用Python+OpenCV实现拖拽虚拟方块效果”吧!一、核心流程op...
    99+
    2023-07-06
  • 怎么使用C# WPF实现动态3D光照效果
    这篇文章主要介绍“怎么使用C# WPF实现动态3D光照效果”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“怎么使用C# WPF实现动态3D光照效果”文章能帮助大家解决问题。交互式调...
    99+
    2023-07-05
  • 使用css怎么实现一个背景虚化效果
    使用css怎么实现一个背景虚化效果?针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。HTML代码: <div class="login-co...
    99+
    2023-06-08
  • OpenCV实战之实现手势虚拟缩放效果
    目录0、项目介绍1、项目展示2、项目搭建3、项目的代码与讲解0、项目介绍 本篇将会以HandTrackingModule为模块,这里的模块与之前的有所不同,请按照本篇为准,前面的Ha...
    99+
    2022-11-13
    OpenCV手势虚拟缩放 OpenCV 虚拟缩放 OpenCV 手势
  • 基于Vue3实现列表虚拟滚动效果
    目录前言完成效果思路和需要解决的问题vue3+setup 写的组件使用组件前言 近期在做一个网页播放器项目中,用到很多需要展示歌单的列表 一个歌单动辄千百首歌曲,页面中的元素太多导致...
    99+
    2022-11-13
  • vue.js el-table虚拟滚动效果怎么实现
    今天小编给大家分享一下vue.js el-table虚拟滚动效果怎么实现的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下...
    99+
    2023-07-04
  • css怎么实现字体虚化效果
    这篇文章主要介绍“css怎么实现字体虚化效果”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“css怎么实现字体虚化效果”文章能帮助大家解决问题。首先,在页面中创建两个p标签,并添加文字用于对比;<...
    99+
    2023-07-04
  • OpenCV利用手势识别实现虚拟拖放效果
    目录第一步第二步第三步完整代码本文将实现一些通过手拖放一些框,我们可以使用这个技术实现一些游戏,控制机械臂等很多有趣的事情。 第一步 通过opencv设置显示框和调用摄像头显示当前画...
    99+
    2022-11-12
  • Python+OpenCV怎么实现拖拽虚拟方块效果
    一、项目效果二、核心流程1、openCV读取视频流、在每一帧图片上画一个矩形。2、使用mediapipe获取手指关键点坐标。3、根据手指坐标位置和矩形的坐标位置,判断手指点是否在矩形上,如果在则矩形跟随手指移动。三、代码流程环境准备:pyt...
    99+
    2023-05-15
    Python OpenCV
  • OpenCV如何利用手势识别实现虚拟拖放效果
    这篇文章主要介绍OpenCV如何利用手势识别实现虚拟拖放效果,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!第一步通过opencv设置显示框和调用摄像头显示当前画面import cv2cap =&n...
    99+
    2023-06-26
  • WPF中使用CallerMemberName简化InotifyPropertyChanged的实现
    在WPF中,当我们要使用MVVM的方式绑定一个普通对象的属性时,界面上往往需要获取到属性变更的通知, class NotifyObject : INotifyProperty...
    99+
    2022-11-13
  • OpenCV实现图像背景虚化效果原理详解
    目录0 写在前面1 小孔成像2 光学成像3 虚化效果4 代码实战0 写在前面 相信用过相机的同学都知道虚化特效,这是一种使焦点聚集在拍摄主题上,让背景变得朦胧的效果,例如本文最后实现...
    99+
    2022-11-13
  • 如何使用Python OpenCV实现人物动漫化效果
    这篇文章主要介绍如何使用Python OpenCV实现人物动漫化效果,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!效果展示第一组古风美女原图效果图啊......西湖的水 我的泪......这张图动漫化的超级...
    99+
    2023-06-26
  • 如何用CSS 实现蜡烛融化效果
    这篇文章主要介绍“如何用CSS 实现蜡烛融化效果”,在日常操作中,相信很多人在如何用CSS 实现蜡烛融化效果问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”如何用CSS 实现蜡烛融化效果”的疑惑有所帮助!接下来...
    99+
    2023-06-08
  • 利用Vue模拟实现element-ui的分页器效果
    目录1. 思路1.1客户端1.2服务器2.服务器2.1创建数据2.2创建接口3.客户端3.1创建静态页面3.2请求数据3.3解析逻辑4.总结1. 思路 1.1客户端 利用vue相关的...
    99+
    2022-11-13
    Vue element-ui分页器 Vue element-ui分页 Vue element-ui
  • UnityShader使用Plane实现翻书效果
    本文实例为大家分享了UnityShader使用Plane实现翻书效果的具体代码,供大家参考,具体内容如下 之前在网上看到一个Shadr可以实现旋转效果,就拿来实现一个翻书效果。解决办...
    99+
    2022-11-12
  • MVC使用MvcPager实现分页效果
    本文实例为大家分享了MVC使用MvcPager实现分页效果的具体代码,供大家参考,具体内容如下 一、数据库表 USE [StudentDB] GO   SET ANSI_NULLS...
    99+
    2022-11-13
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作