WPF 간단한 테이블 레이아웃

Question

내가 작업하고있는 WPF 프로젝트의 간단한 레이아웃을 만들려고합니다.

Datagrid 및 GridView의 스타일링을 시도했지만 원하는대로 작동하지 않으며 항목을 편집/선택 가능하게하거나 열을 정렬하지 않도록하고 있습니다. 기본적으로 나는 방금 종소리와 호각이없는 간단한 동적 테이블 레이아웃을 원합니다.

이 방법을 재구성하는 방법에 대한 조언은 크게 감사하겠습니다.

업데이트 : 나는 ObservableCollection에 기반으로 동적으로 행의 수를 필요

Answer 1

이의 그리드 레이아웃을 사용할 수 있습니다

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

Answer 2

사용 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; } 
    } 

Answer 3

이것은 비슷합니다. 두 번째 열의 경우 아마 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>