MahApps Change LeftWindowCommands Items when changing the tab

Question

I have a tabControl in my MainWindow and a working LeftWindowCommand

It's all fine. But now i want to use the LeftWindowCommand as a "Sub-Menu-Bar", so if you change the selected Tab, the LeftWindowCommands-Bar should also change there items and the actions behind the buttons. I've played around with the visibility, but that's not what i want.

For better understanding:

You see the items "Giveaway, Losung, Songrequest". These items are inside my TabControl.

And now i want to change the "Sub Menu"-Items (described in the picture) when i select a different tab then giveaway.

Can someone guide me, how to do that?

EDIT2: Finally it works with MVVM, but i still dont know, how to bind the LeftWindowCommands.

MainModel:

class MainModel
{
    public string Header { get; set; }
    public MahApps.Metro.Controls.MetroContentControl Content { get; set; }
    public MahApps.Metro.Controls.WindowCommands LeftWindowCommands { get; set; }
}

MainViewModel:

class MainViewModel : BaseViewModel
{
    private ObservableCollection _tabItems;
    public ObservableCollection tabItems
    {
        get { return _tabItems; }
        set
        {
            _tabItems = value;
            OnPropertyChanged("tabItems");
        }

    }

    public MainViewModel()
    {
        _tabItems = new ObservableCollection()
        {
            new Model.MainModel
            {
                Header = "Giveaway",
                Content = new Controls.ucGiveaway(),
                LeftWindowCommands = LeftWindowCommandsGiveaway()
            },
            ... etc 
        };
    }

    private MahApps.Metro.Controls.WindowCommands LeftWindowCommandsGiveaway()
    {
        MahApps.Metro.Controls.WindowCommands command = new MahApps.Metro.Controls.WindowCommands();
        command.Items.Add(
            new Button { Content = "MyButton #1", Foreground = Brushes.Red });

        return command;
    }
}

DataContext:

TabControl:

This works. The designer shows all tabs & content. How can i bind the WindowCommands? I want something like:

Furthermore i want to be able to add more than one button in my MainViewModel. Something like:

private MahApps.Metro.Controls.WindowCommands LeftWindowCommandsGiveaway()
    {
        MahApps.Metro.Controls.WindowCommands command = new MahApps.Metro.Controls.WindowCommands();
        command.Items.Add(
            new Button { Content = "MyButton #1", Foreground = Brushes.Red });

        command.Items.Add(
            new Button { Content = "MyButton #2", Foreground = Brushes.Red });

        return command;
    }

appa yip yip · Accepted Answer

Ideally, you would use Bindings, but since you are using code-behind, here's a simple solution (it is up to you if you want to adapt it to some patter like MVVM):

Basically what this code does is:

There's a List of UIElements containing all the sub-menus (they can be anything, from a simple Button to a StackPanel full of elements).
- IMPORTANT: The items on the list must be ordered, which means index 0 => sub-menu for tab index 0.
Inside the WindowCommands there's a TransitioningContentControl which will be responsible for containing the sub-menu.
Everytime the selected tab changes, I load the n position of the List to the TransitioningContentControl (n is the selected index of the TabControl).

Output:

And here's the code I've used for the example, so you can adapt it:

Code-behind:

public partial class MainWindow : MetroWindow
{
    public List LeftWindowCommands { get; private set; }

    public MainWindow()
    {
        InitializeComponent();

        LeftWindowCommands = new List();

        var StackPanelForTab1 = new StackPanel() { Orientation = Orientation.Horizontal };
        var StackPanelForTab2 = new StackPanel() { Orientation = Orientation.Horizontal };
        var StackPanelForTab3 = new StackPanel() { Orientation = Orientation.Horizontal };

        // You can add as many children as you want
        StackPanelForTab1.Children.Add(new Button { Content = "MyButton #1", Foreground = Brushes.Red });
        StackPanelForTab2.Children.Add(new Button { Content = "MyButton #2", Foreground = Brushes.Black });
        StackPanelForTab3.Children.Add(new Button { Content = "MyButton #3", Foreground = Brushes.Blue });

        // MUST add items in the right order on the list
        // MUST have the sabe amount of tabs on the TabControl and items on the list
        LeftWindowCommands.Add(StackPanelForTab1);
        LeftWindowCommands.Add(StackPanelForTab2);
        LeftWindowCommands.Add(StackPanelForTab3);
    }

    private void TabControl_SelectionChanged(object sender, SelectionChangedEventArgs e)
    {
        if (e.Source is TabControl)
        {
            MyContentControl.Content = LeftWindowCommands[MyTabControl.SelectedIndex];
        }
    }
}

Window:

You'll need this:

using MahApps.Metro.Controls;
using System.Collections.Generic;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Media;

If you try to adapt it to MVVM and have any troubles I'm here to help.

MahApps Change LeftWindowCommands Items when changing the tab

Answers (2)

Output:

Code-behind:

Window:

Related Questions