c# - Where to put code to create lots of buttons in the view? -

i learning mvvm. until have window (without mvvm) in call in code behind constructor method createletterbuttons() creates buttons each letter in alphabet in stackpanel. because it’s easier creating these buttons in xaml – if want change these buttons.

public selectionwindow() {     initializecomponent();     createletterbuttons();     }  private void createletterbuttons() {     (int = 65; <= 90; i++)  // - z         { addletterbutton(i); }     }  private void addletterbutton(int i) {     button button = new button();     button.content = (char)i;     button.minwidth = 20;     button.previewmousedown += letterbuttonmousedown;     letterstackpanelauto.children.add(button);     } 

the buttons used in window input text (just few letters) instead of keyboard.

now question: should keep code in code behind window? guess correct according mvvm because these buttons part of view , used input text view. have no connection underlying data (model) guess code should not in view model, correct?

then there 1 more little issue: method createletterbuttons() runs when application runs , window loaded don’t see these buttons in design view. if call method createletterbuttons() in constructor of viewmodel letters created when viewmodel constructor executed happens in design mode.

i idea of mvvm wonder if should treat law or more suggestion may ignore time time. work alone , don’t have consider make sense in team.

do not create ui elements in code behind.

in real mvvm approach, use itemscontrol display collection of buttons. itemssource property of itemscontrol bound collection of characters in view model class. in itemtemplate, content property of button bound individual character.

<itemscontrol itemssource="{binding letters}">     <itemscontrol.datacontext>         <local:lettersviewmodel/>     </itemscontrol.datacontext>     <itemscontrol.itemspanel>         <itemspaneltemplate>             <stackpanel orientation="horizontal"/>         </itemspaneltemplate>     </itemscontrol.itemspanel>     <itemscontrol.itemtemplate>         <datatemplate>             <button content="{binding}" minwidth="20" click="letterbuttonclick"/>         </datatemplate>     </itemscontrol.itemtemplate> </itemscontrol> 

the code behind initialize view model , provide button click handler:

public partial class mainwindow : window {     public mainwindow()     {         initializecomponent();     }      private void letterbuttonclick(object sender, routedeventargs e)     {         var button = (button)sender;         trace.writeline("clicked " + button.content);     } }  public class lettersviewmodel {     public lettersviewmodel()     {         letters = enumerable.range('a', 'z' - 'a' + 1).select(l => (char)l);     }      public ienumerable<char> letters { get; private set; } } 

---

a simpler approach without explicit vm class following. works because string ienumerable<char>.

<itemscontrol itemssource="abcdefghijklmnopqrstuvwxyz">     <itemscontrol.itemspanel>         <itemspaneltemplate>             <stackpanel orientation="horizontal"/>         </itemspaneltemplate>     </itemscontrol.itemspanel>     <itemscontrol.itemtemplate>         <datatemplate>             <button minwidth="20" content="{binding}" click="letterbuttonclick"/>         </datatemplate>     </itemscontrol.itemtemplate> </itemscontrol>