UserControl Visibility in WPF MVVM Model

Question

0.00/5 (No votes)

See more:

I have 2 UserControls in my MainWindow,one is with list of some names and the other is with a ListBox,TextBox and Button.The problem is when i run the application my mainwindow should be only with usercontrol1 and when i click on the name the usercontrol2 should open on my mainwindow.How can i achieve this,I'm new to this please help me

Posted 29-Oct-13 3:17am

Member 10321925

Updated 29-Nov-19 18:18pm

Add a Solution

Comments

Marvin Ma 29-Oct-13 10:12am

You could define a property to handle the visibilities.
Also define a command or routed event to handle the button click, which sets the property to the value you want.

Try for yourself, it's simple.
If you need help, just ask.

Marvin Ma 29-Oct-13 10:22am

Yeah, sorry wanted to edit that, but you have been faster.

The list box has the events you are looking for:

SelectionChanged for example.
If the event got fired, just set the visibility, this is not the 'cleanest' way, but If you are new to MVVM, this would be the first step.

Marvin Ma 30-Oct-13 3:39am

The fact that you are using a user control allows you to use the routed event of the list box, because you do not produce code behind in your view.
You handle the code within your user control.

Same is valid for a custom control.

Marvin Ma 30-Oct-13 5:36am

Define a property which handles the visibilities (e.g. UserControlVisibility) and BIND this to the visibility property of your user control.

You have to use the BoolToVisibilityConverter.

The property you created (UserControlVisbility) will be set if you select an item of your list (in your case the name).
Make sure to switch the visibility when no name is selected (have a look at selected item).

Now, try to write this logic...I could to this for you, but this would not have any learning effect to you.

Remember: Learning by doing!

Member 10321925 30-Oct-13 5:59am

ok thank u

Member 10321925 30-Oct-13 7:44am

private bool _selectedItem;
public bool SelectedItem
{
get { return _selectedItem; }
set
{
_selectedItem = value;
PropertyChanged(this, new PropertyChangedEventArgs("SelectedItem"));
}
}

Member 10321925 30-Oct-13 7:47am

I have done this and its working when i run the application usercontrol2 is not visible...but don't know how get usercontrol2 when listbox item is selected i tried but i could'nt get it

2 solutions

Add a Solution

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

_Maxxx_ · Answer 1 · 2013-10-29T17:33:00

I guess your second user control is displaying data from the selected item in the list box?

If so, then binding the listbox's SelectedItem property to your ViewModel will tell you if something is selected and, if so, what it is.

You could then bind the visibility of your second user control, via a converter, to the same SelectedItem property - the converter returning Visibility.Collapsed (or Hidden) if the input value is Null, and returning Visibility.Visible if not.

Ashutosh Gpt · Answer 2 · 2019-11-29T18:18:00

Datatrigger is another option to achieve this.
give names to your controls and write triggers on MainControl
defaul user control visibility = visible and control 2 visibility is Collapsed.

Assign Name to button of usercontrol2 on mainwindow, on click on this name usercontrol 2 should open.

C#

<DataTrigger Binding="{Binding userContro2name.IsFocused} value = true> // or may be some other property which changes when you click on name.
<Setter Property ="nameofUserControl2".Visibility Value="Visible"/>
<Setter Property ="nameofUserControl1".Visibility Value="Collapsed"/>
</DataTrigger >

<DataTrigger Binding="{Binding userContro2name.IsFocused} value = false>
<Setter Property ="nameofUserControl2".Visibility Value="Collapsed"/>
<Setter Property ="nameofUserControl1".Visibility Value="Visible"/>
</DataTrigger >

you can apply this triggers on your control and write trigger on style of that control

UserControl Visibility in WPF MVVM Model

2 solutions

Solution 1

Solution 2

Add your solution here

Preview 0

UserControl Visibility in WPF MVVM Model

2 solutions

Solution 1

Solution 2

Add your solution here

Preview 0

Existing Members

...or Join us