c# - 需要一个非常定制的大型 Winforms 网格

Question

我即将开发一个 Windows PC 应用程序(它可以是 WinForms 或 WPF)，我主要担心的是我必须解决的 UI 问题。

基本上，我需要一个大约 50x50 的网格，我需要从用户那里获取输入。那是 2500 个字段。实际上，大多数将留空，大约 10% 将由用户填写。每个字段可以为空或有一个从 1 到 4 的数字。我想要简单的输入 - 也许是一个下拉框(因为使用键盘在所有 2500 个字段中切换是没有意义的，我希望用户填写使用鼠标的值)。

我在考虑下拉框或标签，当您单击它们时会更改值，但问题是(根据我所做的测试)添加 2500 个任何类型的控件都会使界面非常慢。我尝试在具有暂停/恢复更新功能的 WinForms 应用程序中使用 tablelayoutpanel，还有双缓冲，这有点帮助，但它仍然非常慢。我不愿意走 DataGridView 路线，因为我需要非常自定义的 header ，并且我需要 UI 在用户更改字段中的值时自动更新某些百分比。但如果那是我唯一的选择，我不会反对。

我听说 WPF 可能更好，因为您可以拥有许多控件，并且每个控件都没有自己的窗口句柄，而且还有虚拟化(不确定实现起来有多难)。

我乐于接受建议。我知道有人会建议打破网格，我最终可能会这样做。无论哪种方式，我都想知道在 Windows 应用程序中具有许多控件的大型网格的最有效方法，就好像我要在不破坏网格的情况下开发它一样。

我正在使用 VS 2013，使用 C#、.NET 4.0 进行开发。

谢谢!

Answer 1

正如@Kerry 的回答所证明的那样，winforms 对几乎所有问题的回答都是“你不能在 winforms 中做到这一点，因此你需要创建一个更糟糕的替代 UI 设计来适应 winforms 的限制。” - 这不是我对任何体面的 UI 框架的期望。

这是我在 10 分钟 中使用 20 行 C# 代码 和 50 行 XAML< 实现的WPF/strong>:

• 与此 WPF UI 交互时的响应时间在我的机器(I5 CPU 和普通视频卡)上立即。即使没有虚拟化(因为我使用的是不虚拟化的 UniformGrid)，这也比您希望在 winforms 中实现的任何东西都要好。
• 我按照您的要求引入了一个包含数字 1-4 的 ComboBox。
• 完全可定制(无需诉诸任何“所有者绘制”技巧)。我什至添加了这些行号和列号，它们当然都是可滚动区域的一部分。
• Touch-Ready - 这种大滚动 U​​I 确实更适合触摸设备。 winforms 范式甚至没有考虑到的东西。否则，您还可以使用箭头键在网格中实现类似 Excel 的键盘导航，以创建更好的非触摸用户体验。
• 通过小努力，您还可以使行标题和列标题固定，同时保持它们与整个网格的滚动偏移的一致性。
• 这实际上是一个 ListBox，这意味着它具有 SelectedItem 的概念，并且默认情况下它还展示了类似 ListBox 的视觉样式(您可以看到光-所选项目的蓝色背景和轮廓)。
• 通过使用项目集合创建适当的 ViewModel 然后使用 ItemsControls，逻辑从 UI 中解耦让 WPF 完成创建 UI 的工作。此示例中没有一行 C# 代码可以操作任何 UI 元素。这一切都是通过美丽的 DataBinding 完成的.

完整来源:

