Есть ли способ нарисовать пользовательскую таблицу (сетку) с динамическим размером (растягивается)

Question

У меня есть стол, и похоже, что:

Во-первых, я не знаю, как я могу сделать такую ​​структуру стабильной, потому что все, что я нашел в обычных гридах, это столбцы и строки, поэтому мне нужен какой-то "умнее" элемент таблицы. Но, возможно, мне нужно как-то его создать. Может быть, есть какие-то решения для создания пользовательских структурированных таблиц?

И главная проблема в том, чтобы сделать таблицу полностью растягиваемой (как на картинке), чтобы таблица стала больше с текстом (шрифтом). Я не знаю разрешение целевой платформы, но оно может быть очень большим, поэтому таблица должна иметь возможность растягиваться как изображение, но с хорошим качеством, я не хочу видеть большие пиксели там (поэтому она должна быть растягиваемой, как векторная картинка ). Как я могу это понять?

Также я все еще думаю, является ли WPF правильным инструментом для этого. Возможно, будет проще сделать это с помощью Silverligh или как-то внедрить HTML в приложение, но на мгновение я не могу найти способ, как я могу сделать это везде. Поэтому я думаю, что я должен также пометить вопрос с помощью html и silver-light flags, но я думаю, что я все равно буду использовать .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

Несмотря на всю сложность структуры таблицы / таблицы, которую вы пытаетесь достичь, ответ на ваш вопрос прост. Поместите все в Viewbox , и он будет правильно растягиваться. Поскольку WPF основан на векторной графике, а не на пикселях, масштабирование не будет проблемой.

Answer 3

Большинство людей, столкнувшись с необходимостью создать сложную сетку, подобную этой, вероятно, приобретут сторонний компонент. Особенно, если вы не знаете, как реализовать это самостоятельно!

Попробуйте поискать поставщиков компонентов .NET, таких как:

• Syncfusion
• Telerik
• Infragistics
• Dev Express
• Один компонент
• Xceed

У всех есть сетки, которые довольно богаты. Кроме того, если вы платите за их продукт, они будут рады оказать поддержку.