2009-07-28 15 views
18

私はこれから行ってきました。これにWPF GridViewHeader styling questionsどのようにしてWPF GridViewヘッダーのスタイルを設定しますか?

WPF GridView Headers

今、私はちょうど「サイズ」ヘッダの右側に空白を取り除く必要があります。私は基本的にそれをTextBlockにするGridViewColumnHeader用のテンプレートを持っています。 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を投稿するのに役立ちます。 –

+0

私は今いくつかのコードを追加しました。 – djschwartz

答えて

1

GridViewColumnHeader.Roleプロパティを見てください。 GridViewColumnHeaderRole列挙型のドキュメントのサンプルでは、​​いくつかのアイデアが得られます。

編集:GridView.HeaderStyleプロパティの使用を検討しましたか?

+0

readonlyのRoleプロパティがヘッダー行全体のスタイルにどのように役立つか分かりません。 – djschwartz

+0

それはできませんが、おそらく、あなたはロール "パディング"で "ダミー"列ヘッダをスタイルすることができます とにかく、私はちょうど別のアイデアを持って、私の更新された回答を参照してください –

+0

私はGridView.HeaderStyle ASP.NETの作業に慣れていました。これはWPFであり、(VS intellisenseによると)GridView.HeaderStyleは存在しないようです。私は確かめるためにそれをチェックアウトします。 – djschwartz

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> 
関連する問題