Best Layout for showing multiple charts wpf C#

Question

I have a strange problem that I want to show multiple graphs at run time and some times a single chart. Kindly suggest me a flexible layout because in future there will be more charts.

currently im using grid im not sharing my code because it is all messy but I am showing you its layout that i achieved with grid layout.

                     ______________________________________
                     |                 |                  |
                     |                 |                  |
                     |     Chart 1     |     Chart 2      |
                     |                 |                  |
                     |-----------------|------------------|
                     |                 |                  |
                     |                 |                  |
                     |                 |                  |
                     |     Chart 3     |     Chart 4      |
                     |                 |                  |
                     -------------------------------------

And charts will be increasing in future I want a flexible lay out that should allow me shoing single chart in center and if there are four charts they should be shown like this other wise single chart should be shown in center.

Answer 1

How about UniformGrid?

Answer 2

Example is too big to be posted in comments Hiding all columns to show remaining column in center of screen has no effect if you set its vertical and horizontal alignment into center it does not works rather it decreases it size and does not changes its location ... so Idea Flop... suggest a new layout* XAML

<Window
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
x:Class="MultipleChartsLayoutTesting.MainWindow"
x:Name="Window"
Title="MainWindow"
Width="640" Height="480">

<Grid x:Name="LayoutRoot">
 <UniformGrid x:Name="uniformGrid" Margin="8" Cursor="Hand">
     <Label Content="Label1" Background="AliceBlue" Name="lbl1" MouseDown="lbl1_MouseDown"></Label>

        <Label Content="Label2" Background="Aqua" Name="lbl2" MouseDown="lbl2_MouseDown"></Label>

        <Label Content="Label3" Background="Aquamarine" Name="lbl3" MouseDown="lbl2_MouseDown"></Label>

        <Label Content="Label4" Background="Azure" Name="lbl4" MouseDown="lbl1_MouseDown"></Label>

  <Label Content="Label5" Background="AliceBlue" Name="lbl5" MouseDown="lbl1_MouseDown"></Label>

        <Label Content="Label6" Background="Aqua" Name="lbl6" MouseDown="lbl2_MouseDown"></Label>

        <Label Content="Label7" Background="Aquamarine" Name="lbl7" MouseDown="lbl2_MouseDown"></Label>

        <Label Content="Label8" Background="Azure" Name="lbl8" MouseDown="lbl1_MouseDown"></Label>
 </UniformGrid>
</Grid>

CS FILE

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Shapes;
using System.Windows.Controls.Primitives;

namespace MultipleChartsLayoutTesting
{
    /// 
    /// Interaction logic for MainWindow.xaml
    /// 
    public partial class MainWindow : Window
    {
     public MainWindow()
     {
      this.InitializeComponent();
            lbl1.Visibility = Visibility.Hidden;
            lbl2.Visibility = Visibility.Hidden;
            lbl3.Visibility = Visibility.Hidden;
            lbl4.Visibility = Visibility.Hidden;
            lbl5.Visibility = Visibility.Hidden;
            lbl6.Visibility = Visibility.Hidden;
            lbl7.Visibility = Visibility.Hidden;
     }
        private void lbl1_MouseDown(object sender, MouseButtonEventArgs e)
        {

            lbl1.Background = System.Windows.Media.Brushes.Aqua;

            lbl2.Background = System.Windows.Media.Brushes.White;

            lbl3.Background = System.Windows.Media.Brushes.White;

            lbl4.Background = System.Windows.Media.Brushes.Aqua;

            lbl5.Background = System.Windows.Media.Brushes.Aqua;

            lbl6.Background = System.Windows.Media.Brushes.White;

            lbl7.Background = System.Windows.Media.Brushes.White;

            lbl8.Background = System.Windows.Media.Brushes.Aqua;

        }



        private void lbl2_MouseDown(object sender, MouseButtonEventArgs e)
        {

            lbl1.Background = System.Windows.Media.Brushes.White;

            lbl2.Background = System.Windows.Media.Brushes.Aqua;

            lbl3.Background = System.Windows.Media.Brushes.Aqua;

            lbl4.Background = System.Windows.Media.Brushes.White;


            lbl5.Background = System.Windows.Media.Brushes.White;

            lbl6.Background = System.Windows.Media.Brushes.Aqua;

            lbl7.Background = System.Windows.Media.Brushes.Aqua;

            lbl8.Background = System.Windows.Media.Brushes.White;

        }
    }
}

Answer 3

Why not use a WrapPanel with a zoom slider that controls the size of the charts.

If there is one chart, you will be able to zoom-in full space. If there are any arbitrary number, it will wrap on multiple line.

Suppose your charts are in a collection:

<ListBox ItemsSource="..." ScrollViewer.HorizontalScrollBarVisibility="Disabled">
 <ListBox.ItemsPanel>
  <ItemsPanelTemplate>
   <WrapPanel IsItemsHost="True" />
  </ItemsPanelTemplate>
 </ListBox.ItemsPanel>
 <ListBox.ItemsTemplate>
  <DataTemplate>
   <YourChart Height="{Binding Path=Value, ElementName=_sizeSlider}" Stretch="Uniform" />
  </DataTemplate>
 </ListBox.ItemsTemplate>
</ListBox>

And the slider:

<Slider Name="_sizeSlider" Minimum="25" Maximum="500" Value="80" TickFrequency="1" HorizontalAlignment="Right" Width="113" />