How to hide and show UserControls based on SelectedItem in ListBox WPF MVVM Model

Question

0.00/5 (No votes)

See more:

I have 3 UserControls in my MainWindow,In my UserControl1 i have a ListBox with some names.The UserControl2 and 3 are not visible when we start the application.

When i select some name in the listbox of usercontrol1 then the usercontrol2 should appear on my mainwindow,when i select other name then usercontrol3 should appear on my mainwindow.Struggling with this please help me,i'm new to this

This is my UserControlXaml code

<UserControl x:Class="Wpf_MVVM.UserControl1"
         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:d="http://schemas.microsoft.com/expression/blend/2008" 
         mc:Ignorable="d" 
         x:Name="uc1" Height="Auto" Width="Auto">
<Grid>
    <ListBox Name="listbox" ItemsSource="{Binding mylist}"  HorizontalAlignment="Left" Height="310" VerticalAlignment="Top" Width="150" Margin="0,40,0,0" FontSize="15">

    </ListBox>
    <Label Content="Conversations" HorizontalAlignment="Left" VerticalAlignment="Top"  Height="40" Width="150" FontSize="20" Background="SkyBlue"/>
    <Button Content="Create New Chat" Height="30" HorizontalAlignment="Left" Margin="0,350,0,0" VerticalAlignment="Top" Width="150"/>

</Grid>
</UserControl>

This is my .cs code

public partial class UserControl1 : UserControl
{
    User1 User1 = new User1();
    public UserControl1()
    {
        InitializeComponent();
        this.DataContext = User1;
    }
}
public class User1
{
    private ObservableCollection<string> _mylist = new ObservableCollection<string>();

    public ObservableCollection<string> mylist { get { return _mylist; } }

    public User1()
    {
        mylist.Add("Name1");
        mylist.Add("Name2");
        mylist.Add("Name3");
        mylist.Add("Name4");

    }

This is my mainwindow.xaml code

<Window x:Class="Wpf_MVVM.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="clr-namespace:Wpf_MVVM" 
    Title="MainWindow" removed="SlateGray" Height="420" Width="550" >
<Window.Resources>
    <BooleanToVisibilityConverter x:Key="VisibilityConverter" />
</Window.Resources>

<Grid>

    <local:UserControl1 x:Name="uc1"   HorizontalAlignment="Left" VerticalAlignment="Top"/>
    <StackPanel>

        <local:UserControl2 x:Name="uc2"  Visibility="{Binding SelectedItem, Converter={StaticResource VisibilityConverter}}"  HorizontalAlignment="Left" VerticalAlignment="Top" Margin="150,29,0,0" />
        <local:UserControl3 x:Name="uc3" Visibility="{Binding SelectedItem1, Converter={StaticResource VisibilityConverter}}" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="340,29,0,0"/>


    </StackPanel>



</Grid>
</Window>

Posted 31-Oct-13 0:22am

Member 10321925

Add a Solution

2 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Gabriel Szabo · Answer 1 · 2013-10-31T01:47:00

You can use a TabControl synchronized with your listbox to show controls according to the current selection. Syncing by using the SelectedValue property will give you more control over which tabs to show. And perhaps making the tabcontrol invisible is a good idea too:

XML

<stackpanel>
  <listbox x:name="MyListBox1"
           SelectedValuePath="Tag" SelectedValue="{Binding MySelection1}">
    <listboxitem tag="1" content="First item" />
    <listboxitem tag="2" content="Second item" />
  </listbox>
  <tabcontrol selectedindex="{Binding ElementName=MyListBox1, Path=SelectedValue}">
    <tabitem>
      <textblock text="No selection" />
    </tabitem>
    <tabitem>
      <textblock text="Control One" />
    </tabitem>
    <tabitem>
      <textblock text="Control Two" />
    </tabitem>
    <tabcontrol.template>
      <controltemplate targettype="TabControl">
        <grid verticalalignment="Center">
          <stackpanel orientation="Horizontal" isitemshost="True" visibility="Hidden" />
          <contentpresenter contentsource="SelectedContent" margin="0" />
        </grid>
      </controltemplate>
    </tabcontrol.template>
  </tabcontrol>
</stackpanel>

Leung Yat Chun · Answer 2 · 2013-11-01T08:48:00

You can define two dependency property in uc1:

C#

public static readonly DependencyProperty ShouldUc2VisibleProperty = DependencyProperty.Register("ShouldUc2Visible", typeof(bool),
    typeof(UserControl1), new FrameworkPropertyMetadata(false));

public bool ShouldUc2Visible
{
    get { return (bool)GetValue(ShouldUc2VisibleProperty ); }
    set { SetValue(ShouldUc2VisibleProperty , value); }
}

You should set the property using uc1's SetValue() method, do not set the property directly, it breaks bindings.

then your uc2 and uc3 can bind to uc1's ShouldUc2Visible and ShouldUc3Visible property, remember to use the VisibilityConverter as well.

Regards
Joseph Leung

How to hide and show UserControls based on SelectedItem in ListBox WPF MVVM Model

2 solutions

Solution 1

Solution 2

Add your solution here

Preview 0