有没有办法绘制具有动态尺寸（可拉伸）的自定义表格（网格）

Question

我有一张桌子，它看起来很像：

首先我不知道如何制作这种结构稳定，因为我在通常的网格中发现的只是列和行，所以我需要一些“更智能”的表格元素。但也许我需要以某种方式创建它。也许有一些制作自定义结构化表的解决方案？

主要的麻烦是使表格完全可拉伸（如图片），因此表格必须随着文本（字体）而变大。我不知道目标平台分辨率，但它可能非常巨大，因此表格必须能够像图片一样拉伸，但质量良好，我不想在那里看到大像素（所以它必须像矢量图一样可拉伸）。我怎样才能意识到呢？

另外，我仍在考虑 WPF 是否是正确的工具。也许用 Silverligh 制作它或以某种方式将 HTML 放入应用程序中会更容易，但暂时我找不到方法如何在任何地方制作它。所以我想我也必须用 html 和 silver-light 标志来标记问题，但我想我无论如何都会使用 .net 从数据库获取数据。

Answer 1

我花了最后一个小时找到一个可靠的解决方案，但没有找到一个完美的解决方案。我停止搜索这一点，但想向您展示我当前的尝试：

GridControl.cs

using System.Windows;
using System.Windows.Controls;
using System.Windows.Media;

namespace WpfApplication1.CustomControl
{
    public class GridControl : Grid
    {
        static GridControl()
        {
            DefaultStyleKeyProperty.OverrideMetadata(typeof(GridControl),
                                                     new FrameworkPropertyMetadata(typeof(GridControl)));
        }

        private Pen _linesPen;

        #region Properties

        public bool ShowCustomGridLines
        {
            get { return (bool) GetValue(ShowCustomGridLinesProperty); }
            set { SetValue(ShowCustomGridLinesProperty, value); }
        }

        public static readonly DependencyProperty ShowCustomGridLinesProperty =
            DependencyProperty.Register("ShowCustomGridLines", typeof (bool), typeof (GridControl),
                                        new UIPropertyMetadata(false));


        public Brush GridLineBrush
        {
            get { return (Brush) GetValue(GridLineBrushProperty); }
            set { SetValue(GridLineBrushProperty, value); }
        }

        public static readonly DependencyProperty GridLineBrushProperty =
            DependencyProperty.Register("GridLineBrush", typeof (Brush), typeof (GridControl),
                                        new UIPropertyMetadata(Brushes.Black));

        public double GridLineThickness
        {
            get { return (double) GetValue(GridLineThicknessProperty); }
            set { SetValue(GridLineThicknessProperty, value); }
        }

        public static readonly DependencyProperty GridLineThicknessProperty =
            DependencyProperty.Register("GridLineThickness", typeof (double), typeof (GridControl),
                                        new UIPropertyMetadata(1.0));

        #endregion

        protected override void OnRender(DrawingContext dc)
        {
            if (ShowCustomGridLines)
            {
                if (_linesPen == null)
                {
                    _linesPen = new Pen(GridLineBrush, GridLineThickness);
                }

                foreach (var rowDefinition in RowDefinitions)
                {
                    dc.DrawLine(_linesPen, new Point(0, rowDefinition.Offset),
                                new Point(ActualWidth, rowDefinition.Offset));
                }

                foreach (var columnDefinition in ColumnDefinitions)
                {
                    dc.DrawLine(_linesPen, new Point(columnDefinition.Offset, 0),
                                new Point(columnDefinition.Offset, ActualHeight));
                }

                dc.DrawRectangle(Brushes.Transparent, _linesPen,
                                 new Rect(0, 0, ActualWidth, ActualHeight));
            }

            base.OnRender(dc);
        }
    }
}

在视图中使用：

