c# - WPFシンプルなテーブルレイアウト

Question

作業中のWPFプロジェクトの単純なレイアウトを作成したいと考えています。

DatagridとGridViewのスタイルを試してみましたが、どれも希望どおりに機能しません。さらに、アイテムを編集/選択したり、列を並べ替えたりする必要はありません。基本的には、ベルやホイッスルのないシンプルでダイナミックなテーブルレイアウトが必要です。

これを再現する方法についてのアドバイスをいただければ幸いです。

更新：ObservableCollectionに基づいて動的な行数が必要です

Answer 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; }
    }

Answer 2

これは似たようなものです。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>

Answer 3

これには Grid レイアウトを使用できます。

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