I would like to implement render dynamic UI in WPF by using data template.
This image below shown the UI I would like to achieve:
What I was achieve:
Window XAML
<Window x:Class="TestDataTemplateWithGrid.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:vm="clr-namespace:TestDataTemplateWithGrid"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525"><Window.Resources><DataTemplate x:Key="ModelTemplate" DataType="{x:Type vm:DataModel}"><StackPanel Orientation="Horizontal" Width="300"><TextBlock Width="100" Text="{Binding ModelLabel}" HorizontalAlignment="Left" VerticalAlignment="Center" /><TextBox Width="115" Height="25" Text="{Binding ModelValue}" /></StackPanel></DataTemplate><ItemsPanelTemplate x:Key="FormatTemplate"><WrapPanel Orientation="Horizontal"/></ItemsPanelTemplate></Window.Resources><StackPanel><ItemsControl ItemsSource="{Binding MainWindowCollection}" Width="600" ItemTemplate="{StaticResource ModelTemplate}" ItemsPanel="{StaticResource FormatTemplate}" /></StackPanel></Window>Window C#
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
this.DataContext = new MainWindowViewModel();
}
}Main Window View Model C#
public class MainWindowViewModel : INotifyPropertyChanged
{
private DataModel _dataModel = new DataModel();
public DataModel _DataModel
{
get { return _dataModel; }
set { _dataModel = value; }
}
private ObservableCollection<DataModel> mainWindowCollection = new ObservableCollection<DataModel>();
public ObservableCollection<DataModel> MainWindowCollection
{
get { return mainWindowCollection; }
set { mainWindowCollection = value; }
}
private ICommand _sbumitCommand;
public ICommand _SubmitCommand
{
get { return _sbumitCommand; }
set { _sbumitCommand = value; }
}
public MainWindowViewModel()
{
mainWindowCollection.Add(new DataModel() { ModelLabel = "A", ModelValue = "1" });
mainWindowCollection.Add(new DataModel() { ModelLabel = "B", ModelValue = "2" });
mainWindowCollection.Add(new DataModel() { ModelLabel = "C", ModelValue = "1" });
mainWindowCollection.Add(new DataModel() { ModelLabel = "D", ModelValue = "1" });
mainWindowCollection.Add(new DataModel() { ModelLabel = "E", ModelValue = "2" });
mainWindowCollection.Add(new DataModel() { ModelLabel = "F", ModelValue = "1" });
mainWindowCollection.Add(new DataModel() { ModelLabel = "G", ModelValue = "2" });
mainWindowCollection.Add(new DataModel() { ModelLabel = "H", ModelValue = "2" });
mainWindowCollection.Add(new DataModel() { ModelLabel = "I", ModelValue = "1" });
mainWindowCollection.Add(new DataModel() { ModelLabel = "J", ModelValue = "2" });
_sbumitCommand = new RelayCommand(ExecuteSubmitCommand);
}
public void ExecuteSubmitCommand(object param)
{
MessageBox.Show("Submit Message !");
}
public event PropertyChangedEventHandler PropertyChanged;
protected void OnPropertyChanged(string name)
{
PropertyChangedEventHandler handler = PropertyChanged;
if (handler != null)
{
handler(this, new PropertyChangedEventArgs(name));
}
}
}
Data Model C#public class DataModel
{
private string modelValue;
public string ModelValue
{
get { return modelValue; }
set { modelValue = value; }
}
private string modelLabel;
public string ModelLabel
{
get { return modelLabel; }
set { modelLabel = value; }
}
}