Databases
StackOverflow2013
Postsdbo
POCollapse/Visible UserControls on ButtonClick with MVVM - no swap mechanism -
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POCollapse/Visible UserControls on ButtonClick with MVVM - no swap mechanism -
    text
    copied!<p>In my scenario I have a MainView + MainViewModel, UserControl1 + UserControl 2. In the MainView I have 2 buttons labeled: Button_ShowUserControl1 + Button_ShowUserControl2. At the lower part of the MainView I have a "ContentGrid" which takes/should_take... every UserControl.</p> <p><strong>My goal:</strong> </p> <p>When Button_ShowUserControl1 is clicked <strong>UserControl1</strong> is <strong>Visible</strong> and <strong>UserControl2</strong> <em>OR</em> any other UserControl must be set to <strong>Collapsed</strong>. Same is valid for Button_ShowUserControl2.</p> <p><strong>My problem:</strong></p> <p>1.) As the UserControls shall be loaded at application start how can I put them all together in the one "ContentGrid"? Thats actually not possible... so how can I make one UserControl visible while the other is in the same place/"ContentGrid" just collapsed ?</p> <p>2.) As 1.) seems not possible how can I instantiate all UserControls at start of the application and make them only Visible/Collapsed when respective Button is clicked?</p> <p>3.) As a UserControl has a property Visibility = Visible/Hidden/Collapsed, how can I bind to a property in a ViewModel return such a value like Collapsed? I only could get a boolean value like Visibility = false/true ?</p> <p><strong>My testcode:</strong></p> <pre><code>&lt;Grid x:Name="LayoutRoot" Background="#FFBDF5BD" ShowGridLines="False"&gt; &lt;Grid.RowDefinitions&gt; &lt;RowDefinition Height="96*" /&gt; &lt;RowDefinition Height="289*" /&gt; &lt;/Grid.RowDefinitions&gt; &lt;Grid HorizontalAlignment="Stretch" Name="MenuGrid" VerticalAlignment="Stretch" Background="#FFCECEFF"&gt; &lt;StackPanel Name="stackPanel1" Background="#FFEDFF00" Orientation="Horizontal"&gt; &lt;Button Content="User Data 1" Height="35" Name="button1" Command="{Binding Path=ShowUserControl1Command}" Width="150" Margin="100,0,0,0" /&gt; &lt;Button Content="User Data 2" Height="35" Name="button2" Width="150" Margin="100,0,0,0" /&gt; &lt;/StackPanel&gt; &lt;/Grid&gt; &lt;Grid Grid.Row="1" HorizontalAlignment="Stretch" Name="ContentGrid" VerticalAlignment="Stretch" Background="#FFB15454" /&gt; &lt;/Grid&gt; &lt;UserControl x:Class="SwapUserControls.MVVM.UserControl2" 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" xmlns:vm="clr-namespace:SwapUserControls.MVVM.ViewModel" mc:Ignorable="d" d:DesignHeight="300" d:DesignWidth="300" Visibility="{Binding IsUserControl1Collapsed, Path=Value}"&gt; &lt;UserControl.Resources&gt; &lt;vm:MainViewModel x:Key="MainViewModelID" /&gt; &lt;/UserControl.Resources&gt; &lt;UserControl.DataContext&gt; &lt;Binding Source="{StaticResource MainViewModelID}" /&gt; &lt;/UserControl.DataContext&gt; &lt;Grid&gt; &lt;Grid.RowDefinitions&gt; &lt;RowDefinition Height="228*" /&gt; &lt;RowDefinition Height="72*" /&gt; &lt;/Grid.RowDefinitions&gt; &lt;Button Content="UserControl2" Grid.Row="1" Height="23" HorizontalAlignment="Left" Margin="112,27,0,0" Name="button1" VerticalAlignment="Top" Width="75" /&gt; &lt;DataGrid HorizontalAlignment="Stretch" Name="dataGrid1" VerticalAlignment="Stretch" Background="#FFC046F8" /&gt; &lt;/Grid&gt; </code></pre> <p></p> <pre><code>public class MainViewModel : ViewModelBase { RelayCommand _ShowUserControl1Command; private bool _IsUserControl1Collapsed; public RelayCommand ShowUserControl1Command { get { if (_ShowUserControl1Command == null) { _ShowUserControl1Command = new RelayCommand( () =&gt; ShowUserControl1() ); } return _ShowUserControl1Command; } } public void ShowUserControl1() { _IsUserControl1Collapsed = true; } public bool IsUserControl1Collapsed { get { return _IsUserControl1Collapsed; } } } </code></pre> <p>Yes the code is wrong, therefore I ask here :)</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload