Apply Windows 7 like style to Expander

Navigation for WPF Forum

Posted 14 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 14 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 14 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 (v24.1.2) was released 2 days ago, which was after the last post in this thread.

Add Comment

Please log in to a validated account to post comments.