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

Question

I am learning MVVM. Until now I have a window (without MVVM) in which I call in the code behind constructor the method CreateLetterButtons() which creates buttons for each letter in the alphabet in a StackPanel. I do this because it’s easier than creating all these buttons in XAML – especially if I want to change something about these buttons.

public SelectionWindow() {
    InitializeComponent();
    CreateLetterButtons();
    }

private void CreateLetterButtons() {
    for (int i = 65; i <= 90; i++)  // A - 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 are used in this window to input text (just a few letters) instead of a keyboard.

Now my question: Should I keep this code in the code behind the window? I guess this would be correct according to MVVM because these buttons are just part of the view and are used to input text into the view. They have no connection to any underlying data (model) so I guess this code should not be in the view model, correct?

Then there is one more little issue: Now my method CreateLetterButtons() runs only when my application runs and the window is loaded so I don’t see these buttons in design view. But if I would call the method CreateLetterButtons() in the constructor of the ViewModel then the letters would be created when the ViewModel constructor is executed which happens even in design mode.

I like the idea of MVVM but I wonder if I should treat it like a law or more like a suggestion which I may ignore from time to time. I work alone and I don’t have to consider what would make sense in a team.

Answer 1

Do not create UI elements in code behind.

In a real MVVM approach, you would use an ItemsControl to display a collection of Buttons. The ItemsSource property of the ItemsControl is then bound to a collection of characters in a view model class. In the ItemTemplate, the Content property of the Button is bound to the 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 would just initialize the view model and provide the 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 probably much simpler approach without an explicit VM class would be the following. It works because a string is also an 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>

Answer 2

Your correct in my opinion, that these are view specific and so out of the view model. A bindable collection of button data could facilitate it but it isn't necessary as you describe your app.

As for design time support, call your createletterbuttons method in your constructor in the code behind. That may not be preferred behaviour so you can limit this to only run when in design time. I usu mvvmlight library from nugget which has a static IsInDesignMode property you can IF against.

Hope that helps.