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:
I want to remove the little white vertical borders that seperate the column headers.
I want to remove the mouseover effect. This screenshot has the mouse over the 3rd column which turns the background to white.
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.
-
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