Posted 15 years ago
by Ronak Patel
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>
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>