Question

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

enter image description here

首先我不知道如何制作这样结构稳定的，因为我在常用网格中找到的所有内容都是Columns and Rows所以我需要一些“更聪明”的表元素。但也许我需要以某种方式创建它。也许有一些制作自定义结构化表格的解决方案？

主要的麻烦是make table完全可伸缩（如图片），所以表必须变大，文本（Font）就在其中。我不知道目标平台分辨率，但它可能非常大，所以桌子必须具有像图片一样拉伸但质量好的能力，我不想在那里看到大像素（因此它必须像矢量图片一样可伸缩）。我怎么能意识到它？

另外我还在想WPF是否适合它。也许用Silverligh制作它或者将HTML放到应用程序中会更容易，但有一会儿我找不到办法如何在任何地方制作它。所以我认为我必须使用html和silver-light标记来标记问题，但我想我会使用.net从数据库中获取数据。

Answer 1

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

尝试查看.NET组件供应商，例如：

Syncfusion
Telerik的
Infragistics的
Dev Express
第一部分
Xceed

所有网格都非常丰富。此外，如果您为他们的产品付款，他们应该乐意提供支持。

Answer 2

我花了最后一小时才找到一个可靠的解决方案，但并不是一个完美的解决方案..我在这一点上停止搜索但是想向你展示我当前的尝试：

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 3

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

有没有办法绘制动态大小的自定义表格（网格）（可伸缩）

3 个答案: