WPF 简单表格布局答案

【问题标题】：WPF Simple table layoutWPF 简单表格布局
【发布时间】：2012-09-19 11:27:02
【问题描述】：

我正在为我正在处理的 WPF 项目创建一个简单的布局。

我尝试设置 Datagrid 和 GridView 的样式，但它们都不能按我的意愿工作，而且我不希望项目是可编辑/可选择的，也不希望列被排序或类似的东西。基本上我只想要一个没有花里胡哨的简单动态表格布局。

任何关于如何重新创建它的建议将不胜感激。

更新：我需要基于 ObservableCollection 的动态行数

【问题讨论】：

Blend 可以帮助你。制作一个包含两行和两列的网格，并相应地为文档名称和操作放置两个堆栈面板。
将 ListView 添加到 GridView 以进行列格式化

标签： c# .net wpf caliburn.micro

【解决方案1】：

使用 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}">

视图模型

    public class GridItem
    {
      public string DocumentName { get; set; }
      public ICommand DeleteCommand { get; set; }
    }

    public class MyViewModel
    {
      public ObservableCollection<GridItem> GridData { get; set; }
    }

【讨论】：

【解决方案2】：

这只是类似的东西。对于第二列，您可能会使用一个用于删除的按钮，或者可能只是 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>

【讨论】：

【解决方案3】：

您可以为此使用网格布局：

<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>

【讨论】：

您可以在网格中放置一个例如Listbox并绑定它。 Grid 仅适用于 Look 部分