Custom Data Binding to more than one thing WPF C# - wpf

Question

I have a XAML file which has two things,
a Combo Box
a stackpanel
How to I make it such that a change in the combo box will automatically get the stackpanel to switch from one stack panel to another stackpanel.
My comboBox is something like
<ComboBox x:Name="MCbConnect" SelectedIndex="{Binding EnConnectionType}" Loaded="m_cbConnect_Loaded" SelectionChanged="m_cbConnect_SelectionChanged" Width="100"></ComboBox>
where EnConnectionType is a property like this
private ConnectionType _enConnectionType;
public ConnectionType EnConnectionType
{
get { return _enConnectionType; }
set { SetProperty(ref _enConnectionType, value, "EnConnectionType"); }
}
And ConnectionType is
public enum ConnectionType { Rs232 = 0, Can = 1, Ethernet = 2 };
So i have implemented INotifyChanged interface here already. But I dont know how to bind this data with a stackpanel container which will allow me to switch to a different stackpanel view automatically in the background.
Example of a XAML that i would like to switch to is
<GroupBox x:Class="Gui.CtrlCommSocketSettings"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:src="clr-namespace:Akribis.Gui"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
Header="Comm Settings"
mc:Ignorable="d"
d:DesignHeight="80" d:DesignWidth="300">
<Grid Height="70" VerticalAlignment="Top">
<Grid.Resources>
<Style TargetType="TextBlock">
<Setter Property="HorizontalAlignment" Value="Right"/>
<Setter Property="VerticalAlignment" Value="Center"/>
<Setter Property="Margin" Value="0,0,3,0"/>
</Style>
<Style TargetType="TextBox">
<Setter Property="Width" Value="120"/>
<Setter Property="Margin" Value="0,1"/>
</Style>
<Style TargetType="CheckBox">
<Setter Property="Margin" Value="0,4"/>
</Style>
</Grid.Resources>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<TextBlock Grid.Row="0" Text="Server:" Name="MTextBlockServer"/>
<TextBlock Grid.Row="1" Text="Port:"/>
<TextBox Grid.Row="0" Grid.Column="1" Text="{Binding Server}" Name="MTextBoxServer"/>
<TextBox Grid.Row="1" Grid.Column="1" Text="{Binding Port}"/>
</Grid>
with cs file with something like
namespace Gui
{
public partial class CtrlCommSocketSettings
{
public CtrlCommSocketSettings()
{
InitializeComponent();
}
}
}
I dont want to do this programatically as I know i want to avoid coupling between the model and the view together.
example of what i dont want to do but have at the moment:
in the main XAML, I have an empty stackpanel
<StackPanel Orientation="Vertical" Name="MCtrlCommSettings"></StackPanel>
and i am explicitly adding to this stackpanel by doing something like
MCtrlCommSettings.Children.Clear();
MCtrlCommSettings.Children.Add(_serverCtrlCommSettings);
How do i go about doing this automatically? Like how InotifyChanges will update between views and model automatically. Any suggestion will be gladly welcomed.
Reading online, it seems i need to implement some kind of an observable list

Answer 1

