WPF中ListView使用ImageButton UserControl性能低下问题求助

开发WPF应用时，ListView绑定字符串集合，每个项包含值和带图片文本的按钮。为了复用和统一样式，创建了ImageButton UserControl，但发现其在ListView中的性能远不如直接在XAML里写按钮。尝试将样式移到应用资源字典或窗口资源后性能仍无改善，寻求解决建议。

ImageButton的XAML代码 #

<UserControl x:Class="WPFApp.Controls.ImageButton"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             mc:Ignorable="d" 
             d:DesignHeight="100" d:DesignWidth="300" Height="auto" Width="auto"
             x:Name="self">
    <UserControl.Resources>
        <Style x:Key="DefaultImageButtonStyle" TargetType="Button">
            <Setter Property="Margin" Value="5"/>
            <Setter Property="Padding" Value="2"/>
            <Setter Property="Width" Value="auto"/>
        </Style>
    </UserControl.Resources>
    <Button Style="{StaticResource DefaultImageButtonStyle}" Command="{Binding ButtonCommand, ElementName=self}" CommandParameter="{Binding ButtonCommandParameter, ElementName=self}">
        <StackPanel Orientation="Horizontal">
            <Image Source="{Binding ImageSource, ElementName=self}" Height="{Binding ImageHeight, ElementName=self}"/>
            <Label x:Name="ButtonLabel" Content="{Binding ButtonText, ElementName=self}" Width="Auto"/>
        </StackPanel>
    </Button>
</UserControl>

ImageButton的后台代码 #

using System.Windows;
using System.Windows.Controls;
using System.Windows.Input;

namespace WPFApp.Controls
{
    public partial class ImageButton : UserControl
    {
        #region dependency properties

        /// <summary>
        /// Used to assign a command to the button.
        /// </summary>
        public ICommand ButtonCommand
        {
            get { return (ICommand)GetValue(ButtonCommandProperty); }
            set { SetValue(ButtonCommandProperty, value); }
        }

        public static readonly DependencyProperty ButtonCommandProperty =
            DependencyProperty.Register("ButtonCommand", typeof(ICommand), typeof(ImageButton), new PropertyMetadata(null));

        /// <summary>
        /// Used to pass a parameter to the assigned command.
        /// </summary>
        public object ButtonCommandParameter
        {
            get { return (object)GetValue(ButtonCommandParameterProperty); }
            set { SetValue(ButtonCommandParameterProperty, value); }
        }

        public static readonly DependencyProperty ButtonCommandParameterProperty =
            DependencyProperty.Register("ButtonCommandParameter", typeof(object), typeof(ImageButton), new PropertyMetadata(null));

        /// <summary>
        /// Used to display text in the button.
        /// </summary>
        public string ButtonText
        {
            get { return (string)GetValue(ButtonTextProperty); }
            set { SetValue(ButtonTextProperty, value); }
        }

        public static readonly DependencyProperty ButtonTextProperty =
            DependencyProperty.Register("ButtonText", typeof(string), typeof(ImageButton), new PropertyMetadata(""));


        /// <summary>
        /// Used to display a image inside of the button.
        /// </summary>
        public string ImageSource
        {
            get { return (string)GetValue(ImageSourceProperty); }
            set { SetValue(ImageSourceProperty, value); }
        }

        public static readonly DependencyProperty ImageSourceProperty =
            DependencyProperty.Register("ImageSource", typeof(string), typeof(ImageButton), new PropertyMetadata(""));

        /// <summary>
        /// Used to assign a button style from the outside.
        /// </summary>
        public Style ButtonStyle
        {
            get { return (Style)GetValue(ButtonStyleProperty); }
            set { SetValue(ButtonStyleProperty, value); }
        }

        public static readonly DependencyProperty ButtonStyleProperty =
            DependencyProperty.Register("ButtonStyle", typeof(Style), typeof(ImageButton), new PropertyMetadata(null));

        /// <summary>
        /// Used to control the height of an assigned image from the outside.
        /// </summary>
        public int ImageHeight
        {
            get { return (int)GetValue(ImageHeightProperty); }
            set { SetValue(ImageHeightProperty, value); }
        }

        public static readonly DependencyProperty ImageHeightProperty =
            DependencyProperty.Register("ImageHeight", typeof(int), typeof(ImageButton), new PropertyMetadata(20));

        #endregion

        #region constructor

        public ImageButton()
        {
            InitializeComponent();
        }

        #endregion
    }
}

直接在XAML中定义按钮的代码（性能更优） #

<Button Command="{Binding DataContext.OpenPlotSinglePointCommand, RelativeSource={RelativeSource AncestorType=ListView, Mode=FindAncestor}}" CommandParameter="{Binding}">
    <StackPanel Orientation="Horizontal">
        <Image Source="../Icons/Image.png"/>
        <Label>Show graph</Label>
    </StackPanel>
</Button>

解决建议 #

1. 改用ControlTemplate替代UserControl #

UserControl会增加额外的视觉树层级（UserControl -> Button -> StackPanel -> Image/Label），而直接给Button应用ControlTemplate可以减少层级，提升渲染性能。示例：

<Style x:Key="ImageButtonStyle" TargetType="Button">
    <Setter Property="Margin" Value="5"/>
    <Setter Property="Padding" Value="2"/>
    <Setter Property="Width" Value="Auto"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Button">
                <Border Background="{TemplateBinding Background}"
                        BorderBrush="{TemplateBinding BorderBrush}"
                        BorderThickness="{TemplateBinding BorderThickness}">
                    <StackPanel Orientation="Horizontal" Margin="{TemplateBinding Padding}">
                        <Image Source="{TemplateBinding Tag}" Height="20"/>
                        <ContentPresenter VerticalAlignment="Center" Margin="4 0 0 0"/>
                    </StackPanel>
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

使用时直接绑定Content和Tag（或自定义附加属性）：

<Button Style="{StaticResource ImageButtonStyle}"
        Content="Show graph"
        Tag="../Icons/Image.png"
        Command="{Binding DataContext.OpenPlotSinglePointCommand, RelativeSource={RelativeSource AncestorType=ListView}}"
        CommandParameter="{Binding}"/>

2. 优化绑定方式 #

• 避免使用ElementName绑定，改用RelativeSource或直接绑定到DataContext，减少绑定查找开销。
• 对于不需要动态更新的属性（如图片路径），使用OneTime绑定模式：{Binding ImageSource, Mode=OneTime}。

3. 减少视觉树复杂度 #

• 用TextBlock替代Label，Label自带额外的模板和样式，性能更差。
• 若图片尺寸固定，直接设置固定值而非绑定，减少绑定计算。

4. 图片缓存优化 #

• 将图片资源转为BitmapImage并设置CacheOption="OnLoad"，避免重复加载：

<BitmapImage x:Key="GraphIcon" UriSource="../Icons/Image.png" CacheOption="OnLoad"/>

使用时直接引用：<Image Source="{StaticResource GraphIcon}"/>

5. ListView虚拟化优化 #

确保ListView启用虚拟化（默认已启用，但需确认），避免一次性渲染所有项：

<ListView VirtualizingStackPanel.IsVirtualizing="True"
          VirtualizingStackPanel.VirtualizationMode="Recycling"/>

虚拟化模式设为Recycling可以复用项容器，减少UserControl/控件的重复创建开销。

内容的提问来源于stack exchange，提问作者Kiiiieeeeuuuw