2010-10-20 22 views
44

Tengo un DataGrid regular de WPF 4.0 RTM, donde pongo datos de una base de datos. Con el fin de hacer limpio & estilo de luz de DataGrid utilizo una fila alta/alta y de forma predeterminada DataGrid alinea el contenido de la fila en posición vertical superior, pero quiero establecer una alineación vertical central.Asignación vertical de contenido de fila de DataGrid

ya que trataron de utilizar esta propiedad

VerticalAlignment="Center" 

en las opciones Cuadrícula de datos, pero no me ayuda.

Aquí es un ejemplo de XAML de código, la descripción de mi DataGrid sin centro de alineación vertical:

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

Resultado de la ejecución de este código:

alt text

Como se puede ver el contenido de toda la fila tiene alineación vertical superior.

¿Qué debo agregar para obtener una alineación vertical central del contenido de cada fila?

Gracias.

+0

Anot su enfoque, usando la herencia DataGridColumn: http://blog.smoura.com/wpf-toolkit-datagrid-part-iii-playing-with-datagridcolumns-and-datagridcells/ - permite simplemente establecer la propiedad VerticalAlignment en la columna heredada - requiere heredando de cada tipo de columna utilizada, por lo que es una gran limitación. ¿Tal vez alguien lo traduzca en comportamiento? – surfen

Respuesta

85

solución completa de este problema:

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

En resumen, en el sistema del estilo del archivo:

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

En el archivo de la ventana:

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

Esto le dará un resultado buscado:

alt text

+20

sé que esta es una respuesta antigua. ¿Pero no es esto un montón de trabajo para el simple centrado de contenido? – neebz

+1

Lamentablemente, no encontré ninguna otra solución simple, si tiene tal, por favor, comparta su conocimiento. –

+0

La razón principal es porque DataGrid contiene DataGridRow que contiene DataGridCell que contiene controles. Desea que estos controles sean del centro vertical. Eso es lo que Toucki está haciendo. –

5

El valor de atributo VerticalAlignment="Center" centrará DataGrid dentro de su elemento primario.

Probablemente desee VerticalContentAlignment.

40

Para ajustar las alineaciones de texto individuales que puede utilizar:

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

Sí funciona (Use VerticalAlignment, ya que TextAlignment es para posicionamiento horizontal de texto), pero usted ' Tendré que establecer estilos de elementos para todas las columnas (las columnas de casilla de verificación y las columnas de combobox necesitarán tener diferentes estilos). – surfen

+0

Esto es así, porque no rompe las líneas de la cuadrícula si tiene esas habilitadas. –

+0

¿Cómo puedo centrar el texto cuando edito? – Erik

16

El siguiente código alinear verticalmente el contenido de una celda DataGridTextColumn:

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

Editar: tengo vuelva a este problema y encuentre que la solución a continuación funciona mejor, centrará los contenidos de todas las celdas en DataGridTextRows tanto horizontal como verticalmente.

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

NO funciona. Intente configurar DataGrid RowHeight = 100 para hacer filas más altas que la altura predeterminada. las líneas de la cuadrícula se verán totalmente raras. Su primera solución (DataGridTextColumn.ElementStyle) funciona mejor para mí. – joedotnot

12

También podría hacer sin anular la ControlTemplate:

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

No sé por qué esta respuesta no tuvo ningún voto. Es mucho más simple que las respuestas más complejas, ¡y funciona bien! –

+4

Esta respuesta solo funciona cuando no tiene líneas de cuadrícula verticales. De lo contrario, las líneas de la cuadrícula obtendrán un espacio si configuras la propiedad RowHeight. – Sven

1

Sobre la base de la respuesta de Jamier, el código siguiente hizo el truco para mí al utilizar columnas generadas automáticamente:

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; 
    } 
} 
6

Este funciona para mí

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