I'd suggest to go with DataTemplates and separate ViewModels for each connection type. Just specify DataTemplates with target type of each ViewModel, and after that use ContentControl, with content property binded CurrentConnection property of your main view model, which would depend on the SelectedValue of the ConnectionType combobox.
UPDATE
Source code to illustrate the solution:
XAML
<Window x:Class="MVVMExample.MainWindow"
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:MVVMExample"
mc:Ignorable="d"
Title="MainWindow" Height="250" Width="425">
<Window.Resources>
<DataTemplate DataType="{x:Type local:Rs232ConnectionViewModel}">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<TextBlock Grid.Row="0" Text="Rs232Port:" />
<TextBox Grid.Row="0" Grid.Column="1" Text="{Binding Rs232Port}" />
</Grid>
</DataTemplate>
<DataTemplate DataType="{x:Type local:CanConnectionViewModel}">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<TextBlock Grid.Row="0" Text="CanParam:" />
<TextBox Grid.Row="0" Grid.Column="1" Text="{Binding CanParam}" />
</Grid>
</DataTemplate>
<DataTemplate DataType="{x:Type local:EthernetConnectionViewModel}">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<TextBlock Grid.Row="0" Text="Server:" />
<TextBlock Grid.Row="1" Text="Port:"/>
<TextBox Grid.Row="0" Grid.Column="1" Text="{Binding EthernetServer}" />
<TextBox Grid.Row="1" Grid.Column="1" Text="{Binding EthernetPort}"/>
</Grid>
</DataTemplate>
</Window.Resources>
<Window.DataContext>
<local:MainWindowViewModel />
</Window.DataContext>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="30"/>
<RowDefinition />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition />
</Grid.ColumnDefinitions>
<ComboBox x:Name="MCbConnect" SelectedValue="{Binding CurrentConnectionType}" ItemsSource="{Binding ConnectionTypes}">
<ComboBox.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding ConnectionType}" />
</DataTemplate>
</ComboBox.ItemTemplate>
</ComboBox>
<ContentControl Grid.Row="1" Content="{Binding CurrentConnectionType}" />
</Grid>
</Window>
C#
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
}
}
public class MainWindowViewModel : INotifyPropertyChanged
{
ObservableCollection<ConnectionTypeViewModel> _connectionTypes;
public ObservableCollection<ConnectionTypeViewModel> ConnectionTypes
{
get { return _connectionTypes; }
private set { _connectionTypes = value; }
}
public MainWindowViewModel()
{
ConnectionTypes = new ObservableCollection<ConnectionTypeViewModel>(new ConnectionTypeViewModel[]
{
new Rs232ConnectionViewModel() { ConnectionType = ConnectionType.Rs232, Rs232Port="COM1"},
new CanConnectionViewModel() { ConnectionType = ConnectionType.Can},
new EthernetConnectionViewModel() { ConnectionType = ConnectionType.Ethernet, EthernetServer="tcp://xxxx"},
});
CurrentConnectionType = ConnectionTypes[2];
}
private ConnectionTypeViewModel _currentConnectionType;
public ConnectionTypeViewModel CurrentConnectionType
{
get { return _currentConnectionType; }
set
{
_currentConnectionType = value;
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(nameof(CurrentConnectionType)));
}
}
public event PropertyChangedEventHandler PropertyChanged;
}
public class ConnectionTypeViewModel : INotifyPropertyChanged
{
private ConnectionType _connectionTypeName;
public ConnectionType ConnectionType
{
get { return _connectionTypeName; }
set { _connectionTypeName = value; OnPropertyChanged(); }
}
protected void OnPropertyChanged([CallerMemberName] string name = null)
{
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(name));
}
public event PropertyChangedEventHandler PropertyChanged;
}
public class Rs232ConnectionViewModel : ConnectionTypeViewModel
{
private string _rs232Port;
public string Rs232Port
{
get { return _rs232Port; }
set { _rs232Port = value; OnPropertyChanged(); }
}
}
public class CanConnectionViewModel : ConnectionTypeViewModel
{
private string _canParam;
public string CanParam
{
get { return _canParam; }
set { _canParam = value; OnPropertyChanged(); }
}
}
public class EthernetConnectionViewModel : ConnectionTypeViewModel
{
private string _ethernetServer;
public string EthernetServer
{
get { return _ethernetServer; }
set { _ethernetServer = value; OnPropertyChanged(); }
}
private string _ethernetPort;
public string EthernetPort
{
get { return _ethernetPort; }
set { _ethernetPort = value; OnPropertyChanged(); }
}
}
public enum ConnectionType { Rs232 = 0, Can = 1, Ethernet = 2 };