How to create Dynamically generated views in WPF(MVVM)

Question

I have a list of Devices in the first type of the screen. When I select a Device it opens device screen in the second part of the screen. The problem is - I have almost equal structure for device's screen - Buttons with Commands and Labels with information. So if I have 1000 thousand devices, I have to create 1000 thousand views which are almost equal.

So I want to create a DeviceView where I would create buttons(Name and Command) and TextBox depending on a Device. So it would be perfect ho have only one view for all devices. But I don't know hot to implement it and now there are 3 views.

I already have ObservableCollection for all devices. Every device has an array of Commands and their names... The mainView looks like: And a view, for example for camera looks like

I'm doing it without any frameworks and on purpose to understand for myself.

take a look at [this question](https://stackoverflow.com/questions/3356719/bind-collection-to-stackpanel). you can just use items control instead of stack panel. ItemsControl.ItemTemplate will be yours device template. to get how to apply style to button and bind to properties of your ViewMoodel [see this post](https://stackoverflow.com/questions/17630968/wpf-c-sharp-button-style). after it just bind your observable collection to ItemsControl and that's it. — ba-a-aton, Aug 03 '21 at 11:35

score 1 · Accepted Answer · answered Aug 03 '21 at 12:56

if your structure for all devices is similar, move all needed to display information to your view model

public interface IDeviceVm
{
   string TurnOnCommandName {get;}
   ICommand TurnOnCmd {get;}
   .....
}  
public class CameraVm : IDeviceVm
{
   public string TurnOnCommandName => "включить камеру"
   ICommand TurnOnCmd {get;}
   ...
   public CameraVm()
   {
      TurnOnCmd = ... // assigning your command
   }
}

Than use all these names in your xaml. Somewhere in your DeviceView.xaml:

<StackPanel>
   <Button Content={Binding TurnOnCommandName} Command={Binding TurnOnCmd}/>
   ...
 </StackPanel>

This way you won't need content presenter, just use one DeviceView. It wouldn't matter which device you pass, as long they all follow IDeviceVm.

How to create Dynamically generated views in WPF(MVVM)

1 Answers1