Can you create ItemTemplate for Stack Panels with bindings? - wpf

Question

I have a stack panel of stack panels with similar controls. Could a template be used instead? Each field is a property of an Custom Object.
<StackPanel Margin="10,0,0,0">
<StackPanel x:Name="ReferenceStackPanel" Margin="5" Visibility="{Binding}">
<Label Content="Reference" Style="{StaticResource LabelStyle}"/>
<Controls:MarkingsTextbox Value="{Binding Path=UReference, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged, NotifyOnSourceUpdated=True}"/>
</StackPanel>
<StackPanel x:Name="TitleStackPanel" Margin="5" Visibility="{Binding}">
<Label Content="Title" Style="{StaticResource LabelStyle}"/>
<Controls:MarkingsTextbox Value="{Binding Path=Title, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged, NotifyOnSourceUpdated=True}"/>
</StackPanel>
<StackPanel x:Name="SponsorStackPanel" Margin="5" Visibility="{Binding}">
<Label Content="Sponsor" Style="{StaticResource LabelStyle}"/>
<Controls:MarkingsTextbox Value="{Binding Path=Sponsor, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged, NotifyOnSourceUpdated=True}"/>
</StackPanel>
<StackPanel x:Name="AlignmentStackPanel" Margin="5" Visibility="{Binding}">
<Label Content="Alignment" Style="{StaticResource LabelStyle}"/>
<Controls:MarkingsTextbox Value="{Binding Path=Alignment, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged, NotifyOnSourceUpdated=True}"/>
</StackPanel>
<StackPanel x:Name="NTAStackPanel" Margin="5" Visibility="{Binding}">
<Label Content="NTA" Style="{StaticResource LabelStyle}"/>
<Controls:MarkingsTextbox Value="{Binding Path=NTA, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged, NotifyOnSourceUpdated=True}"/>
</StackPanel>
<StackPanel x:Name="KeywordsStackPanel" Margin="5" Visibility="{Binding}">
<Label Content="Keywords" Style="{StaticResource LabelStyle}"/>
<Controls:MarkingsTextbox Value="{Binding Path=Keywords, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged, NotifyOnSourceUpdated=True}"/>
</StackPanel>
<StackPanel x:Name="FocusAreasStackPanel" Margin="5" Visibility="{Binding}">
<Label Content="FocusAreas" Style="{StaticResource LabelStyle}"/>
<Controls:MarkingsTextbox Value="{Binding Path=FocusAreas, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged, NotifyOnSourceUpdated=True}"/>
</StackPanel>
<StackPanel x:Name="PlatformStackPanel" Margin="5" Visibility="{Binding}">
<Label Content="Platform" Style="{StaticResource LabelStyle}"/>
<Controls:MarkingsTextbox Value="{Binding Path=Platform, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged, NotifyOnSourceUpdated=True}"/>
</StackPanel>
<StackPanel x:Name="FiscalYearStackPanel" Margin="5" Visibility="{Binding}">
<Label Content="FiscalYear" Style="{StaticResource LabelStyle}"/>
<Controls:MarkingsTextbox Value="{Binding Path=FiscalYear, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged, NotifyOnSourceUpdated=True}"/>
</StackPanel>
<StackPanel x:Name="OriginatingDocumentStackPanel" Margin="5" Visibility="{Binding}">
<Label Content="OriginatingDocument" Style="{StaticResource LabelStyle}"/>
<Controls:MarkingsTextbox Value="{Binding Path=OriginatingDocument, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged, NotifyOnSourceUpdated=True}"/>
</StackPanel>
<StackPanel x:Name="RecommendationsStackPanel" Margin="5" Visibility="{Binding}">
<Label Content="Recommendations" Style="{StaticResource LabelStyle}"/>
<Controls:MarkingsTextbox Value="{Binding Path=Recommendations, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged, NotifyOnSourceUpdated=True}"/>
</StackPanel>
</StackPanel>
I was thinking something like this but it didn't work.
<DataTemplate x:Key="Template">
<StackPanel>
<Label Content="{Binding}" />
<TextBox Text="{Binding}"/>
</StackPanel>
</DataTemplate>
I am also reading something about ContentControl but not sure how they work. It is one object I am trying to display, in an edit properties view.

Answer 1

The simplest solution to this would be if it's ok to have your label and textbox side by side.
Then you could use a propertygrid:
https://github.com/xceedsoftware/wpftoolkit/wiki/PropertyGrid
The toolkit is not free for commercial use, however, the source is available and you could take that and customise/simplify it for your usage.
If that does not suit then you could use reflection to build out a collection of property viewmodels which have PropertyName and PropertyValue.
Add them to a List you bind to itemssource of an itemscontrol.
You can then template each to whatever you like.
I'm not clear what that Visibility binding is all about, can't work out what the intent is there.
You could, however, use an attribute to control which properties are displayed.
The following proof of concept iterates properties to build out a list. It is very quick and dirty and intended just to get you started rather than a cut and paste solution.
MainWindow
<Window.DataContext>
<local:MainWindowViewModel/>
</Window.DataContext>
<Grid>
<ItemsControl ItemsSource="{Binding PropertyValues}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<StackPanel>
<TextBlock Text="{Binding Name}"/>
<TextBox Text="{Binding Value}"/>
</StackPanel>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</Grid>
</Window>
MainWindowViewModels and some classes.
public partial class MainWindowViewModel : ObservableValidator
{
[ObservableProperty]
private List<PropertyNameValue> propertyValues = new();
private PropertyInfo[] propertyList = typeof(Thingummy).GetProperties();
private Thingummy thing = new Thingummy { Reference="AAAAA", Sponsor="BBBB", Title="CCCC"};
private void GetProperties()
{
foreach (PropertyInfo property in propertyList)
{
PropertyNameValue pnv = new PropertyNameValue{ Name= property.Name, Value=property.GetValue(thing).ToString() };
PropertyValues.Add(pnv);
}
}
private void SetProperties()
{
for (int i = 0; i < propertyList.Length; i++)
{
propertyList[i].SetValue(thing, PropertyValues[i].Value);
}
}
public MainWindowViewModel()
{
GetProperties();
}
}
public class Thingummy
{
public string Reference { get; set; }
public string Title { get; set; }
public string Sponsor { get; set; }
}
public class PropertyNameValue
{
public string Name { get; set; }
public string Value { get; set; }
}
I don't know what type your class is you're editing. I've called mine Thingummy and of course it only has the first few properties.
There's no save button but that'd call SetProperties.
You could potentially make this generic and pass in a type to a generic viewmodel if you put your mind to it.
Make the itemssource a list and define different viewmodels for string, double etc. Define a template for each type. Perhaps put any get/ set logic in there as well.
Anyhow, this spins up and I can edit ok.