web-dev-qa-db-ja.com

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>

このコードを実行した結果：

alt text

ご覧のように、すべての行コンテンツの上部は垂直に整列しています。

各行コンテンツの中央の垂直方向の配置を取得するには、何を追加する必要がありますか？

c#wpfxamldatagridvertical-alignment
51
Mike B.

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>

これにより、必要な結果が得られます。

alt text

101
Mike B.

個々のテキストの配置を設定するには、次を使用できます。

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

次のコードは、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>
19
mhansen

ControlTemplateをオーバーライドせずに行うこともできます。

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

これは私のために働く

 <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>
10
Justin Adrias

属性値VerticalAlignment="Center"は、DataGridをその親要素内で中央揃えにします。

おそらく VerticalContentAlignment が必要です。

5
Nick Desjardins

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;
  }
}
1
dotNET

これは私の単純な解決策であり、完全に機能する

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

幅に200を設定して、違いに気付くようにします。

0
X Stylish