CODEWITHSUNDEEP
c#wpfxamlstackpanel
Leth
Leth

Reputation: 1059

Show/hide user controls with menu items in WPF

I've created a stack panel on my main window with a dock panel holding the menu and menu items. In the same stack panel I have my 3 user controls. I need to display only one of these 3 user controls when a user clicks a menu item, but my hidden user controls still take up space when they are not shown.

enter image description here

Between the menu and my visible user control at the bottom, there is another hidden user control that takes up space.

The stack panel in question:

<StackPanel>
        <DockPanel>
            <Menu DockPanel.Dock="Top">
                <MenuItem Header="Equipment">
                    <MenuItem Header="_List" Click="mnuEquipList_Click" />
                    <MenuItem Header="_Create" Click="mnuEquipCreate_Click" />
                    <MenuItem Header="_Update" Click="mnuEquipUpdate_Click" />
                </MenuItem>
                <MenuItem Header="_Exit" Click="mnuExit_Click" />
            </Menu>
        </DockPanel>
        <equipment:EquipmentCreateView Visibility="Hidden" x:Name="equipCreateView"></equipment:EquipmentCreateView>
        <equipment:EquipmentListView DataContext="{Binding EquipmentListViewModel}" Visibility="Hidden" x:Name="equipListView"></equipment:EquipmentListView>
        <equipment:EquipmentUpdateView Visibility="Hidden" x:Name="equipUpdateView"></equipment:EquipmentUpdateView>
    </StackPanel>

When a user clicks a menu item, the Visibility property is set to true and the others to false. Is there another way to achieve this functionality?

Upvotes: 1

Views: 1039

Answers (1)

Anton Gorbunov
Anton Gorbunov

Reputation: 1444

Simple way: Use "Collapsed" instead "Hidden"

Better way:

ViewModels of your Equipment Views must inhertance from common interface.

public class EquipmentCreateViewModel : IEquipment
{
     //...
}

public class EquipmentListViewModel : IEquipment
{
     //...
}

You should assign this ViewModels in Property on Main viewmodel when users click buttons by RelayCommands.

public class MainViewModel
{
     public IEquipment SelectedEquipment {get;set;}
}

On main View you should declare DataTemplate.

Parts of MainView.xaml:

<UserControl.Resources>
        <ResourceDictionary>            
            <DataTemplate DataType="{x:Type equipment:EquipmentCreateViewModel}">
                <equipment:EquipmentCreateView />
            </DataTemplate>
            <DataTemplate DataType="{x:Type equipment:EquipmentListViewModel}">
                <equipment:EquipmentListView />
            </DataTemplate>
            <!--And so on-->            
        </ResourceDictionary>
    </UserControl.Resources>

Upvotes: 1

Related Questions