DataGrid行內容垂直對齊

我有一個WPF 4.0 RTM常規DataGrid，我從數據庫中放入數據。爲了使清潔&光柵樣式的DataGrid我使用高/高行，默認情況下DataGrid排列行垂直位置的內容，但我想設置一箇中心垂直對齊。DataGrid行內容垂直對齊

我已經嘗試過在DataGrid中選擇使用此屬性

VerticalAlignment="Center"

，但它並不能幫助我。

這裏是XAML代碼的例子，說明我的DataGrid無中心垂直對齊方式：

alt text

正如你可以看到所有列的內容：

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

這段代碼執行的結果有頂部垂直對齊。

爲了獲得每行內容的中心垂直對齊，我必須添加什麼？

謝謝。

來源

2010-10-20 Mike B.

anot她的方法，使用DataGridColumn繼承：http://blog.smoura.com/wpf-toolkit-datagrid-part-iii-playing-with-datagridcolumns-and-datagridcells/ - 允許簡單地設置繼承列上的VerticalAlignment屬性 - 需要從每個使用的列類型繼承，所以這是相當有限的。也許有人會把它翻譯成行爲？ – surfen 2011-12-19 15:32:13

這個問題的完整的解決方案：在風格文件集

http://social.msdn.microsoft.com/Forums/en-US/wpf/thread/8c2aa3b1-d967-41ab-93c2-6c8cb1b7d29d/#488d0cdd-d0c2-469a-bfb6-8ca3d75426d4

簡單地說，：

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

來源

2010-10-22 10:12:42

+20

我知道這是一個古老的答案。但是，對於簡單的內容定位來說，這不是很多工作嗎？ – neebz 2011-02-20 12:03:32

不幸的是，我沒有找到任何其他簡單的解決方案，如果你有這樣的，請分享你的知識。 – 2011-02-28 23:20:19

主要原因是因爲DataGrid包含DataGridRow誰包含DataGridCell誰Containt控件。你希望這些控件是垂直中心。這就是Toucki正在做的事情。 – 2011-06-08 20:54:19

屬性值VerticalAlignment="Center"將使DataGrid在其父元素中間。

您可能想要VerticalContentAlignment。

來源

2010-10-20 19:20:38

要設置單獨的文字對齊方式，你可以使用：

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

來源

2011-12-05 11:28:18 jamier

是的它的工作原理（使用VerticalAlignment，因爲TextAlignment是水平文本定位）必須爲所有列設置元素樣式（複選框列和組合列將需要不同的樣式）。 – surfen 2011-12-18 17:58:00

就像這樣，因爲如果啓用了這些方法，它不會中斷網格線。 – 2012-02-22 09:51:59

如何在編輯時將文本居中？ – Erik 2016-05-30 09:53:32

下面的代碼將垂直對齊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>

來源

2013-10-09 15:22:07 mhansen

不起作用。嘗試設置DataGrid RowHeight = 100使行高於默認高度。網格線看起來很奇怪。你的第一個解決方案（DataGridTextColumn.ElementStyle）對我來說效果更好。 – joedotnot 2015-05-29 00:24:18

你也可以做不重寫控件模板：

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

來源

2014-02-11 19:29:05 usefulBee

不知道爲什麼這個答案沒有任何投票。它比更復雜的答案簡單得多，並且工作正常！ – 2014-04-10 20:21:33

只有當您沒有垂直網格線時，此答案纔有效。否則，如果設置了RowHeight屬性，則網格線將會出現間隙。 – Sven 2014-09-01 17:29:22

大廈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; 
    } 
}

來源

2016-03-27 19:29:53 dotNET

這一個適用於我

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

來源

2016-08-15 14:57:44

DataGrid行內容垂直對齊

回答

相關問題