読者です 読者をやめる 読者になる 読者になる

ListView の列ヘッダのスタイルを変更する

まだまだ ListView を弄ってます。

http://d.hatena.ne.jp/griefworker/20081001/1225068669:title-先日は ListView を縞々にしたので、今度は列ヘッダの色も変更してみました。

<Window x:Class="ListViewSample.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
	xmlns:ListViewSample="clr-namespace:ListViewSample"
	Title="Window1" Height="400" Width="500">
    <Window.Resources>

        <!--ListView 用の StyleSelector-->
        <ListViewSample:ListViewStyleSelector x:Key="listViewStyleSelector"/>

    </Window.Resources>
    <Grid>
        <!-- StyleSelector を指定-->
        <ListView x:Name="listView1" ItemsSource="{Binding}" ItemContainerStyleSelector="{StaticResource listViewStyleSelector}">
            <ListView.Resources>

                <!--得意先列ヘッダ用テンプレート-->
                <DataTemplate x:Key="customerHeaderTemplate">
                    <StackPanel>
                        <Label Content="得意先コード"/>
                        <Label Content="得意先名"/>
                    </StackPanel>
                </DataTemplate>

                <!--得意先セル用テンプレート-->
                <DataTemplate x:Key="customerCellTemplate">
                    <StackPanel>
                        <Label Content="{Binding Path=CustomerCode}"/>
                        <Label Content="{Binding Path=CustomerName}"/>
                    </StackPanel>
                </DataTemplate>

                <!--伝票種列ヘッダ用テンプレート-->
                <DataTemplate x:Key="kindHeaderTemplate">
                    <StackPanel>
                        <Label Content="伝票種"/>
                        <Label Content="伝票番号フラグ"/>
                    </StackPanel>
                </DataTemplate>

                <!--伝票種セル用テンプレート-->
                <DataTemplate x:Key="kindCellTemplate">
                    <StackPanel>
                        <Label Content="{Binding Path=Kind}"/>
                        <Label Content="{Binding Path=NoFlag}"/>
                    </StackPanel>
                </DataTemplate>

                <!--偶数行に適用するスタイル-->
                <Style x:Key="alternateStyle" TargetType="{x:Type ListViewItem}">
                    <Setter Property="Background" Value="Gold"/>
                </Style>

                <!--ListView の全列ヘッダに適用するスタイル-->
                <Style x:Key="{x:Type GridViewColumnHeader}" TargetType="{x:Type GridViewColumnHeader}">
                    <Setter Property="Background">
                        <Setter.Value>
                            <!--列ヘッダの背景色をグラデーションさせる-->
                            <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                                <LinearGradientBrush.GradientStops>
                                    <GradientStop Color="Gold" Offset="0"/>
                                    <GradientStop Color="DarkOrange" Offset="1"/>
                                    <GradientStop Color="DarkOrange" Offset="2"/>
                                </LinearGradientBrush.GradientStops>
                            </LinearGradientBrush>
                        </Setter.Value>
                    </Setter>
                </Style>

            </ListView.Resources>
            <ListView.View>
                <GridView>
                    <!--列を追加。-->
                    <!--DisplayMemberBinding を使って、列に表示する Slip クラスのプロパティを指定しています-->
                    <GridViewColumn Header="伝票日付" DisplayMemberBinding="{Binding Path=Date}"/>

                    <!--伝票種列ヘッダ用のテンプレートと伝票種セル用のテンプレートを指定-->
                    <GridViewColumn HeaderTemplate="{StaticResource kindHeaderTemplate}" CellTemplate="{StaticResource kindCellTemplate}"/>

                    <GridViewColumn Header="伝票番号" DisplayMemberBinding="{Binding Path=No}"/>

                    <!--得意先列ヘッダ用のテンプレートと得意先セル用のテンプレートを指定-->
                    <GridViewColumn HeaderTemplate="{StaticResource customerHeaderTemplate}" CellTemplate="{StaticResource customerCellTemplate}"/>

                </GridView>
            </ListView.View>
        </ListView>
    </Grid>
</Window>

f:id:griefworker:20081027095849p:image

GridViewColumnHeader のスタイルを変更すればいい事に、なかなか気付けませんでした><