Window Content Changing By Clicking on buttons

Question

I'm posting this even if there are other answers because I tried many solutions but I didn't find one that suits my problem.

I did some screenshot to explain myself better.

I have an application that looks like this:

https://i.stack.imgur.com/JIYF8.jpg

A, B, C, D and the grey ones are simple buttons.

If I click on A, I want the content to change, becoming like this:

https://i.stack.imgur.com/k1PZb.jpg

Same if I click on B, C, D but the content will be different.

Going deeper, I want the same thing happening for buttons E, F, G, H and more in-depht ones. (All the app is based on the 4 button design).

Until now I built the design of the Main Window of my application, using the following XAML code:

<Window x:Class="WpfApplication3.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" Name="RootWindow" >


    <Grid>

       <Grid.ColumnDefinitions>
           <ColumnDefinition />
           <ColumnDefinition />

       </Grid.ColumnDefinitions>
       <Grid.RowDefinitions>
           <RowDefinition  />
           <RowDefinition />
           <RowDefinition Height="10"/>
        <RowDefinition Height="40"/>

        </Grid.RowDefinitions>

    <Button Name="Audiovisiva" Grid.Row="0" Grid.Column="0" Background="Yellow"     FontWeight="Bold" FontSize="24" Foreground="#FF7F00FF" >A</Button>
    <Button Name="Orientamento" Grid.Row="0" Grid.Column="1" Background="Red" Foreground="#FF00FF15" FontSize="24" FontWeight="Bold">B</Button>
    <Button Name="Button3" Grid.Row="1" Grid.Column="0" Background="#FFB900FF" Foreground="#FFFBFF00" FontSize="24" FontWeight="Bold">C</Button>
    <Button Name="Button4" Grid.Row="1" Grid.Column="1" Background="#FF00EBFF" Foreground="#FFFFC902" FontSize="24" FontWeight="Bold">D</Button>
    <Button Name="Button5" Grid.Row="4" Grid.Column="0">Back</Button>
    <Button Name="Button6" Grid.Row="4" Grid.Column="1">Next</Button>



    </Grid>
</Window>

My question is: is there a clever way to display dynamic content in this case? (I'm a newbie with WPF programming so please explain me as well as possibile).

Remember there there will be a lot of possibile layers, because every button has to "generate" a new set of 4 buttons going every time deeper inside the application.

Thank you for any help you can give me!

EDIT:

No, once I clicked on "A", none "A" will repeat. The main objective is to create a suite, where you can choose an option between A,B,C,D and, if you get "A", the next view will display 4 buttons to choose between different kind of options for "A" functionality. To make an example, suppose that if I choose "Reading" function, in the next view I can choose between "Start", "Options", "Something", "Home". If I press "start" I want to start my application core (in this case, a reading exercise), if I press "options" I want to choose between "Reading speed", "Font Size" ecc... to set up my reading exercise options, if press "something" somethin else will be done, if I press "Home" I want to go back to the first screen.

The main aim is to navigate between 4 buttons screens to set up options and then press the "start" button to begin with the personalized exercise.

I hope I explained myself well.

Answer 1

What kind of content is the new kind features that you want to show?

You just need to add buttonclickevents to the button's in each square. For instance:

Button Name="Audiovisiva" Grid.Row="0" Grid.Column="0" Background="Yellow" FontWeight="Bold" FontSize="24" Foreground="#FF7F00FF" Button.Click = "Button1_Click" >

and then

private void button1_Click(object sender, EventArgs e) { // action here }

I think that, in the top of grid, you put 4 canvas, you can change the content preatty easily. Like canvas.content = "image"

Answer 2

With the information from your post / edit and a little bit of DataBindinghere is a working example.

First create a class Item which a) represents a button b) holds the buttons information and c) is the composite pattern

So Item can have Items inside

public class Item
{
    public Item(string letter, Brush back, Brush front)
    {

        Letter = letter;
        BackColor = back;
        FrontColor = front;
    }

    public Item(string letter, Brush back, Brush front, List<Item> items)
        : this(letter, back, front)
    {
        Items = items;
    }

    public List<Item> Items { get; set; }


    public string Letter { get; set; }
    public Brush BackColor { get; set; }
    public Brush FrontColor { get; set; }
}

This is the MainWindow.xaml

<Window x:Class="WpfApplication1.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:wpfApplication1="clr-namespace:WpfApplication1"
    Title="MainWindow" Height="350" Width="525"
    DataContext="{Binding RelativeSource={RelativeSource Self}}">
<Grid>

    <Grid.Resources>
        <DataTemplate DataType="{x:Type wpfApplication1:Item}">
            <Button Content="{Binding Letter}" Foreground="{Binding FrontColor}" Background="{Binding BackColor}" Click="Button_OnClick" Tag="{Binding}"/>
        </DataTemplate>
    </Grid.Resources>

    <Grid.ColumnDefinitions>
        <ColumnDefinition />
        <ColumnDefinition />
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition  />
        <RowDefinition />
        <RowDefinition Height="10"/>
        <RowDefinition Height="40"/>

    </Grid.RowDefinitions>

    <ContentPresenter Grid.Row="0" Grid.Column="0" Content="{Binding Items[0]}"/>
    <ContentPresenter Grid.Row="0" Grid.Column="1" Content="{Binding Items[1]}"/>
    <ContentPresenter Grid.Row="1" Grid.Column="0" Content="{Binding Items[2]}"/>
    <ContentPresenter Grid.Row="1" Grid.Column="1" Content="{Binding Items[3]}"/>

    <Button Name="Button5" Grid.Row="4" Grid.Column="0">Back</Button>
    <Button Name="Button6" Grid.Row="4" Grid.Column="1">Next</Button>



</Grid>

And this the MainWindow.cs

/// <summary>
/// Interaktionslogik für MainWindow.xaml
/// </summary>
public partial class MainWindow : Window, INotifyPropertyChanged
{
    public MainWindow()
    {
        Items = BuildItems();
        InitializeComponent();
    }

    private List<Item> BuildItems()
    {
        var list = new List<Item>();

        //  Add option "A" with suboptions
        list.Add(new Item("A", Brushes.Red, Brushes.Yellow, new List<Item>
            {
                new Item("E", Brushes.Green, Brushes.Black),
                new Item("F", Brushes.LightBlue, Brushes.Black),
                new Item("G", Brushes.Red, Brushes.Black),
                new Item("H", Brushes.LemonChiffon, Brushes.Black)
            }));

        // Add option "B"
        list.Add(new Item("B", Brushes.Yellow, Brushes.Green));
        // Add option "C"
        list.Add(new Item("C", Brushes.Blue, Brushes.Yellow));
        // Add option "D"
        list.Add(new Item("D", Brushes.GreenYellow, Brushes.Yellow));


        return list;
    }


    private List<Item> item;

    public List<Item> Items
    {
        get { return item; }
        set
        {
            if (item != value)
            {
                item = value;
                OnPropertyChanged("Items");
            }
        }
    }

    public event PropertyChangedEventHandler PropertyChanged;

    protected virtual void OnPropertyChanged(string propertyName)
    {
        var handler = PropertyChanged;
        if (handler != null) handler(this, new PropertyChangedEventArgs(propertyName));
    }

    private void Button_OnClick(object sender, RoutedEventArgs e)
    {
        var item = (sender as Button).Tag as Item;
        if (item != null && item.Items != null)
            Items = item.Items;
    }
}

This example should work out of the box. To customize follow my code in List<Item> BuildItems(). It is at this point very flexible for your requirements. But there would be, with some deeper wpf knowledge, a few improvements to the code (using ICommand, ViewModels etc.)

Hope I could help