xaml - diplay panel on button click with zero code behind using mvvm and wpf -

i new in mvvm , wpf...

question in summerized form- how control visibility of controls using wpf , mvvm. should 0 code behind.

actual scenario-i have multiple user control panels ...say ucpanel1, ucpanel2, ucpnale3... till 6 - importing these user controls in 1 single main user control... ucmain having stackpanel buttons @ top... menu. - requirement simple... on button1 click- should able see ucpanel1 , remaining panels hidden, button2 click- should able see ucpanel2 , remaining panels hidden... on - acheieved using code behind. requirement implement such way there should minimal code possible in code behind. how xaml , view model like?
can not access extended objects of ucpanel1 in viewmodel..

in mainpanel xaml...

<button      style="{staticresource stackpanelbuttonstyle}"      command="{binding openmessagecommand}" >     <!--click="btnmessege_onclick" >-->     <textblock          text="messaging"          style="{staticresource stackpanelbuttontextstyle}">     </textblock> </button> <button      style="{staticresource stackpanelbuttonstyle}"     command="{binding openproductscommand}">     <!--click="btnproducts_onclick">-->     <textblock          text="products"          style="{staticresource stackpanelbuttontextstyle}" ></textblock> </button>  <local:stackpanelmessaging      grid.row="2"      visibility="{binding panel1visiblity}"></local:stackpanelmessaging> <local:wrappanelproducts      grid.row="2"      visibility="{binding panel2visiblity}" ></local:wrappanelproducts> 

in main view model...

 private visibility _panel1visiblity= visibility.visible;         private visibility _panel2visiblity= visibility.hidden;     public visibility panel1visiblity         {             { return _panel1visiblity; }             set             {                 if (_panel1visiblity != value)                 {                     _panel1visiblity = value;                     onpropertychanged("panel1visiblity");                 }             }         }         public visibility panel2visiblity         {             { return _panel2visiblity; }             set             {                 if (_panel2visiblity != value)                 {                     _panel2visiblity = value;                     onpropertychanged("panel2visiblity");                 }             }         }   private void openstackmessagepanel()         {             panel1visiblity = visibility.visible;             panel2visiblity = visibility.hidden;         }          private bool canexecutemethod1()         {             return true;         }          private void openwrapproductspanel()         {             panel2visiblity = visibility.visible;             panel1visiblity = visibility.hidden;         }          private bool canexecutemethod2()         {             return true;         }   public icommand openmessagecommand         {                         {                 if (_openmessagecommand == null)                 {                     _openmessagecommand = new delegatecommand(openstackmessagepanel, canexecutemethod1, true);                 }                 return _openmessagecommand;             }         }           public icommand openproductscommand         {                         {                 if (_openproductscommand == null)                 {                     _openproductscommand = new delegatecommand(openwrapproductspanel, canexecutemethod2, true);                 }                 return _openproductscommand;             }         } 

also feeling writting code worth it? or should prefere go code behind 10 lines ....

by using commands , visibility can achieve want. here's simple example. didn't use user control doing example should idea. replace grid user control.

