2009-07-28 37 views
18

我從這個去:WPF GridViewHeader styling questions你如何設計一個WPF GridView頭?

這樣:

WPF GridView Headers

現在我只需要擺脫白色空間的「大小」標頭的右側。我基本上有一個GridViewColumnHeader的模板,使它成爲一個TextBlock。有什麼辦法可以設置該標題區域的背景,以便跨越GridView的整個寬度?

添加的代碼:

這是我最右邊的列。網格不能覆蓋可用窗口區域的100%。在標題中,我需要此列右側的所有內容與列標題本身具有相同的背景。

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

UPDATE

我一步步接近(我認爲)來解決這個。

添加以下代碼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> 

邊框是有隻是讓你可以看到這是什麼風格涵蓋了邊界。這是這樣做的放大圖像。這似乎是我想要的,如果我可以擺脫底部的白色小邊框。

所以我想刪除這個小小的白底邊框也是這個接受的答案。

+1

它可能會幫助來發表您的現有代碼/ XAML。 – 2009-07-28 20:43:20

+0

我現在添加了一些代碼。 – djschwartz 2009-07-29 12:49:28

回答

1

看一看在GridViewColumnHeader.Role財產。 GridViewColumnHeaderRole枚舉的文檔中的示例可能會給你一些想法...

編輯:你有沒有考慮過使用GridView.HeaderStyle屬性?

+0

我看不到只讀角色屬性如何幫助我設計整個標題行。 – djschwartz 2009-07-29 12:50:20

+0

它不會,但它可以讓你風格的「虛擬」列標題的角色「填充」 無論如何,我只是有另一個想法,看到我更新的答案 – 2009-07-29 12:53:39

+0

我考慮使用GridView.HeaderStyle - 因爲我用於做ASP.NET工作。這是在WPF中,似乎沒有(根據VS intellisense)任何GridView.HeaderStyle。我會檢查出來確定。 – djschwartz 2009-07-29 13:22:41

0

我解決了這個問題,但我認爲應該有一個更好的方法來做到這一點。問題是我在每列的標題上都有TextBlocks。未使用的區域在標題行中沒有任何內容。我只是在GridView.ColumnHeaderContainerStyle中添加了一個具有相同背景的TextBlock,並且它恰好跨越了網格未使用寬度的其餘部分。

<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

這是一種簡單的風格,可以完成您正在尋找的東西。只需將邊框上的透明背景更改爲您所需的漸變。

<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

我不確定我是否理解您的問題(圖片鏈接已死),但有時最簡單的方法是最好的。

定義是這樣的資源:

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