Question

I am trying to figure out a ViewModel for a program I am working on. I have not done this before. Here is the partial class definition for the Switch object that needs the ViewModel and the XAML I have so far. I know the XAML needs more.

Right now I am doing code-behind to fill the SwitchBrowser window with data before I open it. I know it would be easier to bind an ObservableCollection to the XAML.

Can I store a CiscoSwitch object in an ObservableCollection and bind directly to the properties on the Switch object?

If so, can I do something like setting the ItemsSource on the ModulesTreeview in the XAML to the ModulesList on the CiscoSwitch? Right now I am using a foreach in the code-behind to fill the ModulesTreeView.

Or, would I create an ObservableCollection of SwitchModules, then another for VSANs, and so forth?

 public partial class CiscoSwitch
{
    #region baseswitchclassproperties
    private string _SwitchName = String.Empty;
    public string switchName{ get{return _SwitchName;} set{_SwitchName=value;} }        private string _SWVersion = String.Empty;
    public  string swVersion{ get{return _SWVersion;} set{_SWVersion=value;} }
    private string _SwitchModel = String.Empty;
    public string switchModel { get{return _SwitchModel;} set{_SwitchModel=value;} }
    private string _SerialNumber = String.Empty;
    public string SerialNumber { get { return _SerialNumber; } set { _SerialNumber = value; } }
    private string _SwitchWWPN = string.Empty;
    public string SwitchWWPN { get { return _SwitchWWPN; } set { _SwitchWWPN = value; } }
    public Dictionary<int, SwitchModule> ModuleList = new Dictionary<int, SwitchModule>();
    public Dictionary <int, CiscoVSAN> VSANList = new Dictionary<int, CiscoVSAN>();
    protected EthernetPort _ManagementPort = new EthernetPort();
    public string IPAddress{ set{_ManagementPort.IPAddress=value;} get{return _ManagementPort.IPAddress;} }

    public string LastDataCaptureDate = null;
    public Dictionary<int, PortChannel> PortChanelList = new Dictionary<int, PortChannel>();
    public Dictionary<String, FCIPPort> FCIPPortList = new Dictionary<string, FCIPPort>();
    public InterVSANTopology IVRTopology =  null; //new InterVSANTopology();

    public Dictionary<int, List<CiscoSwitch>> NeighborsList = new Dictionary<int, List<CiscoSwitch>>();
    public Dictionary<string, string> DeviceAliases = new Dictionary<string, string>();
    public Dictionary<string, FCPort> FlogiDatabase = new Dictionary<string, FCPort>();
    #endregion
}

XAML:

<Window.Resources>
    <Style TargetType="{x:Type TreeViewItem}" x:Key="ModuleStyle">
        <Setter Property="Foreground" Value="Blue"/>
        <Setter Property="FontSize" Value="12"/>
    </Style>

    <Style TargetType="{x:Type TreeViewItem}" x:Key="RedModuleStyle" BasedOn="{StaticResource ModuleStyle}">
        <Setter Property="Foreground" Value="Red"/>
    </Style>



</Window.Resources>
<Grid Margin="0,0,-211.4,-168">
    <StackPanel HorizontalAlignment="Stretch" Name="StackPanel1" VerticalAlignment="Stretch" Width="Auto" Margin="0,0,188.6,114">
        <StackPanel.Resources> 
            <Style TargetType="{x:Type Label}" x:Key="LabelStyle">
                <Setter Property="Foreground" Value="Blue"/>
                <Setter Property="FontSize" Value="12"/>
                <Setter Property="FontWeight" Value="Bold"/>
            </Style>
        </StackPanel.Resources>
        <Label Content="Switch Name:" Name="Label1" Height="25" HorizontalAlignment="Left"/>
        <Label Content="Software Version:" Name="Label2" HorizontalAlignment="Left" />
        <Label Content="Model Number:" Name="Label3" HorizontalAlignment="left"/>
        <Label Content="IP Address:" Name="Label4" HorizontalAlignment="left"></Label>
        <Label Content="Serial Number:" Name="Label5" HorizontalAlignment="Left"></Label>
        <Label Content="Show Tech Taken:" Name="Label6" HorizontalAlignment="left"/>
    </StackPanel>
    <StackPanel Margin="105,0,15.6,114">
        <StackPanel.Resources>
            <Style TargetType="{x:Type Label}" x:Key="LabelStyle">
                <Setter Property="FontSize" Value="12"/>
                <Setter Property="FontWeight" Value="Bold"/>
            </Style>
        </StackPanel.Resources>
        <Label Content="Name" Name="SwitchNameLabel" HorizontalAlignment="left"/>
        <Label Content="Version" Name="VersionLabel" HorizontalAlignment="left"/>
        <Label Content="Model" Name="ModelNumberLabel" HorizontalAlignment="Left"/>
        <Label Content="IP" Name="IPAddressLabel" HorizontalAlignment="Left"/>
        <Label Content="Serial" Name="SerialLabel" HorizontalAlignment="Left"/>
            <Label Content="ST" Name="ShowTechLabel" HorizontalAlignment="Left"/>

    </StackPanel>
    <StackPanel HorizontalAlignment="Left" Height="Auto" Margin="0,156,0,0" VerticalAlignment="Top" Width="256" >
        <TreeView Name="ModulesTreeView" Height="auto" Background="GhostWhite" BorderThickness="0"/>


    </StackPanel>


</Grid>

Answer 1

Your first idea about creating a single ObservableCollection<CiscoSwitch> is the correct way to go.
Here is a more simplified example that you can extend to your specific needs.

public class Person
{
    public string Name { get; set; }
    public string Address { get; set; }
}

Assume that in our ViewModel we have an ObservableCollection<Person> called People.

<ListBox ItemsSource="{Binding Path=People}">
    <ListBox.ItemTemplate>
        <DataTemplate>
            <StackPanel Orientation="Horizontal">
                <TextBlock Text="{Binding Path=Name}" />
                <TextBlock Text="{Binding Path=Address}" />
            </StackPanel>
        </DataTemplate>
    </ListBox.ItemTemplate>
</ListBox>

This is an oversimplified example, but I think you should be able to extend it to your needs. Hope this helps!