0

So playing around with the expander control and I came across this code to set the expander colour while closed. But I noticed that the arrow part of the expander remained white. Is there a way to either remove the Arrow or colour that region?

Screen Shot:

enter image description here

Bare in mind I have no experience with this at all, and I dont know how to edit templates etc

<Page
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="400" OpacityMask="#91000000">
    <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>
Daniel Hilgarth
  • 171,043
  • 40
  • 335
  • 443
Kirsty White
  • 1,210
  • 3
  • 26
  • 54
  • I've reworked the expander so that I could have the arrow in the middle of some content. H.B. is correct, you need to pull the style from blend if you want to reuse the default one. – Ritch Melton Apr 15 '12 at 15:28
  • Ritch when you put the arrow in the middle did you have to use Blend? If not would you be so kind to post the code? – Kirsty White Apr 15 '12 at 16:14
  • I don't own the code or work for the client any more, but I did have to pull the template from Blend. That's just how WPF works (unfortunately). – Ritch Melton Apr 15 '12 at 16:19

1 Answers1

1

The arrow is part of the default control template, you could either copy that and modify it or create your own from scratch.

Community
  • 1
  • 1
H.B.
  • 166,899
  • 29
  • 327
  • 400