WPF 익스팬더 헤더의 스타일링 방법

WPF 익스팬더 헤더의 스타일링 방법

WPF Expander 헤더에 스타일을 적용하고 싶습니다.다음 XAML에는 Expander가 있는데, 이 스타일은 헤더뿐만이 아닙니다.

감사해요.

<Page
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="640"
>
    <StackPanel>
        <StackPanel.Resources>
            <Style TargetType="Expander">
                <Style.Resources>
                    <LinearGradientBrush x:Key="BackBrush" StartPoint="0.5,0" EndPoint="0.5,1">
                        <GradientStop Color="#EF3132" Offset="0.1" />
                        <GradientStop Color="#D62B2B" Offset="0.9" />
                    </LinearGradientBrush>
                </Style.Resources>
                <Setter Property="Background" Value="{StaticResource BackBrush}"/>
            </Style>
        </StackPanel.Resources>
        <Expander>
            <StackPanel>
                <TextBlock>Bike</TextBlock>
                <TextBlock>Car</TextBlock>
                <TextBlock>Truck</TextBlock>
            </StackPanel>
        </Expander>
    </StackPanel>
</Page>

저는 Josh Smith와 MSDN의 XAML을 결합하여 해결책을 생각해 냈습니다.실제로 컨트롤(최소한 헤더)은 재템플릿해야 합니다.

<Page
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="400">
    <StackPanel>
        <StackPanel.Resources>

            <Style TargetType="Border" x:Key="RacePitBorderStyle" >
                <Style.Resources>
                    <LinearGradientBrush x:Key="BackBrush" StartPoint="0.5,0" EndPoint="0.5,1">
                        <GradientStop Color="#EF3132" Offset="0.1" />
                        <GradientStop Color="#D62B2B" Offset="0.9" />
                    </LinearGradientBrush>
                </Style.Resources>
                <Setter Property="Background" Value="{StaticResource BackBrush}"/>
            </Style>

            <DataTemplate x:Key="titleText">
                <Border Style="{StaticResource RacePitBorderStyle}" Height="24">
                    <TextBlock Text="{Binding}" 
                        Margin="4 0"
                        VerticalAlignment="Center"
                        Foreground="White"
                        FontSize="11" 
                        FontWeight="Normal"
                        Width="{Binding
                        RelativeSource={RelativeSource
                        Mode=FindAncestor,
                        AncestorType={x:Type Expander}},
                        Path=ActualWidth}"
                        TextWrapping="Wrap"/>
                </Border>
            </DataTemplate>

            <Style TargetType="{x:Type Expander}">
                <Setter Property="HeaderTemplate" Value="{StaticResource titleText}"/>
            </Style>

        </StackPanel.Resources>

        <Expander Name="hcontCtrl" Header="This is the header.">
            <StackPanel>
                <TextBox>This is a textbox</TextBox>
                <Button>A button</Button>
            </StackPanel>
        </Expander>

    </StackPanel>
</Page>

Vasile의 답변은 올바른 방향으로 가고 있다고 생각합니다만, 원래의 포스터가 필요로 하는 것보다 훨씬 더 많은 것을 하고 있는 것 같습니다.당초의 질문은, 헤더의 배경을 변경하는 것 뿐이었습니다.제시된 변경은 이를 가능하게 하지만 다른 것도 가능하게 합니다.

그 중 하나는 기본 구현인 ContentPresenter를 TextBlock으로 대체하는 것입니다.그러면 나중에 헤더가 더 복잡해지도록 Expander를 변경하면 어떻게 됩니까?예를 들어 다음과 같습니다.

<Expander>
    <Expander.Header>
        <StackPanel>
            <Border height="5" width="5" Foreground="Blue"/>
            <TextBlock>Ha!</TextBlock>
        </StackPanel>
    </Expander.Header>
</Expander>

모르겠어요, 하지만 좋지 않아요.대신, 우리는 이것을 단순하게 하고 싶습니다.

<DataTemplate x:Key="expanderHeader">
    <ContentPresenter
        Content={Binding}
        TextBlock.Background={StaticResource myBrush}/>
</DataTemplate>

<Style TargetType="Expander">
    <Setter Property="HeaderTemplate" Value="{StaticResource expanderHeader}"/>
</Style>

이렇게 하면 누군가가 스타일 확장기에 텍스트가 아닌 것을 넣어도 고장나지 않습니다.이러한 배경에서 수행하는 모든 작업을 원하는 대로 정리할 경우 다음과 같이 됩니다.

<DataTemplate x:Key="expanderHeader">
    <Border Background={StaticResource myBrush}>
        <ContentPresenter Content={Binding}/>
    </Border>
</DataTemplate>

원하는 스타일에 따라 스타일링할 수 있습니다.헤더의 내용을 변경하려면 모든 UI를 Expander에 넣기만 하면 됩니다.헤더 속성. 헤더 영역에 표시됩니다.

그것이 당신의 요구를 만족시키지 못할 경우, 당신은 아마도 컨트롤을 다시 조정해야 할 것입니다.WPF에 부속되어 있는 컨트롤 템플릿을 참조해 주세요.

언급URL : https://stackoverflow.com/questions/661503/how-to-style-a-wpf-expander-header