Question

I am new into WPF. I am currently developing an application where my solution in MSVC# 2010 has 2 projects. One project(i.e.MSPBoardControl) has a mainwindow.xaml and I have added another wpf window ConnectView.xaml. By using the grid in mainwindow.xaml I am able to add the Connectview.xaml view to my application in mainwindow.xaml.cs. My 2nd project is a classlibrary which has a usercontrol(i.e. Voltage).

Mainwindow.xaml: This grid is the one to which I add my Connectview.xaml UI component

<Grid Grid.Row="0" Name="MainGrid" HorizontalAlignment="Stretch" Style="{DynamicResource styleBackground}" >                        
                </Grid>

I have a listbox in my mainwindow.xaml towards the left side which has list of items(i.e. Voltage, Clock etc). The right side of .xaml has my grid which is shown above(contains the connectview on startup). What I basically need is when I click the item from the listbox, I want to hide the view which is shown on startup(connectview) and make the selecteditem UI component visible.

As mentioned in the beginning I want to make a usercontrol of my classlibrary(VoltageView) visible on clicing “Voltage” item from Listbox.

ListBox in my mainwindow.xaml:

 <ListBox Name="ButtonPanel" Style="{DynamicResource styleBanner}" ItemsSource="{Binding BoardOperations, Mode=TwoWay}" SelectedItem="{Binding SelectedList}" >
                <ListBox.ItemTemplate>
                    <DataTemplate>
                        <StackPanel Orientation="Horizontal">
                            <TextBlock Name="BoardTabChanger" Margin="53,27,0,0" Text="{Binding ListName}" />
                        </StackPanel>
                    </DataTemplate>
                </ListBox.ItemTemplate>
            </ListBox>

The ViewModel Class of MSPBoardControl is here:

public class BoardControlViewModel : INotifyPropertyChanged
{        
    public ObservableCollection<BoardControlModel> m_BoardOperation;
    public List<ConnectModel> m_BoardNames; 

    public BoardControlViewModel()
    {
        //Adding items to ListBox
    }

    public List<ConnectModel> BoardNames
    {
        get; set;
    }

    private ConnectModel m_SelectedBoardItem;
    public ConnectModel SelectedBoard
    {
        get; set;
    }

    public ObservableCollection<BoardControlModel> BoardOperations
    {
        get; set;
    }

    //GIVES ME THE SELECTED ITEM FROM LISTBOX

    private BoardControlModel m_SelectedListItem;
    public BoardControlModel SelectedList
    {
        get
        {
            return m_SelectedListItem;
        }

        set
        {
            m_SelectedListItem = value;
            onListSelected(value);
            NotifyPropertyChanged("SelectedList");                
        }
    }

    private void onListSelected(BoardControlModel SelectedItem)
    {
        if (SelectedItem.ListName == "Voltage")
        {
            //HOW CAN I ADD THE VOLTAGEVIEW HERE???
        }
    }

The above method OnListSelected() retrieves the selecteditem and when I check the condition dat item = voltage, I want to add the voltageview component to my maingrid and hide the connectview.

VoltageView.xaml:

<Grid Name="VoltageControl" Style="{DynamicResource styleBackground}" DataContext="{StaticResource VoltageViewModel}" >
    <Label Content="Label" FontSize="15" Foreground="Black" Height="28" HorizontalAlignment="Left" Margin="10,31,0,0" Name="label9" VerticalAlignment="Top" Width="117" />
    <Label Content="Set Voltage" FontSize="15" Foreground="Black" Height="28" HorizontalAlignment="Left" Margin="150,31,0,0" Name="label10" VerticalAlignment="Top" Width="117" />
    <Label Content="Current Value" FontSize="16" Foreground="Black" Height="28" HorizontalAlignment="Left" Margin="300,31,0,0" Name="label11" VerticalAlignment="Top" Width="117" />
    <Label Content="Enable/Disable" FontSize="15" Foreground="Black" Height="28" HorizontalAlignment="Left" Margin="460,31,0,0" Name="label12" VerticalAlignment="Top" Width="127" />
    <Button Content="Refresh All" FontSize="13" Height="25" HorizontalAlignment="Left" Margin="230,520,0,0" Name="RefreshBtn" VerticalAlignment="Top" Width="105" />
</Grid>    

Please help!!!

Answer 1

I’m going to keep this general(ish). Your best bet is probably to add a property on BoardControlViewModel of type Grid (or whatever UIElement that is common to voltage and connect). As the selection changes, change the UI property to the view you want and hit NotifyPropertyChanged for that property. You can call NotifyPropertyChanged right from onListSelected if you like. Bind the content of whatever grid you’re using to this property, prefferably right in the xaml. When the property changes, WPF will notify the grid that its bound content has changed and it will query your new property to see what it should be.