Monday, February 21, 2011

WPF GridViewHeader styling questions

I'm trying to set up my very first WPF ListView/GridView and having trouble with styling the column headers. I currently have 3 issues. Here is a view of the GridView as it is right now:

alt text

  1. I want to remove the little white vertical borders that seperate the column headers.

  2. I want to remove the mouseover effect. This screenshot has the mouse over the 3rd column which turns the background to white.

  3. How can I override the horizontal alignment on a single column without screwing it up?

This is what the code looks like:

<Style x:Key="GrayHeader" TargetType="{x:Type GridViewColumnHeader}">
                <Setter Property="Background">
                    <Setter.Value>
                        <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                            <GradientStop Offset="0.0" Color="#373638" />
                            <GradientStop Offset="1.0" Color="#57595B" />
                        </LinearGradientBrush>
                    </Setter.Value>
                </Setter>
                <Setter Property="Foreground" Value="White" />
                <Setter Property="Padding" Value="5, 5" />
                <Setter Property="BorderThickness" Value="0" />
                <Setter Property="HorizontalContentAlignment" Value="Stretch" />
            </Style>

<ListView ItemsSource="{Binding Source={StaticResource EmployeeInfoDataSource}}" Margin="0,20,0,20">

                <ListView.ItemContainerStyle>
                    <Style TargetType="{x:Type ListViewItem}"  >
                        <Setter Property="Height" Value="24" />
                        <Setter Property="Background" Value="#7BB3DC" />
                        <Setter Property="Foreground" Value="#000000" />
                        <Setter Property="FontSize" Value="12" />
                        <Setter Property="HorizontalContentAlignment" Value="Stretch" />
                        <Setter Property="BorderThickness" Value="1" />
                        <Setter Property="BorderBrush" Value="Gray" />
                    </Style>
                </ListView.ItemContainerStyle>


                <ListView.View>
                    <GridView AllowsColumnReorder="false" ColumnHeaderToolTip="Employee Information"
                              ColumnHeaderContainerStyle="{StaticResource GrayHeader}"
                              >

                        <GridViewColumn Width="200" Header="First Name">
                            <GridViewColumn.CellTemplate>
                                <DataTemplate>
                                    <TextBlock Text="{Binding Path=FirstName}"></TextBlock>
                                </DataTemplate>
                            </GridViewColumn.CellTemplate>
                        </GridViewColumn>

                        <GridViewColumn Width="300" Header="LastName">
                            <GridViewColumn.CellTemplate>
                                <DataTemplate>
                                    <TextBlock Text="{Binding LastName}" HorizontalAlignment="Right"></TextBlock>
                                </DataTemplate>
                            </GridViewColumn.CellTemplate>
                        </GridViewColumn>

                        <GridViewColumn DisplayMemberBinding="{Binding Path=EmployeeNumber}" Width="200" Header="Employee Number">
                        </GridViewColumn>

                    </GridView>

                </ListView.View>

            </ListView>

Thanks for any ideas!

EDITED:

To be clear about the 3rd question I had. This is the code:

<GridViewColumn Width="300">
    <GridViewColumnHeader HorizontalAlignment="Right">Last Name</GridViewColumnHeader>

That produces this. It works but there is that extra white space in there to the left of the actual text now.

alt text

From stackoverflow
  • I figured out my issues. The problem was that the column header acted like a button, so a new template had to be applied. Changing it to a TextBlock removed all of those issues.

    <Style x:Key="GridHeaderCenter" TargetType="{x:Type GridViewColumnHeader}">
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="{x:Type GridViewColumnHeader}">
                                <TextBlock Text="{TemplateBinding Content}" Padding="5" Width="{TemplateBinding Width}" TextAlignment="Center">
                                    <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="100" HeaderContainerStyle="{ StaticResource GridHeaderCenter}" Header="Transfer">
    

0 comments:

Post a Comment