Apply Windows 7 like style to Expander

Navigation for WPF Forum

Posted 10 years ago by Ronak Patel
Avatar
1) I want to change the Background of the Expander to White or Transperant
2) I want to change the Toggle Button to look like Normal Expander Toggle Button on right

I have posted my code and the Control Template ToggleButton. It works perfectly fine.
I am not able to find a way to overwrite the Background color.

My Code so Far
---------------
<Window x:Class="ExpanderSyle.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:themes="http://schemas.actiprosoftware.com/winfx/xaml/themes"
xmlns:navigation="http://schemas.actiprosoftware.com/winfx/xaml/navigation"
Title="Window1" Width="458">

<ScrollViewer VerticalScrollBarVisibility="Auto">
<StackPanel Margin="10">
<Expander
Style="{StaticResource {x:Static themes:NavigationBarCommonDictionary.ExpanderStyleKey}}" Name="test">
<Expander.Header>
<Grid>
<Label FontSize="14" Foreground="CornflowerBlue" >_General</Label>
</Grid>
</Expander.Header>
<StackPanel>
<TextBlock Margin="10" Text="This is some content within the themed Expander." TextWrapping="Wrap" />
<RadioButton>
<Label>_Roank</Label>
</RadioButton>
<Label Target="{Binding ElementName=nameTextBox}">_Name:</Label>
<TextBox x:Name="nameTextBox" />

</StackPanel>

</Expander>
<Expander
Style="{StaticResource {x:Static themes:NavigationBarCommonDictionary.ExpanderStyleKey}}" Name="test1">
<Expander.Header>
<Grid>
<Label FontSize="14" Foreground="CornflowerBlue" >_Advanced</Label>
</Grid>
</Expander.Header>
<StackPanel>
<TextBlock Margin="10" Text="This is some content within the themed Expander." TextWrapping="Wrap" />
<RadioButton>
<Label>_Roank</Label>
</RadioButton>
<Label Target="{Binding ElementName=nameTextBox1}">_Name:</Label>
<TextBox x:Name="nameTextBox1" />

</StackPanel>
</Expander>
</StackPanel>
</ScrollViewer>
</Window>

I also have the controlTemplate for the ToggleButton

<ControlTemplate x:Key="ExpanderToggleButton" TargetType="ToggleButton">
<Border Padding="{TemplateBinding Control.Padding}">
<Grid Background="#00FFFFFF" SnapsToDevicePixels="False">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="19" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Ellipse Stroke="#FFA9A9A9" Name="circle" Width="19" Height="19" HorizontalAlignment="Center" VerticalAlignment="Center" />
<Path Data="M1,1.5L4.5,5 8,1.5" Stroke="#FF666666" StrokeThickness="2" Name="arrow" HorizontalAlignment="Center" VerticalAlignment="Center" SnapsToDevicePixels="False" />
<ContentPresenter RecognizesAccessKey="True" Content="{TemplateBinding ContentControl.Content}" ContentTemplate="{TemplateBinding ContentControl.ContentTemplate}" ContentStringFormat="{TemplateBinding ContentControl.ContentStringFormat}" Margin="4,0,0,0" HorizontalAlignment="Left" VerticalAlignment="Center" SnapsToDevicePixels="True" Grid.Column="1" />
</Grid>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="ToggleButton.IsChecked">
<Setter Property="Path.Data" TargetName="arrow">
<Setter.Value>
<StreamGeometry>M1,4.5L4.5,1 8,4.5</StreamGeometry>
</Setter.Value>
</Setter>
<Trigger.Value>
<s:Boolean>True</s:Boolean>
</Trigger.Value>
</Trigger>
<Trigger Property="UIElement.IsMouseOver">
<Setter Property="Shape.Stroke" TargetName="circle">
<Setter.Value>
<SolidColorBrush>#FF3C7FB1</SolidColorBrush>
</Setter.Value>
</Setter>
<Setter Property="Shape.Stroke" TargetName="arrow">
<Setter.Value>
<SolidColorBrush>#FF222222</SolidColorBrush>
</Setter.Value>
</Setter>
<Trigger.Value>
<s:Boolean>True</s:Boolean>
</Trigger.Value>
</Trigger>
<Trigger Property="ButtonBase.IsPressed">
<Setter Property="Shape.Stroke" TargetName="circle">
<Setter.Value>
<SolidColorBrush>#FF526C7B</SolidColorBrush>
</Setter.Value>
</Setter>
<Setter Property="Shape.StrokeThickness" TargetName="circle">
<Setter.Value>
<s:Double>1.5</s:Double>
</Setter.Value>
</Setter>
<Setter Property="Shape.Stroke" TargetName="arrow">
<Setter.Value>
<SolidColorBrush>#FF003366</SolidColorBrush>
</Setter.Value>
</Setter>
<Trigger.Value>
<s:Boolean>True</s:Boolean>
</Trigger.Value>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>

Comments (2)

Posted 10 years ago by Ronak Patel
Avatar
I also tried to apply the ControlTemplate to all ToggleButton

<ControlTemplate x:Key="{x:Type ToggleButton}" TargetType="{x:Type ToggleButton}">

Still no luck
Posted 10 years ago by Actipro Software Support - Cleveland, OH, USA
Avatar
Hi Ronak,

Our Shared Library AnimatedExpanderIntro demo contains the full source for a custom style. You would need to do something similar (making a custom style/template for the expander) to achieve the custom look you want, but with using your custom template for a toggle button, etc. By modifying the templates you can make its background whatever you want too, although I believe the Background property controls the backgrounds as-is.


Actipro Software Support

The latest build of this product (v2019.1 build 0684) was released 17 days ago, which was after the last post in this thread.

Add Comment

Please log in to a validated account to post comments.