WPF & MVVM Light - Dynamically display UserControls within a UserControl

Question

I am working with WPF and the MVVM Light framework. In my project I have a GameViewModel and an associated view for it that acts as the main screen of my game (this is not my main ViewModel). Within the GameView, I would like to dynamically display other UserControls, triggered by button clicks or something of that nature, at a certain location within the grid. I'm not entirely sure how to go about this. I thought about using a secondary ViewModelLocator or something similar (which I wouldn't be sure how to go about doing at all), but before I dove into that I thought I'd ask here and see if there are any more practical ways to do this.

Say a button is clicked, UserControl1 is displayed at 3, 3 on the grid, then another button is clicked and UserControl2 is displayed at the same location. This is essentially what I'm trying to accomplish. While it is not imperative, I would like to use as much XAML and as little code-behind as possible, but anything that gets the job done in an MVVM-friendly manner will work perfectly fine for me. Any advice that you could give would be greatly appreciated. I'm guessing the solution is probably a lot easier than I'm making it out to be... it usually is.

Ted A. · Accepted Answer · 2013-06-19 19:11:47Z

2

One idea that I used on a recent project is to bind the Visibility property of the element to a Visibility property in the ViewModel. Then you can handle all of the displaying logic in the ViewModel.

Visibility="{Binding ElementVisibility}"

Then in the ViewModel you would have a property like

public const string ElementVisibilityPropertyname = "ElementVisibility";
private Visibility _elementVisibility = Visibility.Collapsed;
public Visibility ElementVisibility
{
    get
    {
        return _elementVisibility;
    }
    set
    {
        if (_elementVisibility== value)
        {
            return;
        }

        RaisePropertyChanging(ElementVisibilityPropertyname );
        _elementVisibility= value;
        RaisePropertyChanged(ElementVisibilityPropertyname );
    }
}

In your Button you would bind the Command property like so:

Command="{Binding ShowElement}"

And then in the ViewModel you would provide a RelayCommand

private RelayCommand _showElement;
public RelayCommand ShowElement
{
    get
    {
        return _showElement?? (_showElement= new RelayCommand(() =>
                             {
                                 this.ElementVisibility = Visibility.Visible;
                             ));
    }
}

Hopefully this gets you in the direction you are looking for!

edited Jun 19, 2013 at 19:11

answered Jun 11, 2013 at 23:14

Ted A.

2,30217 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Jason D Over a year ago

Thanks for the answer. I think it's very close to working. However, this line RaisePropertyChanged(() => ElementVisibilityPropertyName); throws an Invalid Argument exception.

Jason D Over a year ago

If I type it this way: RaisePropertyChanged("ElementVisibilityPropertyname"); there are no errors but nothing happens.

Ted A. Over a year ago

That's not supposed to be a lambda delegate, it's just the string name referenced above. RaisePropertyChanged(ElementVisibilityPropertyname);

Ted A. Over a year ago

It's sort of painful at times how loosely coupled the View and ViewModel really is. You bind the property to the string value "ElementVisibility". It will go to the DataContext and find a property with the name matching that string. When you call RaisePropertyChanged(string s) you are telling every element bound to that same string name that it should recheck for the current value of that property... if that makes sense?

Jason D Over a year ago

Yup, that works. I misread what you posted. This line also will make it work, I found: RaisePropertyChanged(() => ElementVisibility);. Either way, the problem appears to be solved. I'm very grateful for your help. This was indeed a lot easier than I was making it out to be.

|

PGallagher · Accepted Answer · 2013-06-11 23:37:11Z

I made a blog post about something quite similair here;

http://pjgcreations.blogspot.co.uk/2013/03/wpf-programmatically-adding-buttons.html

The following uses a Canvas, an ItemPresenter and a DataTemplate to show buttons populated from the ViewModel at runtime.

XAML:

<Window x:Class="MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="MainWindow" Height="350" Width="525">
    <Canvas x:Name="MyCanvas">
        <ItemsControl ItemsSource="{Binding MyButtons}" Height="237" Width="507">
            <ItemsControl.ItemsPanel >
                <ItemsPanelTemplate>
                    <Canvas IsItemsHost="true"></Canvas>
                </ItemsPanelTemplate>
            </ItemsControl.ItemsPanel>
            <ItemsControl.ItemTemplate>
                <DataTemplate>
                    <Button Margin="{Binding ControlMargin}" Content="{Binding Content}" Command="{Binding DataContext.ButtonCommand, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Window}}}" CommandParameter="{Binding ProductId}"></Button>
                </DataTemplate>
            </ItemsControl.ItemTemplate>
        </ItemsControl>
    </Canvas>
</Window>

A Fluid Button Class;

Public Class FluidButton

    Public Property Content As String
    Public Property LeftPos As Double
    Public Property TopPos As Double
    Public Property ProductId As Double

    'Returns the Control Margin, using the Class Properties
    Public ReadOnly Property ControlMargin As Thickness
        Get
            Return New Thickness With {.Left = LeftPos, .Top = TopPos}
        End Get
    End Property

End Class

Properties in Your ViewModel;

'Our Collection of Buttons or Products
Public Property MyButtons As ObservableCollection(Of FluidButton)

'Used to expose the Button Pressed Execute Commands to the UI for Binding
Public Property ButtonCommand As DelegateCommand

To Add some Buttons;

MyButtons = New ObservableCollection(Of FluidButton)

MyButtons.Add(New FluidButton With {.Content = "Test1", .LeftPos = 0, .TopPos = 20, .ProductId = 1})
MyButtons.Add(New FluidButton With {.Content = "Test2", .LeftPos = 40, .TopPos = 30, .ProductId = 2})
MyButtons.Add(New FluidButton With {.Content = "Test3", .LeftPos = 80, .TopPos = 40, .ProductId = 3})
MyButtons.Add(New FluidButton With {.Content = "Test4", .LeftPos = 120, .TopPos = 50, .ProductId = 4})
MyButtons.Add(New FluidButton With {.Content = "Test5", .LeftPos = 160, .TopPos = 60, .ProductId = 5})

I'm sure you could easily modify this to suit your needs

Collectives™ on Stack Overflow

WPF & MVVM Light - Dynamically display UserControls within a UserControl

2 Answers 2

7 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related