DataGrid 행 컨텐츠 수직 정렬

DataGrid 행 컨텐츠 수직 정렬

WPF 4.0 RTM의 일반 DataGrid를 사용하여 데이터베이스에서 데이터를 저장합니다.깔끔하고 가벼운 스타일을 만들기 위해DataGrid기본적으로는 높은 행/높은 행을 사용합니다.DataGrid행 내용을 위쪽 수직 위치에 정렬하지만 중앙 수직 정렬을 설정합니다.

이 속성을 이미 사용하려고 했습니다.

VerticalAlignment="Center"

에DataGrid선택권은 있지만, 제게는 별 도움이 안 돼요

XAML 코드의 예를 다음에 나타냅니다.DataGrid중앙 수직 정렬 없음:

<DataGrid x:Name="ContentDataGrid"
          Style="{StaticResource ContentDataGrid}"
          ItemsSource="{Binding}"
          RowEditEnding="ContentDataGrid_RowEditEnding">
    <DataGrid.Columns>
        <DataGridTextColumn Header="UserID"
                            Width="100"
                            IsReadOnly="True"
                            Binding="{Binding Path=userID}" />
        <DataGridTextColumn Header="UserName"
                            Width="100"
                            Binding="{Binding Path=userName}" />
        <DataGridTextColumn Header="UserAccessLevel"
                            Width="100"
                            Binding="{Binding Path=userAccessLevel}" />
        <DataGridTextColumn Header="UserPassword"
                            Width="*"
                            Binding="{Binding Path=userPassword}" />
    </DataGrid.Columns>
</DataGrid>

이 코드를 실행한 결과:

보시는 바와 같이 모든 행의 콘텐츠는 맨 위에 수직 정렬되어 있습니다.

각 행 내용의 중앙 수직 정렬을 얻으려면 무엇을 추가해야 합니까?

MSDN에서 이 문제를 완벽하게 해결: DataGrid 행 컨텐츠의 수직 정렬.

간단히 말하면 스타일 파일 세트:

<!--body content datagrid cell vertical centering-->
<Style x:Key="Body_Content_DataGrid_Centering"
        TargetType="{x:Type DataGridCell}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type DataGridCell}">
                <Grid Background="{TemplateBinding Background}">
                    <ContentPresenter VerticalAlignment="Center" />
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

창 파일:

<DataGrid x:Name="ContentDataGrid"
          Style="{StaticResource ContentDataGrid}"
          CellStyle="{StaticResource Body_Content_DataGrid_Centering}"
          ItemsSource="{Binding}"
          RowEditEnding="ContentDataGrid_RowEditEnding">
    <DataGrid.Columns>
        <DataGridTextColumn Header="UserID"
                            Width="100"
                            IsReadOnly="True"
                            Binding="{Binding Path=userID}" />
        <DataGridTextColumn Header="UserName"
                            Width="100"
                            Binding="{Binding Path=userName}" />
        <DataGridTextColumn Header="UserAccessLevel"
                            Width="100"
                            Binding="{Binding Path=userAccessLevel}" />
        <DataGridTextColumn Header="UserPassword"
                            Width="*"
                            Binding="{Binding Path=userPassword}" />
    </DataGrid.Columns>
</DataGrid>

그러면 원하는 결과를 얻을 수 있습니다.

개별 텍스트 정렬을 설정하려면 다음을 사용할 수 있습니다.

<DataGridTextColumn.ElementStyle>
   <Style TargetType="TextBlock">
       <Setter Property="TextAlignment" Value="Center" />
   </Style>
</DataGridTextColumn.ElementStyle>

다음 코드는 DataGridTextColumn 셀의 내용을 수직으로 정렬합니다.

<DataGridTextColumn.ElementStyle>
    <Style TargetType="TextBlock">
        <Setter Property="VerticalAlignment" Value="Center"></Setter>
    </Style>
</DataGridTextColumn.ElementStyle>

편집: 이 문제를 다시 살펴보니 아래 솔루션이 더 잘 작동한다는 것을 알 수 있었습니다. DataGridTextRows의 모든 셀의 콘텐츠를 수평 및 수직 방향으로 집중시킵니다.

<UserControl.Resources>    
    <ResourceDictionary>
        <Style TargetType="DataGridCell">
            <Setter Property="HorizontalAlignment" Value="Stretch"></Setter>
            <Setter Property="VerticalAlignment" Value="Stretch"></Setter>
            <Setter Property="VerticalContentAlignment" Value="Stretch"></Setter>
            <Setter Property="TextBlock.TextAlignment" Value="Center"></Setter>
            <Setter Property="TextBlock.VerticalAlignment" Value="Center"></Setter>
        </Style>    
    </ResourceDictionary>
</UserControl.Resources>

이거면 돼

 <DataGrid.CellStyle>
   <Style TargetType="DataGridCell">              
     <Setter Property="TextBlock.TextAlignment" Value="Center"/>
     <Setter Property="Template">
       <Setter.Value>
         <ControlTemplate TargetType="{x:Type DataGridCell}">
           <Grid Background="{TemplateBinding Background}">
             <ContentPresenter VerticalAlignment="Center"/>
           </Grid>
         </ControlTemplate>
       </Setter.Value>
     </Setter>
   </Style>
</DataGrid.CellStyle>

ControlTemplate를 덮어쓰지 않고 다음 작업을 수행할 수도 있습니다.

    <Style TargetType="{x:Type DataGridCell}">
    <Setter Property="VerticalAlignment" Value="Center" />
    </Style>

속성값VerticalAlignment="Center"는 상위 요소 내에서 DataGrid를 중앙에 배치합니다.

Vertical Content Alignment가 필요할 수 있습니다.

나처럼 누군가 그걸 필요로 한다면..

하나의 열에만 영향을 미치려면 'ElementStyle' 속성을 사용할 수 있습니다.

<DataGrid ItemsSource="{Binding}">
    <DataGrid.Resources>
        <Style x:Key="DataGridVerticalText" TargetType="TextBlock">
            <Setter Property="VerticalAlignment" Value="Center" />
        </Style>
    </DataGrid.Resources>
    <DataGrid.Columns>
        <DataGridTextColumn Header="Header Title" Binding="{Binding}" ElementStyle="{StaticResource DataGridVerticalText}" />
    </DataGrid.Columns>
</DataGrid>

Jamier의 답변을 바탕으로 자동 생성된 열을 사용할 때 다음 코드가 도움이 되었습니다.

Style VerticalCenterStyle = new Style();

public MainWindow()
{
  // This call is required by the designer.
  InitializeComponent();

  VerticalCenterStyle.Setters.Add(new Setter(VerticalAlignmentProperty, VerticalAlignment.Center));
}

private void DataGrid_AutoGeneratingColumn(object sender, DataGridAutoGeneratingColumnEventArgs e)
{   
  if (e.Column is DataGridTextColumn) {
    ((DataGridTextColumn)e.Column).ElementStyle = VerticalCenterStyle;
  }
}

이것은 나의 간단한 해결책으로 완벽하게 동작한다.

<DataGridTemplateColumn Header="Hello" Width="200">
    <DataGridTemplateColumn.CellTemplate>
        <DataTemplate>
            <TextBlock Text="World!" TextAlignment="Center" VerticalAlignment="Center"/>
        </DataTemplate>
    </DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>

차이를 알 수 있도록 폭을 200으로 설정했습니다.

언급URL : https://stackoverflow.com/questions/3981250/datagrid-row-content-vertical-alignment