I recently came across a requirement to Programmatically Add Buttons to a WPF View in my MVVM based app. Obviously this is not entirely trivial as each Button must contain the correct Bindings to interact with the underlying ViewModel.
The way I tackled this was to use an ItemsControl, with a Canvas Control in the ItemsPanelTemplate. I then added a DataTemplate to the ItemTemplate, with our Button Template in this.
This Button Template contained the relevant binding to hook up the Command Property to my ViewModel.
For ease of use, I then created a Class which housed the various Properties I wanted to expose to each Button, such as it’s Position, CommandParameter and Content, and allowed me to return a Tickness for the Button Position.
From here I created an ObservableCollection of my new Button Class, and bound this to the ItemsControl.
The code can be seen below;
XAML:
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">
"{Binding MyButtons}" Height="237" Width="507">
FluidButton 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:
'''
''' 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
'''
'''
'''
''' Newed up in the Form Load Event
Public Property ButtonCommand As DelegateCommand
Adding 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})
Leave A Comment
You must be logged in to post a comment.