How to draw expander (slider) in wpf - wpf

Question

I have a requirement where I need a button which will let the user tap and swipe down/up in order to expand/collapse the control above the button. Something like in this image:
How can I achieve it in xaml?

Answer 1

You can create Template for Header and put an image from your question into HeaderTemplate. Let me show an example:
<Grid>
<Grid.Resources>
<Style TargetType="Border" x:Key="FooBorderStyle" >
<Style.Resources>
<LinearGradientBrush x:Key="ABackBrush" 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 ABackBrush}"/>
</Style>
<DataTemplate x:Key="titleTemplate">
<Border Style="{StaticResource FooBorderStyle}" Height="24">
<Image Source="../Images/yourImage.png"
Margin="4 0"
VerticalAlignment="Center"/>
</Border>
</DataTemplate>
<Style TargetType="{x:Type Expander}">
<Setter Property="HeaderTemplate" Value="{StaticResource titleTemplate}"/>
</Style>
</Grid.Resources>
<Expander Name="hcontCtrl" Header="This is the header.">
<StackPanel>
<TextBox>This is a textbox</TextBox>
<Button>A button</Button>
</StackPanel>
</Expander>
</Grid>