在其他视图下拖动视图时的 WPF-Performance 问题 [英] WPF-Performance issue when drag a view under other view

问题描述

如何解决在 WPF 中将视图拖动到另一个视图下时的性能问题?

How can I resolve performance issues when dragging a view under another view in WPF?

目前，在使用 WPF 时，遇到一个问题，当我将 Image 拖到 Label 的内容上时，它变得非常慢.我尝试增加 Label 的宽度和高度，然后将图像拖到 Label 的背景上(其中不包含内容)，它仍然可以正常工作.但是每当将图像拖过 Label 的内容区域时，拖动动作就会变得非常缓慢.对于我的测试项目的源代码，您可以在 https://github.com/thanhbinh93 中获得完整的源代码-bn/wpf_drag_performance

Currently, when working with WPF, I meet a problem that when I drag an Image over the content of a Label, it becomes very slow. I try to increase the width and height of Label then drag the image over the background of Label (where not contain content), it still working normally. But whenever the image is dragged over the content area of Label, dragging action becomes very slow. For source code of my testing project, you can get full source code in https://github.com/thanhbinh93-bn/wpf_drag_performance

这是我的测试项目:我有一个非常简单的窗口，其中包含一个 Imageview:

Here is my testing project: I have a very simple window which contains an Imageview:

<Window x:Class="OverlapeTesting.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/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:OverlapeTesting"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Grid x:Name="container" Background="Red">
        <Image 
            Source="background.png" 
            Width="145" Height="90" 
            HorizontalAlignment="Left" 
            VerticalAlignment="Top"
            PreviewMouseLeftButtonDown="Image_PreviewMouseLeftButtonDown"
            PreviewMouseMove="Image_PreviewMouseMove"
            PreviewMouseUp="Image_PreviewMouseUp"
            x:Name="dragImage"/>
    </Grid>
</Window>

然后在后面的代码中，我向容器网格添加了大约 10000 个标签.

Then in code behind, I add about 10000 labels to the container grid.

public void AddLabels()
{
           
     for (int i = 0; i < 10000; i++)
     {
         Label lb = new Label();
         lb.Content = "WWW";
         lb.Foreground = Brushes.White;
         lb.FontSize = 20;
         container.Children.Add(lb);
         lb.Width = 300;
         lb.Height = 150;
         lb.Background = new SolidColorBrush(Colors.Green);
         //lb.Opacity = 0.1;
     }
}

可以通过如下更改其边距在容器网格中拖动图像:

The image can be dragged in the container grid by changing its margin as following:

private void Image_PreviewMouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
     m_pointPressToImage = e.GetPosition((sender as FrameworkElement).Parent as FrameworkElement);
     Mouse.Capture(dragImage);
}

private void Image_PreviewMouseMove(object sender, MouseEventArgs e)
{

   if (e.LeftButton == MouseButtonState.Pressed)
   {
       Point pCurrent = new Point();
       pCurrent = e.GetPosition((sender as FrameworkElement).Parent as FrameworkElement);

       double deltaX = (pCurrent.X - m_pointPressToImage.X);
       double deltaY = (pCurrent.Y - m_pointPressToImage.Y);

       Thickness margin = dragImage.Margin;
       margin.Left += deltaX;
       margin.Top += deltaY;

       dragImage.Margin = margin;
       m_pointPressToImage = pCurrent;
   }
}

private void Image_PreviewMouseUp(object sender, MouseButtonEventArgs e)
{
    Mouse.Capture(null);
}

当我在空白区域拖动图像时，速度非常快.但是当我将图像拖到标签内容区域(WWW")上时，它变得非常慢.

When I drag the image in an empty area, it is very fast. But when I drag the image over the label content's area("WWW"), it becomes very slow.

我该如何解决这个性能问题?提前致谢！

How can I resolve this performance issues? Thanks in advance!

推荐答案

BitmapCache 将成为您的朋友.

BitmapCache will be your friend.

您所需要做的就是将复杂的 UI 元素移动到单独的面板，然后将其缓存:

All you need is to move your complex UI element to a separate panel and then cache it:

<Grid Background="Red">
    <Grid x:Name="container">
        <Grid.CacheMode>
            <BitmapCache />
        </Grid.CacheMode>
    </Grid>
    <Image 
        Source="background.png" 
        Width="145" Height="90" 
        HorizontalAlignment="Left" 
        VerticalAlignment="Top"
        PreviewMouseLeftButtonDown="Image_PreviewMouseLeftButtonDown"
        PreviewMouseMove="Image_PreviewMouseMove"
        PreviewMouseUp="Image_PreviewMouseUp"
        x:Name="dragImage"
        AllowDrop="False" />
</Grid>

这篇关于在其他视图下拖动视图时的 WPF-Performance 问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！