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>
ControlTemplateをオーバーライドせずに行うこともできます。
<Style TargetType="{x:Type DataGridCell}">
<Setter Property="VerticalAlignment" Value="Center" />
</Style>
これは私のために働く
<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>
属性値VerticalAlignment="Center"
は、DataGridをその親要素内で中央揃えにします。
おそらく VerticalContentAlignment が必要です。
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を設定して、違いに気付くようにします。