Лучший макет для отображения нескольких графиков wpf C #

Question

У меня странная проблема: я хочу показать несколько графиков во время выполнения и несколько раз один график. Пожалуйста, предложите мне гибкий макет, потому что в будущем будет больше диаграмм.

В настоящее время я использую сетку. Я не делюсь своим кодом, потому что он все грязный, но я показываю вам его макет, которого я достиг с сеткой.

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

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

Answer 1

Почему бы не использовать WrapPanel с ползунком масштабирования, который управляет размером диаграмм.

Если есть один график, вы сможете увеличить все пространство. Если есть произвольное число, оно будет перенесено на несколько строк.

Предположим, ваши диаграммы в коллекции:

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

И слайдер:

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

Answer 2

Пример слишком велик для публикации в комментариях Скрытие всех столбцов, чтобы показать оставшийся столбец в центре экрана, не имеет никакого эффекта, если вы установите его вертикальное и горизонтальное выравнивание по центру, оно не работает, а уменьшает его размер и не меняет его местоположение ... так что Idea Flop .. . предложить новый макет * 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

Как насчет UniformGrid ?