<Window x:Class="WpfApplication1.table"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:CustomControl="clr-namespace:WpfApplication1.CustomControl" Title="table" Height="500" Width="600">
    <Grid>
        <TextBlock Text="Headline" HorizontalAlignment="Center" VerticalAlignment="Top" FontSize="20" FontWeight="Bold" />

        <Slider x:Name="slider" Grid.Row="1" Minimum="1" Margin="20,30,0,0" VerticalAlignment="Top" HorizontalAlignment="Left" Width="200" />
        <TextBlock Text="Zoom" Margin="250,33,0,0" HorizontalAlignment="Left" VerticalAlignment="Top" />

        <ScrollViewer x:Name="ScrollViewer" Margin="20,70,20,10" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto">
            <CustomControl:GridControl ShowCustomGridLines="True" Width="{Binding ElementName=ScrollViewer, Path=ActualWidth}" Height="{Binding ElementName=ScrollViewer, Path=ActualHeight}">
                <Grid.LayoutTransform>
                    <ScaleTransform CenterX="0" CenterY="0" ScaleY="{Binding Path=Value, ElementName=slider}" ScaleX="{Binding Path=Value, ElementName=slider}" />
                </Grid.LayoutTransform>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition />
                    <ColumnDefinition />
                    <ColumnDefinition />
                </Grid.ColumnDefinitions>
                <Grid.RowDefinitions>
                    <RowDefinition Height="60" />
                    <RowDefinition Height="*" />
                </Grid.RowDefinitions>

                <TextBlock Grid.Column="0" Grid.Row="0" Text="Header 1" VerticalAlignment="Center" HorizontalAlignment="Center" />

                <TextBlock Grid.Column="1" Grid.Row="0" Text="Header 2" VerticalAlignment="Center" HorizontalAlignment="Center" />

                <CustomControl:GridControl ShowCustomGridLines="True" Grid.Column="2" Grid.Row="0">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition />
                        <ColumnDefinition />
                        <ColumnDefinition />
                    </Grid.ColumnDefinitions>
                    <Grid.RowDefinitions>
                        <RowDefinition />
                        <RowDefinition />
                    </Grid.RowDefinitions>

                    <!-- first row -->
                    <TextBlock Grid.Column="0" Grid.ColumnSpan="3" Grid.Row="0" HorizontalAlignment="Center" VerticalAlignment="Center" Text="Header 3 (over 3 columns)" />

                    <!-- first column in second row -->
                    <TextBlock Grid.Column="0" Grid.Row="1" Text="Cell 1" HorizontalAlignment="Center" VerticalAlignment="Center" />

                    <!-- second column in second row -->
                    <TextBlock Grid.Column="1" Grid.Row="1" Text="Cell 2" HorizontalAlignment="Center" VerticalAlignment="Center" />

                    <!-- third column in second row -->
                    <TextBlock Grid.Column="2" Grid.Row="1" Text="Cell 3" HorizontalAlignment="Center" VerticalAlignment="Center" />
                </CustomControl:GridControl>

                <TextBlock Grid.Column="0" Grid.Row="1" Text="Cell 1 (big)" HorizontalAlignment="Center" VerticalAlignment="Center" />

                <CustomControl:GridControl Grid.Column="1" Grid.Row="1" ShowCustomGridLines="True">
                    <Grid.RowDefinitions>
                        <RowDefinition />
                        <RowDefinition />
                    </Grid.RowDefinitions>

                    <CustomControl:GridControl ShowCustomGridLines="True" Grid.Row="0">
                        <Grid.RowDefinitions>
                            <RowDefinition />
                            <RowDefinition />
                            <RowDefinition />
                            <RowDefinition />
                            <RowDefinition />
                        </Grid.RowDefinitions>
                    </CustomControl:GridControl>

                    <CustomControl:GridControl ShowCustomGridLines="True" Grid.Row="1">
                        <Grid.RowDefinitions>
                            <RowDefinition />
                            <RowDefinition />
                            <RowDefinition />
                            <RowDefinition />
                            <RowDefinition />
                        </Grid.RowDefinitions>
                    </CustomControl:GridControl>
                </CustomControl:GridControl>

                <CustomControl:GridControl ShowCustomGridLines="True" Grid.Column="2" Grid.Row="1">
                    <Grid.RowDefinitions>
                        <RowDefinition />
                        <RowDefinition />
                    </Grid.RowDefinitions>

                    <CustomControl:GridControl ShowCustomGridLines="True" Grid.Row="0">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition />
                            <ColumnDefinition />
                            <ColumnDefinition />
                        </Grid.ColumnDefinitions>
                        <Grid.RowDefinitions>
                            <RowDefinition />
                            <RowDefinition />
                            <RowDefinition />
                            <RowDefinition />
                            <RowDefinition />
                        </Grid.RowDefinitions>
                    </CustomControl:GridControl>

                    <CustomControl:GridControl ShowCustomGridLines="True" Grid.Row="1">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition />
                            <ColumnDefinition />
                            <ColumnDefinition />
                        </Grid.ColumnDefinitions>
                        <Grid.RowDefinitions>
                            <RowDefinition />
                            <RowDefinition />
                            <RowDefinition />
                            <RowDefinition />
                            <RowDefinition />
                        </Grid.RowDefinitions>
                    </CustomControl:GridControl>
                </CustomControl:GridControl>
            </CustomControl:GridControl>
        </ScrollViewer>
    </Grid>
</Window>

Answer 2

大多数人在面临必须创建这样的复杂网格时可能会购买第三方组件。特别是如果您不知道如何自己实施的话！

尝试环顾一下 .NET 组件供应商，例如：

• Syncfusion
• Telerik
• Infragistics
• Dev Express
• Component One
• Xceed

所有这些都拥有功能相当丰富的网格。此外，如果您购买他们的产品，他们应该很乐意提供支持。

Answer 3

尽管您想要实现的网格/表格结构背后有很多复杂性，但您问题的答案很简单。将所有内容放入 Viewbox 中，它将正确拉紧。由于 WPF 基于矢量图形，而不是像素，因此缩放不会有问题。