WPF: Dynamic Form aligned by a <Grid>
I'm building a GUI to edit various XML configuration files based on what values are allowed by their schema. I need a way to display a label for each field in a left column, while displaying a control to edit that field on the right column. If this list of fields weren't dynamic, I'd simply display them in a Grid with two columns. But that doesn't seem so easy with a dynamic list of fields.
The below example shows what I'd like to do, but because DataTemplate can only contain one child, this way won't work. Anyone know of a good workaround that would make this dynamic form layout correctly?
(To simplify the example, I'm using a Uniform grid. I'd probably prefer an approach that drops a Grid in the ControlTemplate (so you can define the columns/rows) - but, I figured this approach got the point across)
<ItemsControl x:Name="FieldItemsCtrl">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<UniformGrid Columns="2" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate DataType="{x:Type local:EditableField}">
<TextBlock Text="{Binding FieldName}" Foreground="{DynamicResource TextBrush}" />
<TextBox Text="{Binding FieldValue}" />
</DataTemplate>
</ItemsControl.开发者_运维问答ItemTemplate>
</ItemsControl>
Thanks!
You can replace what you need from panel with DataTemplate. Check this out:
<Page
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:System="clr-namespace:System;assembly=mscorlib" >
<Grid>
<ItemsControl>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<TextBlock Text="FieldName" Grid.Column="0" HorizontalAlignment="Right" VerticalAlignment="Center" Margin="0, 0, 14, 0" />
<TextBox Text="FieldValue" Grid.Column="1" />
</Grid>
</DataTemplate>
</ItemsControl.ItemTemplate>
<System:String>Hello</System:String>
<System:String>World</System:String>
</ItemsControl>
</Grid>
</Page>
精彩评论