c# - Having a usercontrol that change to be edited? -

i've written several application in wpf, i'm not sure how should one:

i'm trying make "universal app", designed toward small screen on raspberry pi win10 iot.

i create usercontrol, displays value, , when clicked expands take full screen, allowing me edit nicely additional buttons (which show in expanded version of usercontrol)(e.g, numerical stepped up/down, + ok/cancel buttons). , when click on ok button in expanded usercontrol, should copy editedvalue realvalue (vars).

i'm little stuck on how part different display (different layouts, different components, taking place of windows) , help.

@jordy van eijk provided viable solution since asked example provide own implementation. please note there plenty of variations , other ways may this, , question seems quite broad fill in initial design.

my approach uses mvvm design pattern: content presenter bind view model , show current data template. data template relate view model user control. user control contains view, bindings resize selected item, , triggers show/hide extended display.

the content presenter (mainwindow.xaml):

<contentpresenter content="{binding currentview}"/> 

the data template (mainwindow.xaml):

<window.resources>     <datatemplate datatype="{x:type viewmodel:usercontrol1viewmodel}" >         <view:usercontrol1/>     </datatemplate> </window.resources> 

the user control (usercontrol1.xaml):

<usercontrol.resources>     <style x:key="extendedcontrol" targettype="button">         <setter property="visibility" value="collapsed"/>         <style.triggers>             <datatrigger binding="{binding isvisible}" value="true">                 <setter property="visibility" value="visible"/>             </datatrigger>         </style.triggers>     </style> </usercontrol.resources>  <grid horizontalalignment="left" background="blue" width="525">     <button content="resize control" verticalalignment="top" horizontalalignment="left" width="{binding width}" height="265" command="{binding resizecommand}" margin="10,30,0,0"/>     <button content="extended control" style="{staticresource extendedcontrol}" margin="383,32,25,258"/> </grid> 

the user control 1 view model (usercontrol1viewmodel.cs):

    public class usercontrol1viewmodel : viewmodelbase {     public icommand resizecommand     {                 {             if (_resizecommand == null) _resizecommand = new relaycommand(resizebutton, () => true);             return _resizecommand;         }     }      public bool isvisible     {         { return _isvisible; }         set         {             _isvisible = value;             raisepropertychanged("isvisible");         }     }      public double width     {         { return _width; }         set         {             _width = value;             raisepropertychanged("width");         }     }      private relaycommand _resizecommand;      private bool _isvisible;      private double _width;      public usercontrol1viewmodel()     {         width = 100.0;         isvisible = false;     }      private void resizebutton()     {         width = application.current.mainwindow.actualwidth * .65;         isvisible = true;     } } 

before click:

after click:

this outlines main pieces need create base application specifying. when resize control pressed, width binding changed expand size 65% of application main window , visibility binding of extended control button changed true. id include pictures of resize reputation doesn't allow yet. hope mvvm future architectural pattern others have suggested , if have further question beyond simple overview feel free contact me. luck!

edit: classes base view model, commands, , binding properties come mvvm light library. can import project visual studio using: tools -> nuget package manager -> manage nuget packages solution -> search "mvvm light"

edit 2

for example related comment. have parent grid containing editor view @ 70 percent of max window size , binding our extended control panel size:

view:

<grid>     <grid.columndefinitions>         <columndefinition width="7*"/>         <columndefinition width="{binding width}"/>     </grid.columndefinitions>      <contentpresenter content="{binding viewmanager.editorcontrolview}" grid.column="0"/>     <contentpresenter content="{binding viewmanager.extendedcontrolview}" grid.column="1"/> </grid> 

binding:

public string width {     { return _width; }      set     {         _width = value;         raisepropertychanged("width")     } }  //set our extended control other 30 percent of window size width = "3*"; 

to change width adhering mvvm standards, need use form of communication between our view models , luckily lesson can pick on here. because iv used mvvm light throughout example id recommend searching google "mvvm light messenger" provides solid way of doing communication. using can raise change width hide other window components in parent view anywhere in application. :d