web-dev-qa-db-ja.com

セルのコンテンツをデータグリッドの中央に配置する方法は?

データグリッドの最小高さをそのように設定しました:

<DataGrid MinRowHeight="40">

データグリッドにデータを供給した後、各セルのテキストは上揃えと左揃えになります。そのテキストを中央に配置する簡単な方法が見つかりませんでした。

それを行うための提案はありますか?

23
Francois

最終的解決:

<Style x:Key="DataGridContentCellCentering" 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>
41
Francois

次のコードは、DataGridのセルのコンテンツを中央揃えにします。

<Style TargetType="DataGridCell">
    <Setter Property="TextBlock.TextAlignment" Value="Center" />
</Style>
22
lea

スタイルを使用できます。 DataGridCheckBoxColumnのサンプルを追加しました。正しい方向に進んでいただければ幸いです。

<DataGridCheckBoxColumn Header="is active" IsReadOnly="False">
      <DataGridCheckBoxColumn.ElementStyle>
            <Style TargetType="CheckBox">
                 <Setter Property="VerticalAlignment" Value="Center"/>
                  <Setter Property="HorizontalAlignment" Value="Center"/>
             </Style>
      </DataGridCheckBoxColumn.ElementStyle>
      <DataGridCheckBoxColumn.Binding>
             <Binding Path="ISACTIVE" ValidatesOnDataErrors="True" Converter="{StaticResource MyBoolToIsActiveConverter}" Mode="TwoWay" UpdateSourceTrigger="PropertyChanged"
                                 NotifyOnValidationError="True" ValidatesOnExceptions="True">
                        </Binding>
                    </DataGridCheckBoxColumn.Binding>
                </DataGridCheckBoxColumn>
9
blindmeis

elementStyleを使用する

 <DataGridTextColumn ElementStyle="{StaticResource Centering}"/>

  <Style x:Key="Centering" TargetType="{x:Type TextBlock}">
       <Setter Property="HorizontalAlignment" Value="Center" />
  </Style>
7
Meysam Chegini

DataGridのVerticalおよびHorizo​​ntalContentAlignmentをCenterに設定してみてください

<DataGrid VerticalContentAlignment="Center" HorizontalContentAlignment="Center" />

それがうまくいかない場合は、 この答え のソリューションを使用できます。 DataGridセルの内容を揃えるスタイルを使用します

6
Rachel

このようにスタイルタグを変更します。

 <Style x:Key="CellTextCentre" TargetType="DataGridCell">
    <Setter Property="TextBlock.TextAlignment" Value="Center"></Setter>
    <Setter Property="TextBlock.VerticalAlignment" Value="Center"></Setter> 
 </Style>
3
Arpit Shah

ここで、コンテンツを垂直方向に中央揃えするためのより良いアプローチ:

<Style TargetType="{x:Type DataGridCell}" BasedOn="{StaticResource {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>
0
Apfelkuacha

このスタイルは、明示的に適用する必要なく、すべてのVerticalAlignmentsに対してCenterDataGridCellに設定します。

<Style TargetType="DataGridCell">
    <Style.Resources>
        <Style TargetType="ContentPresenter">
            <Setter Property="VerticalAlignment" Value="Center" />
        </Style>
    </Style.Resources>
</Style>

これが最もエレガントな解決策であると思います。

0
The Pademelon

Arpit Shah's answer の少し長いバージョンを示します。

<DataGrid AutoGenerateColumns="False" IsReadOnly="True" ItemsSource="{Binding Rows}">
    <DataGrid.Resources>
        <Style x:Key="RightAligned" TargetType="DataGridCell">
            <Setter Property="HorizontalAlignment" Value="Right" />
        </Style>
    </DataGrid.Resources>
    <DataGrid.Columns>
        <DataGridTextColumn CellStyle="{StaticResource RightAligned}" 
                            Binding="{Binding Path=Quantity, Mode=OneWay}" 
                            Header="Quantity" Width="60" />
        <DataGridTextColumn Binding="{Binding Path=Category, Mode=OneWay}" 
                            Header="Category" Width="150" />
    </DataGrid.Columns>
</DataGrid>
0
Steven Davis