WPF 简单的表格布局
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12493784/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
WPF Simple table layout
提问by John Polling
I'm looking to create a simple layout for a WPF project I'm working on. 
我正在寻找为我正在处理的 WPF 项目创建一个简单的布局。
I tried styling Datagrid and GridView's but none of them work as I want, plus I don't want items to be editable / selectable, or columns to be sorted or anything like that. Basically I just want a simple dynamic table layout with no bells and whistles.
我尝试对 Datagrid 和 GridView 进行样式设置，但它们都没有按我的意愿工作，而且我不希望项目可编辑/可选择，或对列进行排序或类似的东西。基本上我只想要一个简单的动态表格布局，没有花里胡哨的东西。
Any advice on how to recreate this would be greatly appreciated.
任何关于如何重新创建它的建议将不胜感激。
Update: I need the number of rows to be dynamic based on an ObservableCollection
更新：我需要基于 ObservableCollection 的动态行数
回答by syned
Use HeaderedItemsControl, XAML
使用 HeaderedItemsControl、XAML
<!-- templates -->
<DataTemplate x:Key="itemWithDeleteButton">
<Grid Width="Auto">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="100"/>
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0" Text="{Binding Path=DocumentName, Mode=OneWay}" />
<Button Grid.Column="1" Command="{Binding DeleteCommand}"/>
</Grid>
</DataTemplate>
<Style TargetType="{x:Type HeaderedItemsControl}" x:Key="DeletedGrid">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type HeaderedItemsControl}">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="100"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="20"/>
<RowDefinition Height="4*"/>
</Grid.RowDefinitions>
<TextBlock Grid.Column="0" Grid.Row="0" Text="Document Name"
VerticalAlignment="Center"
FontWeight="Bold"/>
<TextBlock Grid.Column="1" Grid.Row="0" Text="Actions"
VerticalAlignment="Center"
FontWeight="Bold"/>
<Grid Grid.Row="1" Grid.ColumnSpan="2" Width="Auto" Height="Auto" Background="White">
<ItemsPresenter/>
</Grid>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
<!-- control -->
<HeaderedItemsControl Style="{StaticResource DeletedGrid}" Margin="0,0,0,10"
Grid.Row="4" Grid.ColumnSpan="2" ItemTemplate="{StaticResource itemWithDeleteButton}"
ItemsSource="{Binding GridData}">
ViewModel
视图模型
public class GridItem
{
public string DocumentName { get; set; }
public ICommand DeleteCommand { get; set; }
}
public class MyViewModel
{
public ObservableCollection<GridItem> GridData { get; set; }
}
回答by paparazzo
This is just something similar. For the second column you would probably use a button for Delete of maybe just click event on a TextBlock. To get that exact formatting is going to take some tweaking.
这只是类似的事情。对于第二列，您可能会使用删除按钮，或者只是在 TextBlock 上单击事件。要获得准确的格式需要进行一些调整。
<ListView.View>
<GridView AllowsColumnReorder="False" x:Name="gvCurDocFields">
<GridViewColumn Width="120">
<GridViewColumnHeader Content="Field" />
<GridViewColumn.CellTemplate>
<DataTemplate>
<TextBlock TextWrapping="NoWrap" TextTrimming="CharacterEllipsis" Text="{Binding Path=FieldDefApplied.FieldDef.DispName, Mode=OneWay}" />
</DataTemplate>
</GridViewColumn.CellTemplate>
</GridViewColumn>
<GridViewColumn>
<GridViewColumnHeader Content="Value" />
<GridViewColumn.CellTemplate>
<DataTemplate>
<TextBlock TextAlignment="Left" Margin="0" TextWrapping="NoWrap" TextTrimming="CharacterEllipsis" Text="{Binding Path=DispValue, Mode=OneWay}" />
</DataTemplate>
</GridViewColumn.CellTemplate>
</GridViewColumn>
</GridView>
</ListView.View>
回答by MattDavey
You can use the Grid layout for this:
您可以为此使用网格布局：
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="32" /> <!-- Header row -->
<RowDefinition Height="Auto" /> <!-- One for each row of data -->
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" /> <!-- Document Name column -->
<ColumnDefinition Width="200" /> <!-- Actions column -->
</Grid.ColumnDefinitions>
</Grid>
