Hey i am trying to customize the expander control in wpf.When i compile and run the
application the expander does not expand.All other styles are implemented only it does not expand.It should show a ListBox when expanded.
here is my code
<Style x:Key="ExpanderStyle" TargetType="Expander">
<Setter Property="Header" Value="DashBoard"/>
<Setter Property="Width" Value="170"/>
<Setter Property="Height" Value="40"/>
<Setter Property="Background" Value="Black"/>
<Setter Property="Foreground" Value="White"/>
<Setter Property="FontFamily" Value="Arial"/>
<Setter Property="FontSize" Value="13"/>
<Setter Property="Margin" Value="10"/>
<Setter Property="Padding" Value="5"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Expander">
<Border>
<DockPanel>
<ToggleButton Style="{DynamicResource ToggleBtnStyle}"
Content="{TemplateBinding Header}" DockPanel.Dock="Top"
Width="{TemplateBinding Width}"
Height="{TemplateBinding Height}"
Background="{TemplateBinding Background}"
Foreground="{TemplateBinding Foreground}"
FontFamily="{TemplateBinding FontFamily}"
FontSize="{TemplateBinding FontSize}"
IsChecked="{Binding Path=IsExpanded, Mode=Default, RelativeSource={RelativeSource TemplatedParent}}"
>
</ToggleButton>
<ContentPresenter x:Name="Expand" Focusable="False" Visibility="Visible" DockPanel.Dock="Bottom"
VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
<ContentPresenter.LayoutTransform>
<ScaleTransform ScaleY="0" />
</ContentPresenter.LayoutTransform>
</ContentPresenter>
</DockPanel>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsExpanded" Value="True">
<Setter TargetName="Expand" Property="Visibility" Value="Visible"/>
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetName="Expand" To="1" Duration="0:0:0.25"
Storyboard.TargetProperty="LayoutTransform.ScaleY"/>
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetName="Expand"
To="0" Duration="0:0:0.2"
Storyboard.TargetProperty="LayoutTransform.ScaleY"/>
</Storyboard>
</BeginStoryboard>
</Trigger.ExitActions>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="ToggleBtnStyle" TargetType="ToggleButton">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ToggleButton}">
<Border x:Name="BtnEffects" Background="Black" BorderThickness="2" BorderBrush="White"
CornerRadius="9">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="40"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Image Grid.Column="0" Source="D:\Final Year Project\Learning Wpf\Codez\New folder\CustomizeControls\CustomizeControls\greentruck.png"/>
<ContentPresenter Grid.Column="1" Margin="10" RecognizesAccessKey="True" SnapsToDevicePixels="True" />
</Grid>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="true">
<Setter Property="Cursor" TargetName="BtnEffects" Value="Hand"/>
<Setter Property="Background" TargetName="BtnEffects" Value="Red"/>
</Trigger>
<Trigger Property="IsChecked" Value="true">
<Setter Property="Cursor" TargetName="BtnEffects" Value="Hand"/>
<Setter Property="Background" TargetName="BtnEffects" Value="Silver"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
MainWindow.xaml
<Expander Style="{StaticResource ExpanderStyle}">
<ListBox ItemContainerStyle="{StaticResource ListBoxItemStyle}" Style="{StaticResource ListBoxStyle}">
<ListBoxItem>All Vehicles</ListBoxItem>
<ListBoxItem>Some Vehicles</ListBoxItem>
<ListBoxItem>Some Vehicles</ListBoxItem>
</ListBox>
</Expander>