2009-07-28 13 views
18

pasé de esto: WPF GridViewHeader styling questions¿Cómo se teje un encabezado WPF GridView?

a esto:

WPF GridView Headers

Ahora sólo hay que deshacerse de los espacios en blanco a la derecha del "tamaño" de cabecera. Básicamente tengo una plantilla para el GridViewColumnHeader que lo convierte en un TextBlock. ¿Hay alguna manera de establecer el fondo para ese área de encabezado para que abarque todo el ancho de GridView?

añadida Código:

Ésta es mi columna derecha. La cuadrícula no abarca el 100% del área de ventana disponible. En el encabezado, necesito que todo a la derecha de esta columna tenga el mismo fondo que los encabezados de las columnas.

<Style x:Key="GridHeaderRight" TargetType="{x:Type GridViewColumnHeader}"> 
       <Setter Property="Template"> 
        <Setter.Value> 
         <ControlTemplate TargetType="{x:Type GridViewColumnHeader}"> 
          <TextBlock Text="{TemplateBinding Content}" Padding="5" Width="{TemplateBinding Width}" TextAlignment="Right"> 
           <TextBlock.Background> 
            <LinearGradientBrush StartPoint="0,0" EndPoint="0,1"> 
             <GradientStop Offset="0.0" Color="#373638" /> 
             <GradientStop Offset="1.0" Color="#77797B" /> 
            </LinearGradientBrush> 
           </TextBlock.Background> 
          </TextBlock> 
         </ControlTemplate> 
        </Setter.Value> 
       </Setter> 
       <Setter Property="OverridesDefaultStyle" Value="True" /> 
       <Setter Property="Background" Value="Green" /> 
       <Setter Property="Foreground" Value="White" /> 
       <Setter Property="FontSize" Value="12" /> 
       <Setter Property="Background"> 
        <Setter.Value> 
         <LinearGradientBrush StartPoint="0,0" EndPoint="0,1"> 
          <GradientStop Offset="0.0" Color="#373638" /> 
          <GradientStop Offset="1.0" Color="#77797B" /> 
         </LinearGradientBrush> 
        </Setter.Value> 
       </Setter> 
      </Style> 

<GridViewColumn Width="200" HeaderContainerStyle="{ StaticResource GridHeaderRight}" Header="Size"> 
          <GridViewColumn.CellTemplate> 
           <DataTemplate> 
            <TextBlock Text="{Binding Path=EmployeeNumber}" HorizontalAlignment="Right"></TextBlock> 
           </DataTemplate> 
          </GridViewColumn.CellTemplate> 
         </GridViewColumn> 

ACTUALIZACIÓN

estoy un paso más cerca (creo) a la solución de este.

I añade el siguiente código dentro de la etiqueta GridView:

<GridView.ColumnHeaderContainerStyle> 
    <Style TargetType="GridViewColumnHeader"> 
     <Setter Property="BorderThickness" Value="1"></Setter> 
     <Setter Property="BorderBrush" Value="Green"></Setter> 
     <Setter Property="Height" Value="Auto"></Setter> 
     <Setter Property="Background"> 
      <Setter.Value> 
       <LinearGradientBrush StartPoint="0,0" EndPoint="0,1"> 
        <GradientStop Offset="0.0" Color="#373638" /> 
        <GradientStop Offset="1.0" Color="#77797B" /> 
       </LinearGradientBrush> 
      </Setter.Value> 
     </Setter> 
    </Style> 
</GridView.ColumnHeaderContainerStyle> 

La frontera está ahí sólo para que pueda ver el límite de lo que abarca este estilo. Esta es una imagen ampliada de lo que hace. Parece ser lo que quiero si puedo deshacerme del pequeño borde blanco en la parte inferior.

así que supongo que la eliminación de ese pequeño borde inferior blanca también sería una respuesta aceptada por éste.

+1

Es probable que ayude a publicar su código/xaml existente. –

+0

Agregué algunos códigos ahora. – djschwartz

Respuesta

1

Tener un vistazo a la propiedad GridViewColumnHeader.Role. La muestra en la documentación para la enumeración GridViewColumnHeaderRole podría brindarle algunas ideas ...

EDITAR: ¿Ha considerado utilizar la propiedad GridView.HeaderStyle?

+0

No veo cómo la propiedad de solo lectura me ayudará a diseñar toda la fila del encabezado. – djschwartz

+0

No lo hará, pero probablemente pueda darle estilo al encabezado de columna "ficticio" con la función "Relleno" De todos modos, tengo otra idea, vea mi respuesta actualizada –

+0

Consideré usar GridView.HeaderStyle - porque estoy acostumbrado a hacer trabajo ASP.NET. Esto está en WPF y no parece haber (según VS intellisense) ningún GridView.HeaderStyle. Lo verificaré para asegurarme sin embargo. – djschwartz

0

que resolvieron este problema, pero creo que debe haber una mejor manera de hacerlo. El problema era que tenía TextBlocks en el encabezado de cada columna. El área no utilizada no tenía nada en la fila del encabezado. Acabo de agregar un TextBlock con el mismo fondo en GridView.ColumnHeaderContainerStyle y pasó a abarcar el resto del ancho no utilizado de la grilla.

<GridView.ColumnHeaderContainerStyle> 
    <Style TargetType="GridViewColumnHeader"> 
     <Setter Property="Template"> 
      <Setter.Value> 
       <ControlTemplate TargetType="{x:Type GridViewColumnHeader}"> 
        <TextBlock Text="" Padding="5"> 
         <TextBlock.Background> 
          <LinearGradientBrush StartPoint="0,0" EndPoint="0,1"> 
           <GradientStop Offset="0.0" Color="#373638" /> 
           <GradientStop Offset="1.0" Color="#77797B" /> 
          </LinearGradientBrush> 
         </TextBlock.Background> 
        </TextBlock> 
       </ControlTemplate> 
      </Setter.Value> 
     </Setter> 
    </Style> 
</GridView.ColumnHeaderContainerStyle> 
10

Este es un estilo simple que cumplirá lo que estás buscando. Simplemente cambie el fondo transparente en el borde para que sea su degradado deseado.

<Style TargetType="{x:Type GridViewColumnHeader}"> 
     <Setter Property="Template"> 
      <Setter.Value> 
       <ControlTemplate TargetType="{x:Type GridViewColumnHeader}"> 
        <Border BorderThickness="0,0,0,1" BorderBrush="Black" Background="Transparent"> 
         <TextBlock x:Name="ContentHeader" Text="{TemplateBinding Content}" Padding="5,5,5,0" Width="{TemplateBinding Width}" TextAlignment="Center" /> 
        </Border> 
       </ControlTemplate> 
      </Setter.Value> 
     </Setter> 
     <Setter Property="OverridesDefaultStyle" Value="True" /> 
     <Setter Property="Foreground" Value="Black" /> 
     <Setter Property="FontFamily" Value="Segoe UI" /> 
     <Setter Property="FontSize" Value="12" /> 
    </Style> 
2

No estoy seguro de haber entendido su pregunta (Los enlaces de imagen están muertos) pero a veces la manera más simple es la mejor.

Definir algo como esto en Recursos:

<Style TargetType="{x:Type GridViewColumnHeader}" BasedOn="{StaticResource {x:Type GridViewColumnHeader}}"> 
    <Setter Property="TextBlock.TextWrapping" Value="Wrap"/> 
    <Setter Property="TextBlock.Foreground" Value="Black"/> 
</Style> 
Cuestiones relacionadas