Question

I’ve got a table and it’s looking alike that:

First I don’t know how can I make such-structured stable, because all that I found in usual Grids is Columns and Rows so I need some “smarter” table element. But maybe I need to create it somehow. Maybe there are some solutions for making custom structured tables?

And the main trouble is make table fully stretchable (like a picture), So table must became bigger with text (Font) in it. I don’t know target platform resolution but it can be really huge so table must have an ability to stretch like a picture but with good quality, I don’t want to see big pixels there (so it must be stretchable like a vector picture). How can I realize it?

Also I’m still thinking if WPF is correct instrument for it. Maybe it will be easier to make it with Silverligh or put HTML into application somehow but for a moment I can’t find way how can I make it everywhere. So I think I must as well tag the question with html and silver-light flags but I think I will use .net to get my data from database anyway.

Answer 1

I spend the last hour to find a reliable solution, but got not a perfect one.. I stop searching on this point but want to show you my current attempt:

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);
        }
    }
}

Using in a view:

<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>