What is the mvvm way of disabling/hiding tabitem's on app load ?

Question

What is the mvvm way of disabling/hiding tabitem's on app load ?

don bradman 626

I have a WPF app with multiple tabitem's MyTab1, MyTab2, MyTab3 ... etc.

When the app is loaded I want to check the devices MAC address and if there is a mismatch (i.e. it is launched from a different machine) some tabitem's will be hidden.

Currently I have something like:

public partial class Window1 : Window  
    {  
          
        public Window1()  
        {  
            InitializeComponent();  
              
            Window1 window2 = Application.Current.Windows  
                .Cast<Window>()  
                .FirstOrDefault(window => window is Window1) as Window1;  
              
            if (GetMAC() != "99US114229TT")  
            {  
                window2.MyTab2.Visibility=Visibility.Collapsed;  
                window2.MyTab3.Visibility=Visibility.Collapsed;  
            }  
  
        }  
          
        public string GetMAC()  
        {  
            string addr = "";  
            foreach (NetworkInterface n in NetworkInterface.GetAllNetworkInterfaces()) {  
                if (n.OperationalStatus == OperationalStatus.Up) {  
                    addr += n.GetPhysicalAddress().ToString();  
                    break;  
                }  
            }  
            return addr;  
        }  
          
    }

But how can I do this following MVVM pattern ?

Peter Fleischer (former MVP) 19,341 Reputation points

2022-12-14T09:21:34.95+00:00

HI,
its very easy. Bind Visibilty property of TabItem to Property in ViewModel. If type of this ViewModel property isn't Visibility you can use Converter.

Please, describe how you want to work and I can you get an code example.
don bradman 626 Reputation points

2022-12-14T09:59:17.433+00:00

Hi,

I've never used a varible of type Visibility.

Say, if type of this ViewModel property is Visibility then how do I declare it in the ViewModel (is it like any other property declaration ...) and how I bind it to Visibilty property of TabItem to get working like I described in my question ?

1 answer

Your answer

Peter Fleischer (former MVP) 19,341 Reputation points

2022-12-14T09:21:34.95+00:00

HI,
its very easy. Bind Visibilty property of TabItem to Property in ViewModel. If type of this ViewModel property isn't Visibility you can use Converter.

Please, describe how you want to work and I can you get an code example.
don bradman 626 Reputation points

2022-12-14T09:59:17.433+00:00

Hi,

I've never used a varible of type Visibility.

Say, if type of this ViewModel property is Visibility then how do I declare it in the ViewModel (is it like any other property declaration ...) and how I bind it to Visibilty property of TabItem to get working like I described in my question ?

Answer 1

Peter Fleischer (former MVP) 19,341

Hi,
try this demo:

XAML:

<Window x:Class="WpfApp1.Window034"  
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"  
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"  
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"  
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"  
        xmlns:local="clr-namespace:WpfApp034"  
        mc:Ignorable="d"  
        Title="Window034" Height="450" Width="800">  
  <Window.DataContext>  
    <local:ViewModel/>  
  </Window.DataContext>  
  <TabControl>  
    <TabItem Header="Tab1">  
      <Button Content="Change Visbility of Tab2" Command="{Binding}" Width="200" Height="50"/>  
    </TabItem>  
    <TabItem Header="Tab2" Visibility="{Binding Vis}"/>  
    <TabItem Header="Tab3"/>  
  </TabControl>  
</Window>

and ViewModel:

using System;  
using System.ComponentModel;  
using System.Windows;  
using System.Windows.Input;  
  
namespace WpfApp034  
{  
	public class ViewModel : ICommand, INotifyPropertyChanged  
	{  
		public Visibility Vis { get; set; }  
  
		public event EventHandler? CanExecuteChanged;  
		public event PropertyChangedEventHandler? PropertyChanged;  
  
		public bool CanExecute(object? parameter) => true;  
		public void Execute(object? parameter)  
		{  
			this.Vis = (this.Vis == Visibility.Visible) ? Visibility.Collapsed : Visibility.Visible;  
			PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(nameof(Vis)));  
		}  
	}  
}

Result:

don bradman 626 Reputation points

2022-12-14T13:08:03.873+00:00

Hi @Peter Fleischer (former MVP) ,

Thanks for answer but I actually want the tabitem's to be hidden on app load after running a MAC address check.

Peter Fleischer (former MVP) 19,341

