Visualizing 2D Data in a Table

Question

I need some help and need to be pointed in the right direction. I am creating a WPF application which should display 2-dimensional data. It should be shown like this:

-------------------------
|y/x| 1 | 2 | 3 | 4 | 5 |
|  1| 1 | 2 | 3 | 4 | 5 |
|  2| 2 | 4 | 6 | 8 | 10|
|  3| 3 | 6 | 9 | 12| 15|
|  4| 4 | 8 | 12| 16| 20|
|  5| 5 | 10| 15| 20| 25|
-------------------------

Some sample code: XAML:

<Window x:Class="WpfApplication6.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525"
        DataContext="{Binding RelativeSource={RelativeSource Self}}">
    <Grid>
        <!--Place control for 2d data here-->
    </Grid>
</Window>

C#:

    public partial class MainWindow : Window
    {
        string[,] values = new string[5,5];
        string[] x = new string[5];
        string[] y = new string[5];

        public MainWindow()
        {
            InitializeComponent();
            CreateArrays();
        }

        private void CreateArrays()
        {
            for (int i = 0; i < values.GetLength(0); i++)
            {
                for (int j = 0; j < values.GetLength(1); j++)
                {
                    values[i, j] = ((i+1) * (j+1)).ToString();
                }
            }

            for (int i = 0; i < x.GetLength(0); i++)
            {
                x[i] = (i+1).ToString();
            }

            for (int j = 0; j < y.GetLength(0); j++)
            {
                y[j] = (j+1).ToString();
            }

        }
    }

So the first row have to be the x-values, first column the y-values and the rest are the values. Note that the top left cell contains "y/x". I don't want there to be any possibility to sort the data (like clicking on a header). I want the ability to select multiple rows and or columns at once to copy data to the clipboard. The data must not be editable. Also some styling would be nice like, first row and first column has to have some different background color.

Any suggestions on how to do this?

Answer 1

try this:

<Grid>
    <ItemsControl x:Name="itemscontrol">
        <ItemsControl.ItemsPanel>
            <ItemsPanelTemplate>
                <UniformGrid Columns="6" Rows="6"  />
            </ItemsPanelTemplate>
        </ItemsControl.ItemsPanel>
        <ItemsControl.ItemTemplate>
            <DataTemplate>
                <Grid>
                    <TextBlock Text="{Binding}" Margin="5" />
                </Grid>
            </DataTemplate>
        </ItemsControl.ItemTemplate>
    </ItemsControl>
</Grid>

and there are a variety of ways of getting the data into it - for example

public MainWindow()
{
    InitializeComponent();
    this.itemscontrol.ItemsSource = new[] {"x/y", "1","2","3","4","5",
                                            "1","1","2","3","4","5",
                                            "2","2","4","6","8","10",
                                            "3","3","6","9","12","15",
                                            "4","4","8","12","16","20",
                                            "5","5","10","15","20","25"};
}