<Window x:Class="WpfApplication3.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:sys="clr-namespace:System;assembly=mscorlib"
        Title="MainWindow" Height="350" Width="525">
    <Window.Resources>
        <DataTemplate x:Key="MarkerTemplate">
            <Border BorderBrush="Gray" BorderThickness="1" Margin="1" Background="Gainsboro">
                <Grid Width="50" Height="30">
                    <TextBlock Text="{Binding}" FontWeight="Bold" VerticalAlignment="Center" HorizontalAlignment="Center"/>
                </Grid>
            </Border>
        </DataTemplate>

        <Style TargetType="ListBoxItem">
            <Setter Property="Padding" Value="0"/>
        </Style>
    </Window.Resources>

    <DockPanel>
        <ListBox ItemsSource="{Binding Items}">
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <Border BorderBrush="Gray" BorderThickness="1">
                    <Grid Width="50" Height="30">
                        <TextBlock Text="{Binding Value}" VerticalAlignment="Center" HorizontalAlignment="Center"/>
                        <ComboBox x:Name="ComboBox" SelectedItem="{Binding Value}" 
                                  IsDropDownOpen="{Binding IsSelected, RelativeSource={RelativeSource AncestorType=ListBoxItem}}"
                                  Visibility="Collapsed">
                            <sys:Int32>1</sys:Int32>
                            <sys:Int32>2</sys:Int32>
                            <sys:Int32>3</sys:Int32>
                            <sys:Int32>4</sys:Int32>
                        </ComboBox>
                    </Grid>
                    </Border>
                    <DataTemplate.Triggers>
                        <DataTrigger Binding="{Binding IsSelected, RelativeSource={RelativeSource AncestorType=ListBoxItem}}" Value="True">
                            <Setter TargetName="ComboBox" Property="Visibility" Value="Visible"/>
                        </DataTrigger>
                    </DataTemplate.Triggers>
                </DataTemplate>
            </ListBox.ItemTemplate>

            <ListBox.Template>
                <ControlTemplate TargetType="ListBox">
                    <ScrollViewer CanContentScroll="True" VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Auto">
                        <DockPanel>
                            <ItemsControl DockPanel.Dock="Top" ItemsSource="{Binding ColumnMarkers}"
                                ItemTemplate="{StaticResource MarkerTemplate}">
                                <ItemsControl.ItemsPanel>
                                    <ItemsPanelTemplate>
                                        <VirtualizingStackPanel Orientation="Horizontal"/>
                                    </ItemsPanelTemplate>
                                </ItemsControl.ItemsPanel>
                            </ItemsControl>

                            <ItemsControl DockPanel.Dock="Left" ItemsSource="{Binding RowMarkers}"
                                          ItemTemplate="{StaticResource MarkerTemplate}">
                                <ItemsControl.ItemsPanel>
                                    <ItemsPanelTemplate>
                                        <VirtualizingStackPanel Orientation="Vertical"/>
                                    </ItemsPanelTemplate>
                                </ItemsControl.ItemsPanel>
                            </ItemsControl>

                            <UniformGrid Rows="50" Columns="50" IsItemsHost="True"/>
                        </DockPanel>
                    </ScrollViewer>
                </ControlTemplate>
            </ListBox.Template>
        </ListBox>
    </DockPanel>
</Window>

代码隐藏:

using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.Linq;
using System.Windows;

namespace WpfApplication3
{
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();

            DataContext = new ViewModel();
        }
    }
}

View 模型:

public class ViewModel
{
    public List<string> RowMarkers { get; set; }

    public List<string> ColumnMarkers { get; set; }

    public ObservableCollection<Item> Items { get; set; }

    public ViewModel()
    {
        RowMarkers = Enumerable.Range(1, 50).Select(x => x.ToString()).ToList();
        ColumnMarkers = new[] { " " }.Concat(Enumerable.Range(1, 50).Select(x => x.ToString())).ToList();

        var list = new List<Item>();

        for (int i = 0; i < 50; i++)
        {
            for (int j = 0; j < 50; j++)
            {
                list.Add(new Item());
            }
        }

        Items = new ObservableCollection<Item>(list);
    }
}

数据项:

public class Item
{
    public int? Value { get; set; }
}

• 您可能希望将 Row 和 Column 属性添加到 Item 类，以便您可以跟踪哪些行/columns 实际上包含值。然后你可以像这样使用 LINQ:

  var values = Items.Where(x => Value != null);
  

  并获得 Item 的列表，并为每个项目获得 item.Row 和 Item.Column。

• 忘记 winforms。它完全没用。 - 在这一点上，winforms 已经完全过时了。无论您使用 Winforms 可以实现什么，您都可以在 WPF 中以 10% 的代码量实现同样的目标，而且可能会获得更好的结果。不建议将 winforms 用于任何新项目，仅用于维护遗留应用程序。这是一项古老的技术，不适合满足当今的 UI 需求。这就是 Microsoft 创建 WPF 以替换它的原因。

• WPF 摇滚。只需将我的代码复制并粘贴到 File -> New Project -> WPF Application 中，然后亲自查看结果。

• 如果您需要进一步的帮助，请告诉我。

Important Note: the WPF default control templates are much lighter weight in Windows 8 than their Windows 7 counterparts (following the Windows 8 philosophy of removing the heavy Aero stuff and practically all transparencies to have a smaller UI footprint).

This means that testing my code on Windows 7 might not yield the expected results in terms of performance. If that happens to be the case, Don't worry. It is fixable. A small amount of additional XAML would have to be introduced (some Styles and ControlTemplates) to replace the Windows 7 defaults by something "faster".