first thing create booleantovisibilityconverter class. converter convert boolean values visibility. don't want put visibility properties in our viewmodel because want separate ui logic. want in our viewmodel simple boolean value tell if panel visible or not.

      public class booleantovisibilityconverter : ivalueconverter       {         public object convert(object value, type targettype, object parameter, cultureinfo culture)         {           bool? boolvalue = value bool?;           return boolvalue.hasvalue && boolvalue.value ? visibility.visible : visibility.collapsed;         }          public object convertback(object value, type targettype, object parameter, cultureinfo culture)         {           visibility? visibilityvalue = value visibility?;           return visibilityvalue.hasvalue && visibilityvalue.value == visibility.visible;         }       }   in mainviewmodel class, have 6 boolean properties tell if panel visible or not. , have 6 command properties set boolean properties true.     public class mainviewmodel : bindablebase   {     private bool _ispanel1visible;      public bool ispanel1visible     {       { return _ispanel1visible; }       set { setproperty(ref _ispanel1visible, value); }     }      private bool _ispanel2visible;      public bool ispanel2visible     {       { return _ispanel2visible; }       set { setproperty(ref _ispanel2visible, value); }     }      private bool _ispanel3visible;      public bool ispanel3visible     {       { return _ispanel3visible; }       set { setproperty(ref _ispanel3visible, value); }     }      private bool _ispanel4visible;      public bool ispanel4visible     {       { return _ispanel4visible; }       set { setproperty(ref _ispanel4visible, value); }     }      private bool _ispanel5visible;      public bool ispanel5visible     {       { return _ispanel5visible; }       set { setproperty(ref _ispanel5visible, value); }     }      private bool _ispanel6visible;      public bool ispanel6visible     {       { return _ispanel6visible; }       set { setproperty(ref _ispanel6visible, value); }     }      public icommand showpanel1command { { return new delegatecommand(() => { hidepanels(); ispanel1visible = true; }); } }     public icommand showpanel2command { { return new delegatecommand(() => { hidepanels(); ispanel2visible = true; }); } }     public icommand showpanel3command { { return new delegatecommand(() => { hidepanels(); ispanel3visible = true; }); } }     public icommand showpanel4command { { return new delegatecommand(() => { hidepanels(); ispanel4visible = true; }); } }     public icommand showpanel5command { { return new delegatecommand(() => { hidepanels(); ispanel5visible = true; }); } }     public icommand showpanel6command { { return new delegatecommand(() => { hidepanels(); ispanel6visible = true; }); } }      private void hidepanels()     {       ispanel1visible = false;       ispanel2visible = false;       ispanel3visible = false;       ispanel4visible = false;       ispanel5visible = false;       ispanel6visible = false;     }   } 

now in xaml, need bind boolean properties panel's visibility , use booleantovisibilityconverter convert boolean value visibility. , need bind buttons command.

  <grid>     <grid.datacontext>       <local:mainviewmodel />     </grid.datacontext>     <grid.rowdefinitions>       <rowdefinition height="auto" />       <rowdefinition />     </grid.rowdefinitions>     <grid.resources>       <local:booleantovisibilityconverter x:key="booleantovisibilityconverter" />     </grid.resources>     <stackpanel orientation="horizontal">       <button content="show panel 1" command="{binding showpanel1command}" />       <button content="show panel 2" command="{binding showpanel2command}" />       <button content="show panel 3" command="{binding showpanel3command}" />       <button content="show panel 4" command="{binding showpanel4command}" />       <button content="show panel 5" command="{binding showpanel5command}" />       <button content="show panel 6" command="{binding showpanel6command}" />     </stackpanel>     <stackpanel grid.row="1">       <grid visibility="{binding ispanel1visible, updatesourcetrigger propertychanged, converter={staticresource booleantovisibilityconverter}}">         <textblock text="panel 1" />       </grid>       <grid visibility="{binding ispanel2visible, updatesourcetrigger propertychanged, converter={staticresource booleantovisibilityconverter}}">         <textblock text="panel 2" />       </grid>       <grid visibility="{binding ispanel3visible, updatesourcetrigger propertychanged, converter={staticresource booleantovisibilityconverter}}">         <textblock text="panel 3" />       </grid>       <grid visibility="{binding ispanel4visible, updatesourcetrigger propertychanged, converter={staticresource booleantovisibilityconverter}}">         <textblock text="panel 4" />       </grid>       <grid visibility="{binding ispanel5visible, updatesourcetrigger propertychanged, converter={staticresource booleantovisibilityconverter}}">         <textblock text="panel 5" />       </grid>       <grid visibility="{binding ispanel6visible, updatesourcetrigger propertychanged, converter={staticresource booleantovisibilityconverter}}">         <textblock text="panel 6" />       </grid>     </stackpanel>   </grid> 

updated: hides panel before showing one.

you can try put breakpoint here testing: