WPF GridViewHeader样式化问题 [英] WPF GridViewHeader styling questions

问题描述

我试图设置我的第一个WPF ListView / GridView，并且遇到样式化列标题的麻烦。我目前有3个问题。这里是GridView的一个视图，就像它现在一样：

替代文字http://img195.imageshack.us/img195/3245/wpfgridview.png

1. 我希望删除MouseOver效果。我想删除分隔列标题的白色垂直边框。

我想删除MouseOver效果。此屏幕截图将鼠标悬停在第三列上，将背景变为白色。 如何在不破坏单列的情况下重写水平对齐？




这就是代码的样子：

 < Style x：Key =GrayHeaderTargetType ={x：Type GridViewColumnHeader}> 
< Setter Property =背景> 
< Setter.Value> 
< LinearGradientBrush StartPoint =0,0EndPoint =0,1> 
< GradientStop Offset =0.0Color =＃373638/> 
< GradientStop Offset =1.0Color =＃57595B/> 
< / LinearGradientBrush> 
 < / Setter> 
< Setter Property =ForegroundValue =White/> 
< Setter Property =PaddingValue =5，5/> 
< Setter Property =BorderThicknessValue =0/> 
< Setter Property =Horizo​​ntalContentAlignmentValue =Stretch/> 
< / style> 
 
< ListView ItemsSource ={Binding Source = {StaticResource 
 EmployeeInfoDataSource}}
 Margin =0,20,0,20> 
< ListView.ItemContainerStyle> 
< Style TargetType ={x：Type ListViewItem}> 
< Setter Property =HeightValue =24/> 
< Setter Property =BackgroundValue =＃7BB3DC/> 
< Setter Property =ForegroundValue =＃000000/> 
< Setter Property =FontSizeValue =12/> 
< Setter Property =Horizo​​ntalContentAlignmentValue =Stretch/> 
< Setter Property =BorderThicknessValue =1/> 
< Setter Property =BorderBrushValue =Gray/> 
< / style> 
< /ListView.ItemContainerStyle> 
 
< ListView.View> 
< GridView AllowsColumnReorder =false
 ColumnHeaderToolTip =员工信息
 ColumnHeaderContainerStyle ={StaticResource GrayHeader}
> 
< GridViewColumn Width =200Header =First Name> 
< GridViewColumn.CellTemplate> 
< DataTemplate> 
< TextBlock Text ={Binding Path = FirstName}/> 
< / DataTemplate> 
< /GridViewColumn.CellTemplate> 
< / GridViewColumn> 
 
< GridViewColumn Width =300Header =LastName> 
< GridViewColumn.CellTemplate> 
< DataTemplate> 
< TextBlock Text ={Binding LastName}
 Horizo​​ntalAlignment =Right/> 
< / DataTemplate> 
< /GridViewColumn.CellTemplate> 
< / GridViewColumn> 
 
< GridViewColumn DisplayMemberBinding ={Binding Path = EmployeeNumber}
 Width =200Header =Employee Number/> 
< / GridView> 
< /ListView.View> 
< / ListView> 
  

感谢您提出任何建议！



EDITED ：





明确我的第三个问题。这是代码：



 < GridViewColumn Width =300> 
< GridViewColumnHeader Horizo​​ntalAlignment =Right> 
姓氏
< / GridViewColumnHeader> 
  

产生这个。它可以工作，但现在在实际文本的左侧还有额外的空白区域。





替代文字http://img193.imageshack.us/img193/3783/wpfgridviewcolumnheader.png

解决方案

我想出了我的问题。问题在于列标题像一个按钮，因此必须应用新模板。

 < Style x：Key =GridHeaderCenterTargetType ={x ：Type GridViewColumnHeader}> 
< Setter Property =Template> 
< Setter.Value> 
< ControlTemplate TargetType ={x：Type GridViewColumnHeader}> 
< TextBlock Text ={TemplateBinding Content}Padding =5Width ={TemplateBinding Width}TextAlignment =Center> 
< TextBlock.Background> 
< LinearGradientBrush StartPoint =0,0EndPoint =0,1> 
< GradientStop Offset =0.0Color =＃373638/> 
< GradientStop Offset =1.0Color =＃77797B/> 
< / LinearGradientBrush> 
< /TextBlock.Background> 
< / TextBlock> 
< / ControlTemplate> 
 < / Setter> 
< Setter Property =OverridesDefaultStyleValue =True/> 
< Setter Property =BackgroundValue =Green/> 
< Setter Property =ForegroundValue =White/> 
< Setter Property =FontSizeValue =12/> 
< Setter Property =背景> 
< Setter.Value> 
< LinearGradientBrush StartPoint =0,0EndPoint =0,1> 
< GradientStop Offset =0.0Color =＃373638/> 
< GradientStop Offset =1.0Color =＃77797B/> 
< / LinearGradientBrush> 
 < / Setter> 
< / style> 
 
< GridViewColumn Width =100HeaderContainerStyle ={StaticResource GridHeaderCenter}Header =Transfer> 
  




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 http://img195.imageshack.us/img195/3245/wpfgridview.png

1. I want to remove the little white vertical borders that separate 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}"/>
               </DataTemplate>
            </GridViewColumn.CellTemplate>
         </GridViewColumn>

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

         <GridViewColumn DisplayMemberBinding="{Binding Path=EmployeeNumber}" 
                         Width="200" Header="Employee Number"/>
      </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 http://img193.imageshack.us/img193/3783/wpfgridviewcolumnheader.png

解决方案

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

这篇关于WPF GridViewHeader样式化问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！