Hi,
for setting property at start you can use ctor of ViewModel:

	public class ViewModel : ICommand, INotifyPropertyChanged  
	{  
		public ViewModel() => Vis = (GetMAC() == "99US114229TT") ? Visibility.Visible : Visibility.Collapsed;

don bradman 626 Reputation points

2022-12-14T14:36:08.907+00:00

Hi,

Thank you, but for some reason I can see the contents of the hidden tabitem initially when I launch the app... How to fix that ?
Peter Fleischer (former MVP) 19,341 Reputation points

2022-12-14T15:12:41.093+00:00

Hi,
what do you mean with "some reasons"?

In my code it is impossible to see some content, because ViewModel will be instantiated before rendering UI.
Peter Fleischer (former MVP) 19,341 Reputation points

2022-12-14T15:15:00.54+00:00

Hi,
set initial value to hidden and if check is true set to visible.

don bradman 626

Hi,

To be honest, I did a little modification to your code as I'm testing this on older c# version.

public class ViewModel : ViewModelBase  
     {  
		public Visibility Vis { get; set; }  
		  
		public ViewModel()  
		{  
			Vis = (GetMAC() == "99US114229TT") ? Visibility.Visible : Visibility.Collapsed;  
			  
		}  
	 }

don bradman 626 Reputation points

2022-12-14T16:08:09.08+00:00

Hi,

where and how do I set initial value to hidden and if check is true set to visible ?

Actually the controls that I'm seeing on app load are on the 1st tabitem and it is one of the tabitem's along with the 2nd tabitem that I want to hide, so if I select the 3rd tabitem on app load by adding this.tabControl1.SelectedIndex=2; inside my MainWindow constructor after InitializeComponent(); it should do the job.

But I'm not sure if this is the right way and does it brake the mvvm pattern ?
Peter Fleischer (former MVP) 19,341 Reputation points

2022-12-14T17:52:28.387+00:00

Hi,
using code "inside MainWindow constructor after InitializeComponent();" brake the mvvm pattern. That is not necessary. You can put code to execute before binding UI in ctor of ViewModel.

don bradman 626

Hi,

if I add a property in viewmodel and in viewmodel's constructor do like

public class BVM : ViewModelBase  
{  
		public int ActiveTabItemIndex {get; set;}  
        public Visibility Vis { get; set; }  
		  
		public BVM()  
		{  
			if (GetMAC() != "99US114229TT")  
			{  
				ActiveTabItemIndex=2;  
			}  
			else  
				ActiveTabItemIndex=0;  
			  
			  
			Vis = (GetMAC() == "99US114229TT") ? Visibility.Visible : Visibility.Collapsed;  
		}  
}

and then in xaml bind the SelectedIndex like <TabControl SelectedIndex="{Binding ActiveTabItemIndex}" ... would it still break the mvvm pattern ?

Peter Fleischer (former MVP) 19,341 Reputation points

2022-12-15T12:01:27.447+00:00
Hi,
concentrate all code outside CodeBehind only in ViewModel and Model don't break MVVM pattern. You can initial set Visibility to Collapsed:

public class BVM : ViewModelBase { public int ActiveTabItemIndex {get; set;} public Visibility Vis { get; set; } = Visibility.Collapsed; ...
don bradman 626 Reputation points

2022-12-15T12:53:55.083+00:00

Hi,

Unfortunately since I'm using older c# 5.0 I cannot initialize like public Visibility Vis { get; set; } = Visibility.Collapsed;

Peter Fleischer (former MVP) 19,341

Hi,
I don't understand why you must use very old version C# and old compiler. You can write code for property like in last century:

  public class BVM : ViewModelBase  
  {  
          public int ActiveTabItemIndex {get; set;}  
          private Visbility _vis = Visibility.Collapsed;  
          public Visibility Vis { get {return this._vis;} set {this._vis = value;} }   
 ...

don bradman 626 Reputation points

2022-12-15T14:51:05.923+00:00

Hi,

I don't understand why you must use very old version C# and old compiler.

Because in one the PC's that I'm currently building and compiling the code is an old one with not much disk space and more importantly only 2 Gigs of RAM, so I cannot install VS in it as it makes that PC inoperable. So, my only hope for that PC is SharpDevelop, which has been discontinued 6 years back and currently there are no alternatives that can run on such low resources with only like 50 MB setup with GUI and I can build, test and deploy an app with it. I know it sucks big time but that's what I'm stuck with at this moment.

BTW, do I still need the if else section with ActiveTabItemIndex because I can still see the controls like label's and stuff of the first tabitem if I don't?

Also do note that I'm trying to implement this in a type of project where some of the properties inside the viewmodel are instantiated in getter's like my previous questions project.
Peter Fleischer (former MVP) 19,341 Reputation points

2022-12-16T08:10:49.303+00:00

Visual Studio Code works with 1 GB Ram.

In MVVM you can set values of all properties before rendering first UI. If you have any problems with showing details set this details during design time (=after start) to invisible and after starting program use async, await, INotifyPropertyChanged for setting necessary elements to visible.

Share via

What is the mvvm way of disabling/hiding tabitem's on app load ?

1 answer

Your answer