ejemplo - ¿Cómo hacer para alinear a la derecha una celda de DataGrid de WPF sin hacer que el área seleccionable en una nueva fila sea pequeña?

wpf datagrid add row programmatically

Question

Estoy usando un WPF4.0 DataGrid. Al hacer doble clic en una celda en una nueva fila, todo funciona bien a menos que agregue un estilo de celda a esa columna. Por ejemplo, tengo una columna numérica donde quiero que los datos estén alineados para que xaml se vea así

<DataGridTextColumn Binding="{Binding Path=ImpaId}"
                    CellStyle="{StaticResource CellRightAlign}">
     <DataGridTextColumn.Header>
          <TextBlock  Style="{StaticResource DataGridHeader}">Impa</TextBlock>
     </DataGridTextColumn.Header>
</DataGridTextColumn>

Donde el estilo en un recurso compartido es justo:

<Style x:Key="CellRightAlign">
    <Setter Property="Control.HorizontalAlignment"
            Value="Right" />
</Style>

El área seleccionable resultante en una nueva fila se muestra en la imagen como esa pequeña área azul. Este es un objetivo muy pequeño para que el usuario acceda, y esta es la columna más probable con la que querrán comenzar en una nueva fila .

Si elimino CellStyle, el área funciona según lo deseado pero, por supuesto, pierdo la alineación correcta.

¿Alguien sabe cómo lograr ambos?

Cosas que probé

1. Establecer TargetNullValue en el enlace a un formato con cierto ancho. Esto funciona en filas existentes pero no tiene efecto en una nueva fila.
2. Establecer MinWidth en la columna, esto no afectó el ancho del área seleccionable de la nueva fila.

Cosa que funcionó:

Usando la información de la respuesta de @AngelWPF, pude cambiar de usar CellStyle a usar ElementStyle de la siguiente manera:

<DataGridTextColumn Binding="{Binding Path=ImpaId}"
                    CellStyle="{StaticResource CellRightAlign}">

Convirtió

<DataGridTextColumn Binding="{Binding Path=ImpaId}"
                    ElementStyle="{StaticResource CellRightAlign}">

Answer 1

Acabo de tener un problema similar y encontré otra solución sobrescribiendo el Estilo para el DataGridCell en Blend.

Los elementos modificados del estilo original son los ajustadores de VerticalAlignment y VerticalContentAlignment en el estilo mismo para estirar la celda misma y VerticalAlignment="Center" y HorizontalAlignment="Right" en la propiedad de la plantilla para alinear el contenido. Cambia estos valores a lo que necesites para alinear el contenido de las celdas.

El resto del estilo podría eliminarse para que se utilicen las configuraciones del estilo base (utilizando StaticResource, el estilo es BasedOn). Sin embargo, dejé el estilo porque Blend lo produjo.

Este código XAML resultante debería incluirse en los recursos de controles:

<Style TargetType="{x:Type DataGridCell}" BasedOn="{StaticResource ResourceKey={x:Type DataGridCell}}">
    <Setter Property="VerticalAlignment" Value="Stretch" />
    <Setter Property="VerticalContentAlignment" Value="Stretch" />

    <!-- Additional styles, can be removed to fall back to base styles -->
    <Setter Property="Background" Value="Transparent"/>
    <Setter Property="BorderBrush" Value="Transparent"/>
    <Setter Property="BorderThickness" Value="1"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type DataGridCell}">
                <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" SnapsToDevicePixels="True">
                    <ContentPresenter
                        ContentTemplate="{TemplateBinding ContentTemplate}"
                        Content="{TemplateBinding Content}"
                        ContentStringFormat="{TemplateBinding ContentStringFormat}"
                        SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
                        VerticalAlignment="Center"
                        HorizontalAlignment="Right"
                        />
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
    <Style.Triggers>
        <Trigger Property="IsSelected" Value="True">
            <Setter Property="Background" Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}"/>
            <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.HighlightTextBrushKey}}"/>
            <Setter Property="BorderBrush" Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}"/>
        </Trigger>
        <Trigger Property="IsKeyboardFocusWithin" Value="True">
            <Setter Property="BorderBrush" Value="{DynamicResource {ComponentResourceKey ResourceId=FocusBorderBrushKey, TypeInTargetAssembly={x:Type DataGrid}}}"/>
        </Trigger>
    </Style.Triggers>
</Style>

Answer 2

Podrías aplicar ElementStyle en DataGridTextColumn dirigido a TextBlock y alinearlo a la derecha, funcionaría.

      <DataGridTextColumn Binding="{Binding Path=ImpaId}">
          <DataGridTextColumn.Header>
               <TextBlock  Style="{StaticResource
                                  DataGridHeader}">
                    Impa
               </TextBlock>
          </DataGridTextColumn.Header>
          <DataGridTextColumn.ElementStyle>
              <Style TargetType="{x:Type TextBlock}">
                  <Setter Property="HorizontalAlignment" Value="Right" />
              </Style>
          </DataGridTextColumn.ElementStyle>
      </DataGridTextColumn> 

Answer 3

Puede intentar un trabajo alrededor:

           <DataGridTemplateColumn>
            <DataGridTemplateColumn.CellTemplate>
                <DataTemplate>
                    <Grid Background="White" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
                        <TextBlock HorizontalAlignment="Right" Text="{Binding Path=ImpaId}"/>
                    </Grid>
                </DataTemplate>
            </DataGridTemplateColumn.CellTemplate>
        </DataGridTemplateColumn>

Answer 4

Solo quería agregar más ejemplos para futuras búsquedas de código.

Puse esto en la parte superior del archivo xaml:

<UserControl.Resources>
    <Style TargetType="{x:Type TextBlock}" x:Key="RightCell">
        <Setter Property="Background" Value="{Binding Included, Converter={StaticResource BoolToColorConverter}}"/>
        <Setter Property="HorizontalAlignment" Value="Stretch"/>
        <Setter Property="TextAlignment" Value="Right"/>
    </Style>
</UserControl.Resources>

Y luego en la cuadrícula de datos:

<DataGridTextColumn Header="Excluded" Binding="{Binding Excluded}" ElementStyle="{StaticResource RightCell}"/>

Este derecho alinea el texto y la ordenación todavía está habilitada. El cuadro de texto llena la celda y en este caso se colorea usando un convertidor bool.