The toggle switch style, take colors from the theme, the Dark & White, but I want to have my own background color, and in this case, the style of the switch is not good
so in the first image, the style is the Light, and it's not suitable
In the second, it's dark, baad
I want it like the third "Edited by paint"
any way to do that ?!
You can create your own style for ToggleSwitch by editing the default
style of a ToggleSwitch.
You ll get the default style from Here
Here is the style for ToggleSwitch that i edited and created a
ToggleSwitch like this
<Style x:Key="ToggleSwitchCustomStyle" TargetType="ToggleSwitch">
<Setter Property="Foreground" Value="{StaticResource ToggleSwitchForegroundThemeBrush}"/>
<Setter Property="HorizontalAlignment" Value="Left"/>
<Setter Property="VerticalAlignment" Value="Center"/>
<Setter Property="HorizontalContentAlignment" Value="Left"/>
<Setter Property="FontFamily" Value="{StaticResource ContentControlThemeFontFamily}"/>
<Setter Property="FontWeight" Value="SemiBold"/>
<Setter Property="FontSize" Value="{StaticResource ControlContentThemeFontSize}"/>
<Setter Property="ManipulationMode" Value="None"/>
<Setter Property="MinWidth" Value="154"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ToggleSwitch">
<Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="Disabled">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="HeaderContentPresenter">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ToggleSwitchHeaderDisabledForegroundThemeBrush}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="OffContentPresenter">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ToggleSwitchDisabledForegroundThemeBrush}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="OnContentPresenter">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ToggleSwitchDisabledForegroundThemeBrush}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="InnerBorder">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ToggleSwitchTrackDisabledBackgroundThemeBrush}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="SwitchKnob">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ToggleSwitchThumbDisabledBackgroundThemeBrush}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="SwitchCurtain">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ToggleSwitchCurtainDisabledBackgroundThemeBrush}"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="ToggleStates">
<VisualStateGroup.Transitions>
<VisualTransition x:Name="DraggingToOnTransition" From="Dragging" GeneratedDuration="0" To="On">
<Storyboard>
<RepositionThemeAnimation FromHorizontalOffset="{Binding TemplateSettings.KnobCurrentToOnOffset, RelativeSource={RelativeSource Mode=TemplatedParent}}" TargetName="SwitchKnob"/>
<RepositionThemeAnimation FromHorizontalOffset="{Binding TemplateSettings.CurtainCurrentToOnOffset, RelativeSource={RelativeSource Mode=TemplatedParent}}" TargetName="SwitchCurtain"/>
</Storyboard>
</VisualTransition>
<VisualTransition x:Name="DraggingToOffTransition" From="Dragging" GeneratedDuration="0" To="Off">
<Storyboard>
<RepositionThemeAnimation FromHorizontalOffset="{Binding TemplateSettings.KnobCurrentToOffOffset, RelativeSource={RelativeSource Mode=TemplatedParent}}" TargetName="SwitchKnob"/>
<RepositionThemeAnimation FromHorizontalOffset="{Binding TemplateSettings.CurtainCurrentToOffOffset, RelativeSource={RelativeSource Mode=TemplatedParent}}" TargetName="SwitchCurtain"/>
</Storyboard>
</VisualTransition>
<VisualTransition x:Name="OnToOffTransition" From="On" GeneratedDuration="0" To="Off">
<Storyboard>
<RepositionThemeAnimation FromHorizontalOffset="{Binding TemplateSettings.KnobOnToOffOffset, RelativeSource={RelativeSource Mode=TemplatedParent}}" TargetName="SwitchKnob"/>
<RepositionThemeAnimation FromHorizontalOffset="{Binding TemplateSettings.CurtainOnToOffOffset, RelativeSource={RelativeSource Mode=TemplatedParent}}" TargetName="SwitchCurtain"/>
</Storyboard>
</VisualTransition>
<VisualTransition x:Name="OffToOnTransition" From="Off" GeneratedDuration="0" To="On">
<Storyboard>
<RepositionThemeAnimation FromHorizontalOffset="{Binding TemplateSettings.KnobOffToOnOffset, RelativeSource={RelativeSource Mode=TemplatedParent}}" TargetName="SwitchKnob"/>
<RepositionThemeAnimation FromHorizontalOffset="{Binding TemplateSettings.CurtainOffToOnOffset, RelativeSource={RelativeSource Mode=TemplatedParent}}" TargetName="SwitchCurtain"/>
</Storyboard>
</VisualTransition>
</VisualStateGroup.Transitions>
<VisualState x:Name="Dragging"/>
<VisualState x:Name="Off">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="SwitchKnob">
<DiscreteObjectKeyFrame KeyTime="0" Value="#FF97CD72"/>
</ObjectAnimationUsingKeyFrames>
<DoubleAnimation Duration="0" To="-44" Storyboard.TargetProperty="X" Storyboard.TargetName="CurtainTranslateTransform"/>
</Storyboard>
</VisualState>
<VisualState x:Name="On">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="SwitchKnob">
<DiscreteObjectKeyFrame KeyTime="0" Value="#FFE17163"/>
</ObjectAnimationUsingKeyFrames>
<DoubleAnimation Duration="0" To="0" Storyboard.TargetProperty="X" Storyboard.TargetName="CurtainTranslateTransform"/>
<DoubleAnimation Duration="0" To="38" Storyboard.TargetProperty="X" Storyboard.TargetName="KnobTranslateTransform"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="ContentStates">
<VisualState x:Name="OffContent">
<Storyboard>
<DoubleAnimation Duration="0" To="0.4" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="OffContentPresenter"/>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="IsHitTestVisible" Storyboard.TargetName="OffContentPresenter">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<x:Boolean>True</x:Boolean>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="OnContent">
<Storyboard>
<DoubleAnimation Duration="0" To="0.4" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="OnContentPresenter"/>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="IsHitTestVisible" Storyboard.TargetName="OnContentPresenter">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<x:Boolean>True</x:Boolean>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="FocusStates">
<VisualState x:Name="Focused">
<Storyboard>
<DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="FocusVisualWhite"/>
<DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="FocusVisualBlack"/>
</Storyboard>
</VisualState>
<VisualState x:Name="Unfocused"/>
<VisualState x:Name="PointerFocused"/>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<ContentPresenter x:Name="HeaderContentPresenter" Grid.ColumnSpan="2" ContentTemplate="{TemplateBinding HeaderTemplate}" Content="{TemplateBinding Header}" Foreground="{StaticResource ToggleSwitchHeaderForegroundThemeBrush}" FontWeight="Semilight" Margin="6"/>
<Grid Margin="{TemplateBinding Padding}" Grid.Row="1" Width="163" Height="51">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<ContentPresenter Grid.Column="2" x:Name="OffContentPresenter" ContentTemplate="{TemplateBinding OffContentTemplate}" Content="{TemplateBinding OffContent}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" IsHitTestVisible="False" Margin="6,5,0,16" MinWidth="41" Opacity="10" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
<ContentPresenter x:Name="OnContentPresenter" ContentTemplate="{TemplateBinding OnContentTemplate}" Content="{TemplateBinding OnContent}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" IsHitTestVisible="False" Margin="6,5,0,16" MinWidth="43" Opacity="100" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Width="42"/>
<Grid Background="Transparent" Grid.Column="1">
<Grid x:Name="SwitchKnobBounds" Height="30" Margin="0,5,5,16" Width="57">
<Border x:Name="OuterBorder" CornerRadius="10" BorderBrush="#59FFFFFF" BorderThickness="2" Height="24" Width="57">
<Border BorderBrush="White" BorderThickness="2" CornerRadius="8" Background="#FFD0D4DF" Width="52" Margin="0">
<Border Height="Auto" x:Name="InnerBorder" CornerRadius="10" BorderBrush="{StaticResource ToggleSwitchTrackBorderThemeBrush}" BorderThickness="3" Background="#FFD0D4DF">
<ContentPresenter x:Name="SwitchCurtainBounds">
<ContentPresenter x:Name="SwitchCurtainClip">
<Rectangle x:Name="SwitchCurtain" Fill="Transparent" Width="44">
<Rectangle.RenderTransform>
<TranslateTransform x:Name="CurtainTranslateTransform" X="-44"/>
</Rectangle.RenderTransform>
</Rectangle>
</ContentPresenter>
</ContentPresenter>
</Border>
</Border>
</Border>
<Rectangle x:Name="SwitchKnob" Fill="#FF97CD72" HorizontalAlignment="Left" RadiusX="15" RadiusY="20" StrokeThickness="9" Height="25" Width="25">
<Rectangle.Stroke>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="White"/>
<GradientStop Color="White" Offset="1"/>
<GradientStop Color="#FFCED2DA" Offset="0.53"/>
</LinearGradientBrush>
</Rectangle.Stroke>
<Rectangle.RenderTransform>
<TranslateTransform x:Name="KnobTranslateTransform"/>
</Rectangle.RenderTransform>
</Rectangle>
<Rectangle x:Name="FocusVisualWhite" Margin="-3" Opacity="0" StrokeDashOffset="1.5" StrokeEndLineCap="Square" Stroke="White" StrokeDashArray="1,1"/>
<Rectangle x:Name="FocusVisualBlack" Margin="-3" Opacity="0" StrokeDashOffset="0.5" StrokeEndLineCap="Square" Stroke="{StaticResource FocusVisualBlackStrokeThemeBrush}" StrokeDashArray="1,1"/>
</Grid>
<Thumb x:Name="SwitchThumb">
<Thumb.Template>
<ControlTemplate TargetType="Thumb">
<Rectangle Fill="Transparent"/>
</ControlTemplate>
</Thumb.Template>
</Thumb>
</Grid>
</Grid>
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Create a custom style. Here's a example where the foreground colour is changed to #F09609
<Style x:Key="ToggleSwitchButtonStyle"
TargetType="toolkitPrimitives:ToggleSwitchButton">
<Setter Property="Background" Value="{StaticResource PhoneBackgroundBrush}" />
<Setter Property="IsTabStop" Value="False" />
<Setter Property="SwitchForeground" Value="#F09609" /> <!-- CUSTOM VALUE -->
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="toolkitPrimitives:ToggleSwitchButton">
<Border x:Name="Root"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
CacheMode="BitmapCache"
Opacity="{TemplateBinding Opacity}"
Padding="{TemplateBinding Padding}">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal" />
<VisualState x:Name="Disabled">
<Storyboard>
<ColorAnimation Duration="0"
Storyboard.TargetName="SwitchBottom"
Storyboard.TargetProperty="(Grid.Background).(SolidColorBrush.Color)"
To="{StaticResource PhoneForegroundColor}" />
<ColorAnimation Duration="0"
Storyboard.TargetName="ThumbCenter"
Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)"
To="{StaticResource PhoneForegroundColor}" />
<DoubleAnimation Duration="0"
Storyboard.TargetName="Root"
Storyboard.TargetProperty="Opacity"
To="0.3" />
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="CheckStates">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="0:0:0.05"
To="Unchecked" />
<VisualTransition GeneratedDuration="0:0:0.05"
To="Checked" />
</VisualStateGroup.Transitions>
<VisualState x:Name="Checked">
<Storyboard>
<DoubleAnimation Duration="0"
Storyboard.TargetName="BackgroundTranslation"
Storyboard.TargetProperty="(TranslateTransform.X)"
To="68">
<DoubleAnimation.EasingFunction>
<ExponentialEase EasingMode="EaseOut"
Exponent="15" />
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
<DoubleAnimation Duration="0"
Storyboard.TargetName="ThumbTranslation"
Storyboard.TargetProperty="(TranslateTransform.X)"
To="68">
<DoubleAnimation.EasingFunction>
<ExponentialEase EasingMode="EaseOut"
Exponent="15" />
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
</Storyboard>
</VisualState>
<VisualState x:Name="Dragging" />
<VisualState x:Name="Unchecked">
<Storyboard>
<DoubleAnimation Duration="0"
Storyboard.TargetName="BackgroundTranslation"
Storyboard.TargetProperty="(TranslateTransform.X)"
To="0" />
<DoubleAnimation Duration="0"
Storyboard.TargetName="ThumbTranslation"
Storyboard.TargetProperty="(TranslateTransform.X)"
To="0" />
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid x:Name="SwitchRoot"
Width="136"
Height="95"
Background="Transparent">
<Grid x:Name="SwitchTrack"
Width="88">
<Grid x:Name="SwitchBottom"
Height="32"
Background="{TemplateBinding SwitchForeground}">
<Rectangle x:Name="SwitchBackground"
Width="76"
Height="20"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Fill="{TemplateBinding Background}">
<Rectangle.RenderTransform>
<TranslateTransform x:Name="BackgroundTranslation" />
</Rectangle.RenderTransform>
</Rectangle>
<Border BorderBrush="{StaticResource PhoneForegroundBrush}"
BorderThickness="2">
<Border BorderBrush="{StaticResource PhoneBackgroundBrush}"
BorderThickness="4" />
</Border>
</Grid>
<Border x:Name="SwitchThumb"
Width="28"
Height="36"
Margin="-4,0"
HorizontalAlignment="Left"
BorderBrush="{StaticResource PhoneBackgroundBrush}"
BorderThickness="4,0">
<Border.RenderTransform>
<TranslateTransform x:Name="ThumbTranslation" />
</Border.RenderTransform>
<Border x:Name="ThumbCenter"
Background="White"
BorderBrush="{StaticResource PhoneForegroundBrush}"
BorderThickness="2" />
</Border>
</Grid>
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="ToggleSwitchStyle"
TargetType="toolkit:ToggleSwitch">
<Setter Property="Background" Value="{StaticResource PhoneBackgroundBrush}" />
<Setter Property="FontFamily" Value="{StaticResource PhoneFontFamilyLight}" />
<Setter Property="FontSize" Value="{StaticResource PhoneFontSizeLarge}" />
<Setter Property="Foreground" Value="{StaticResource PhoneForegroundBrush}" />
<Setter Property="IsTabStop" Value="False" />
<Setter Property="HorizontalContentAlignment" Value="Left" />
<Setter Property="SwitchForeground" Value="#F09609" /> <!-- CUSTOM VALUE -->
<Setter Property="VerticalContentAlignment" Value="Top" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="toolkit:ToggleSwitch">
<Border BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
CacheMode="BitmapCache"
Padding="{TemplateBinding Padding}">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal" />
<VisualState x:Name="Disabled">
<Storyboard>
<DoubleAnimation Duration="0"
Storyboard.TargetName="Header"
Storyboard.TargetProperty="Opacity"
To="0.3" />
<DoubleAnimation Duration="0"
Storyboard.TargetName="Content"
Storyboard.TargetProperty="Opacity"
To="0.3" />
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid Margin="12,5,36,42">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<ContentControl x:Name="Header"
Margin="-1,0,0,0"
HorizontalAlignment="Left"
VerticalAlignment="Bottom"
Content="{TemplateBinding Header}"
ContentTemplate="{TemplateBinding HeaderTemplate}"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeNormal}"
Foreground="{StaticResource PhoneBorderBrush}"
IsTabStop="False"
Opacity="{TemplateBinding Opacity}" />
<ContentControl x:Name="Content"
Grid.Row="1"
Margin="-1,1,0,-7"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
Content="{TemplateBinding Content}"
ContentTemplate="{TemplateBinding ContentTemplate}"
IsTabStop="False"
Opacity="{TemplateBinding Opacity}" />
<toolkitPrimitives:ToggleSwitchButton x:Name="Switch"
Grid.RowSpan="2"
Grid.Column="1"
Margin="-22,-29,-24,-28"
VerticalAlignment="Bottom"
Background="{TemplateBinding Background}"
Opacity="{TemplateBinding Opacity}"
Style="{StaticResource ToggleSwitchButtonStyle}"
SwitchForeground="{TemplateBinding SwitchForeground}" />
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Related
I'm new to WPF and Telerik UI for WPF. I'm using telerik's RadTreeview
Somehow, i have added style custom style but i'm unable to added Hovering effect and also selected effect in RadTreeview.
There are many examples, but its main for basic treeview.
Tried adding content template.. it fails to load parent or child node..
Can anyone help me out in this.
Thanks in advance...!!!
Below is my custom style for RadtreeviewItem
<Style x:Key="myItemContainerStyle" TargetType="telerik:RadTreeViewItem">
<Setter Property="Background" Value="#2199e8"/>
<Setter Property="Foreground" Value="#ffffff"/>
<Setter Property="FontWeight" Value="Bold"/>
<Setter Property="Padding" Value="20 5"/>
<Setter Property="FontSize" Value="20"/>
<Setter Property="IsExpanded" Value="False"/>
<Style.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter Property="BorderBrush" Value="#adc6e5"/>
<Setter Property="Foreground" Value="Black" />
<Setter Property="Background" Value="Red" />
</Trigger>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="BorderBrush" Value="LightBlue" />
<Setter Property="Foreground" Value="Black" />
<Setter Property="Background" Value="Red" />
</Trigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsSelected" Value="True"/>
<Condition Property="IsSelectionActive" Value="False"/>
</MultiTrigger.Conditions>
<Setter Property="BorderBrush" Value="LightGray"/>
</MultiTrigger>
</Style.Triggers>
<Style.Resources>
<Style TargetType="Border">
<Setter Property="CornerRadius" Value="2"/>
</Style>
</Style.Resources>
</Style>
Because of the definition of the default ControlTemplate, I am afraid you can't solve this with style triggers. You need to create a complete custom ControlTemplate and modify the MouseOverVisual, SelectionUnfocusedVisual and SelectionVisual Border elements according to your requirements:
<Style x:Key="myItemContainerStyle" TargetType="telerik:RadTreeViewItem">
<Setter Property="Background" Value="#2199e8"/>
<Setter Property="Foreground" Value="#ffffff"/>
<Setter Property="FontWeight" Value="Bold"/>
<Setter Property="Padding" Value="20 5"/>
<Setter Property="FontSize" Value="20"/>
<Setter Property="IsExpanded" Value="False"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="telerik:RadTreeViewItem">
<Grid x:Name="RootElement" UseLayoutRounding="True">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="EditStates">
<VisualState x:Name="Display"/>
<VisualState x:Name="Edit">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="EditHeaderElement" Storyboard.TargetProperty="Visibility" Duration="0">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="Header" Storyboard.TargetProperty="Visibility" Duration="0">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Collapsed</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="Disabled">
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="Opacity" Storyboard.TargetName="Header" To="0.35" Duration="0"/>
<DoubleAnimation Storyboard.TargetProperty="Opacity" Storyboard.TargetName="Image" To="0.35" Duration="0"/>
</Storyboard>
</VisualState>
<VisualState x:Name="MouseOver">
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="Opacity" Storyboard.TargetName="MouseOverVisual" To="1" Duration="0"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="SelectionStates">
<VisualState x:Name="Unselected"/>
<VisualState x:Name="Selected">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="SelectionVisual" Storyboard.TargetProperty="Visibility" Duration="0">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="SelectedUnfocused">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="SelectionUnfocusedVisual" Storyboard.TargetProperty="Visibility" Duration="0">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="LoadingOnDemandStates">
<VisualState x:Name="LoadingOnDemand">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="LoadingVisual" Storyboard.TargetProperty="Visibility" Duration="0">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="Expander" Storyboard.TargetProperty="Visibility" Duration="0">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Collapsed</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<DoubleAnimation Storyboard.TargetName="LoadingVisualAngleTransform" Storyboard.TargetProperty="Angle" From="0" To="359" Duration="0:0:1" RepeatBehavior="Forever"/>
</Storyboard>
</VisualState>
<VisualState x:Name="LoadingOnDemandReverse"/>
</VisualStateGroup>
<VisualStateGroup x:Name="FocusStates">
<VisualState x:Name="Focused">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="FocusVisual" Storyboard.TargetProperty="Visibility" Duration="0">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Unfocused"/>
</VisualStateGroup>
<VisualStateGroup x:Name="ExpandStates">
<VisualState x:Name="Expanded">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ItemsHost" Storyboard.TargetProperty="Visibility" Duration="0">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Collapsed"/>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition/>
</Grid.RowDefinitions>
<Grid x:Name="HeaderRow" Background="Transparent" MinHeight="{TemplateBinding MinHeight}" SnapsToDevicePixels="True">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Border CornerRadius="2"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
Grid.Column="2"
Grid.ColumnSpan="6"/>
<Border x:Name="MouseOverVisual"
Opacity="0"
Grid.ColumnSpan="6"
Grid.Column="2"
Background="Red"
CornerRadius="1"
BorderBrush="LightBlue"
BorderThickness="1">
</Border>
<Border x:Name="SelectionUnfocusedVisual"
Visibility="Collapsed"
Grid.ColumnSpan="6"
Grid.Column="2"
Background="Red"
CornerRadius="1"
BorderBrush="#adc6e5"
BorderThickness="1">
</Border>
<Border x:Name="SelectionVisual"
Visibility="Collapsed"
Grid.ColumnSpan="6"
Grid.Column="2"
Background="Red"
CornerRadius="1"
BorderBrush="#adc6e5"
BorderThickness="1">
</Border>
<StackPanel x:Name="IndentContainer" Orientation="Horizontal">
<Rectangle x:Name="IndentFirstVerticalLine" Width="1" Visibility="Collapsed" Stroke="#FFCCCCCC" VerticalAlignment="Top"/>
</StackPanel>
<Grid Grid.Column="1" x:Name="ListRootContainer" HorizontalAlignment="Center" MinWidth="21">
<Rectangle x:Name="HorizontalLine" Height="1" Stroke="#FFCCCCCC" VerticalAlignment="Center" HorizontalAlignment="Right"/>
<Rectangle x:Name="VerticalLine" Width="1" Stroke="#FFCCCCCC" VerticalAlignment="Top" HorizontalAlignment="Center"/>
<ToggleButton x:Name="Expander" IsTabStop="False" Background="{TemplateBinding Background}"/>
<Grid x:Name="LoadingVisual" RenderTransformOrigin="0.5,0.5" Visibility="Collapsed" VerticalAlignment="Center" HorizontalAlignment="Center">
<Grid.RenderTransform>
<TransformGroup>
<RotateTransform x:Name="LoadingVisualAngleTransform" Angle="0" CenterX="0.5" CenterY="0.5"/>
</TransformGroup>
</Grid.RenderTransform>
<Path Width="10" Height="10" Stretch="Fill" Stroke="{TemplateBinding Foreground}" StrokeThickness="1" StrokeStartLineCap="Round" Data="M1,0 A1,1,90,1,1,0,-1"/>
<Path
Margin="5,-1.5,0,0"
HorizontalAlignment="Left"
VerticalAlignment="Top"
Width="4"
Height="4"
Stretch="Fill"
Fill="{TemplateBinding Foreground}"
Data="M0,-1.1 L0.1,-1 L0,-0.9"
StrokeThickness="1"/>
</Grid>
</Grid>
<Image Grid.Column="3" x:Name="Image" MaxWidth="16" MaxHeight="16" Margin="2" HorizontalAlignment="Center" VerticalAlignment="Center"/>
<Rectangle x:Name="FocusVisual"
Visibility="Collapsed"
Grid.Column="2"
Grid.ColumnSpan="6"
StrokeThickness="1"
IsHitTestVisible="False"
Stroke="#FF000000"
StrokeDashArray="1 2"
RadiusX="3"
RadiusY="3"/>
<Grid x:Name="HeaderContentPanel" Grid.Column="4" Grid.ColumnSpan="2" Background="Transparent">
<ContentControl x:Name="Header"
Content="{TemplateBinding Header}"
ContentTemplate="{TemplateBinding HeaderTemplate}"
Margin="{TemplateBinding Padding}"
IsTabStop="False"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
ContentTemplateSelector="{TemplateBinding HeaderTemplateSelector}"
Foreground="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Foreground, Mode=OneWay}"/>
<ContentPresenter x:Name="EditHeaderElement"
Visibility="Collapsed"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
Margin="{TemplateBinding Padding}"
ContentTemplateSelector="{TemplateBinding HeaderEditTemplateSelector}"
ContentTemplate="{TemplateBinding HeaderEditTemplate}"/>
</Grid>
<CheckBox IsTabStop="False" Grid.Column="2" VerticalAlignment="Center" Margin="5,0,0,0" x:Name="CheckBoxElement" Visibility="Collapsed"/>
<RadioButton IsTabStop="False" Grid.Column="2" Margin="5,0,0,0" VerticalAlignment="Center" x:Name="RadioButtonElement" Visibility="Collapsed"/>
</Grid>
<ItemsPresenter Grid.Row="1" x:Name="ItemsHost" Visibility="Collapsed"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter Property="Foreground" Value="Black" />
</Trigger>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Foreground" Value="Black" />
</Trigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsSelected" Value="True"/>
<Condition Property="IsSelectionActive" Value="False"/>
</MultiTrigger.Conditions>
<Setter Property="BorderBrush" Value="LightGray"/>
</MultiTrigger>
</Style.Triggers>
<Style.Resources>
<Style TargetType="Border">
<Setter Property="CornerRadius" Value="2"/>
</Style>
</Style.Resources>
</Style>
I want to change the background color of checkbox when its checked instead of show an icon but i have no idea of how to do this. I've tried to create a new "Rectangle" with a different background color and call him on VisualState "Checked" but it didnt work.
My code :
<Style TargetType="CheckBox">
<Setter Property="Background" Value="{StaticResource CheckBoxBackgroundBrush}" />
<Setter Property="BorderBrush" Value="{StaticResource CheckBoxBorderBrush}" />
<Setter Property="Foreground" Value="{StaticResource NormalFontBrush}" />
<Setter Property="HorizontalContentAlignment" Value="Left" />
<Setter Property="Padding" Value="6,1,0,0" />
<Setter Property="VerticalContentAlignment" Value="Center" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="CheckBox">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="13" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal" />
<VisualState x:Name="MouseOver">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="MouseOverBorder">
<DiscreteObjectKeyFrame KeyTime="0" Value="Visible" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Pressed">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="PressedBorder">
<DiscreteObjectKeyFrame KeyTime="0" Value="Visible" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Disabled">
<Storyboard>
<DoubleAnimation Duration="0" To=".55" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="contentPresenter" />
<DoubleAnimation Duration="0" To="0.55" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="DisabledVisualElement" />
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="CheckStates">
<VisualState x:Name="Checked">
<Storyboard>
<DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="CheckIcon" />
</Storyboard>
</VisualState>
<VisualState x:Name="Unchecked" />
<VisualState x:Name="Indeterminate">
<Storyboard>
<DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="IndeterminateIcon" />
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="FocusStates">
<VisualState x:Name="Focused">
<Storyboard>
<DoubleAnimation Duration="0" Storyboard.TargetName="FocusVisualElement" Storyboard.TargetProperty="(FrameworkElement.Opacity)" To="1" />
</Storyboard>
</VisualState>
<VisualState x:Name="Unfocused" />
</VisualStateGroup>
<VisualStateGroup x:Name="ValidationStates">
<VisualState x:Name="Valid" />
<VisualState x:Name="InvalidUnfocused">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="ValidationErrorElement">
<DiscreteObjectKeyFrame KeyTime="0" Value="Visible" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="InvalidFocused">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="ValidationErrorElement">
<DiscreteObjectKeyFrame KeyTime="0" Value="Visible" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="IsOpen" Storyboard.TargetName="validationTooltip">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<System:Boolean>True</System:Boolean>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid Height="12" HorizontalAlignment="Left" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Width="12">
<Rectangle x:Name="Background" Fill="{TemplateBinding Background}" Height="12" Stroke="{TemplateBinding BorderBrush}" Width="12" />
<Border x:Name="OuterHighlight" BorderBrush="{StaticResource ControlOuterHighlightBrush}" BorderThickness="0,0,1,1" CornerRadius="1,0,1,0" Margin="1,1,-1,-1" />
<Border x:Name="InnerShadow" BorderBrush="{StaticResource CheckBoxInnerShadowBrush}" BorderThickness="1,1,0,0" CornerRadius="0.5" Margin="1,1,0,0" />
<Border x:Name="MouseOverBorder" BorderBrush="{StaticResource ColorAccentBrush}" BorderThickness="1" Margin="1" Visibility="Collapsed" />
<Border x:Name="PressedBorder" BorderBrush="{StaticResource ColorAccentSubduedBrush}" BorderThickness="1" Margin="1" Visibility="Collapsed" />
<Path x:Name="CheckIcon" Data="M0.5625,5.0625 L1.5,3.9375 L2.9575791,4.9549685 C2.9575791,4.9549685 5.75,1.125 5.75,1.125 C5.75,1.125 6.9375,2 6.9375,2 C6.9375,2 3.186887,7.0000076 3.186887,7.0000076 z" Fill="{StaticResource CheckBoxColorAccentHighlightBrush}" FlowDirection="LeftToRight" Margin="2,2,0,1" Opacity="0"/>
<Rectangle x:Name="IndeterminateIcon" Fill="{StaticResource ColorAccentHighlightBrush}" Height="2" Opacity="0" Width="6" />
<Rectangle x:Name="DisabledVisualElement" Fill="{StaticResource DisabledBrush}" Height="12" Opacity="0" Width="12" />
<Rectangle x:Name="FocusVisualElement" IsHitTestVisible="False" Margin="2" Opacity="0" Stroke="{StaticResource FocusVisualBrush}" StrokeThickness="{StaticResource FocusVisualStrokeThickness}" />
<Border x:Name="ValidationErrorElement" BorderBrush="{StaticResource ErrorBrush}" BorderThickness="1" Margin="1" ToolTipService.PlacementTarget="{Binding RelativeSource={RelativeSource TemplatedParent}}" Visibility="Collapsed">
<ToolTipService.ToolTip>
<ToolTip x:Name="validationTooltip" DataContext="{Binding RelativeSource={RelativeSource TemplatedParent}}" Placement="Right" PlacementTarget="{Binding RelativeSource={RelativeSource TemplatedParent}}" Template="{StaticResource ValidationToolTipTemplate}">
<ToolTip.Triggers>
<EventTrigger RoutedEvent="Canvas.Loaded">
<BeginStoryboard>
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="IsHitTestVisible" Storyboard.TargetName="validationTooltip">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<System:Boolean>true</System:Boolean>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</ToolTip.Triggers>
</ToolTip>
</ToolTipService.ToolTip>
<Grid Background="Transparent" HorizontalAlignment="Right" Height="10" Margin="0,-4,-4,0" VerticalAlignment="Top" Width="10">
<Path Data="M 1,0 L5,0 A 2,2 90 0 1 7,2 L7,6 z" Fill="{StaticResource ErrorBrush}" Margin="0,3,0,0" />
</Grid>
</Border>
</Grid>
<ContentPresenter x:Name="contentPresenter" Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}" Grid.Column="1" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Thanks!
You are on the right track. Create a rectangle (or border) with the desired background color and Opacity 0. In the Checked state, animate the Opacity to 1. Alternatively, set the Visibility to Collapsed and animate visibility similar to how the PressedBorder element is animated in the Pressed state.
Under PressedBorder
<Border x:Name="CheckedBorder" BorderThickness="1" Margin="1" Background="Green" Visibility="Collapsed" />
In VSM:
<VisualState x:Name="Pressed">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="PressedBorder">
<DiscreteObjectKeyFrame KeyTime="0" Value="Visible" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
I want to create an expander with directional arrows to expand in al 4 directions. Like when the expander sits at the top of the page, it would expand down an downpointing arrows would rotate 180 degrees. Now when the expander sits at the left side of the page, it should expand right. But my arrows should point right so the user knows it has to click the expander for it to expand to the right.
At the moment, the arrows are 4 lines pointing down. But they should point right. I tried using a rotatetransform, but I cannot address it because I think I cannot address a key in a template from outside the template, so my doubleanimation to rotate the -45 degrees throws an error saying it cannto find myTransform.
Any ideas on this?
<Style x:Key="ExpanderNoButtonStyle" TargetType="toolkit:Expander">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="toolkit:Expander">
<Grid Background="Transparent">
<vsm:VisualStateManager.VisualStateGroups>
<vsm:VisualStateGroup x:Name="ExpandDirectionStates">
<vsm:VisualStateGroup.Transitions>
<vsm:VisualTransition GeneratedDuration="0"/>
</vsm:VisualStateGroup.Transitions>
<vsm:VisualState x:Name="ExpandLeft">
<Storyboard>
<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="ExpanderButton" Storyboard.TargetProperty="(Grid.Column)">
<DiscreteObjectKeyFrame KeyTime="0" Value="1"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="ExpandSite" Storyboard.TargetProperty="(Grid.Row)">
<DiscreteObjectKeyFrame KeyTime="0" Value="0"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="rd0" Storyboard.TargetProperty="Height">
<DiscreteObjectKeyFrame KeyTime="0" Value="*"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="cd0" Storyboard.TargetProperty="Width">
<DiscreteObjectKeyFrame KeyTime="0" Value="*"/>
</ObjectAnimationUsingKeyFrames>
<DoubleAnimation Storyboard.TargetName="myTransform" Storyboard.TargetProperty="Angle" From="0.0" To="-45.0" Duration="0" />
</Storyboard>
</vsm:VisualState>
</vsm:VisualStateGroup>
</vsm:VisualStateManager.VisualStateGroups>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" x:Name="rd0"/>
<RowDefinition Height="Auto" x:Name="rd1"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" x:Name="cd0"/>
<ColumnDefinition Width="Auto" x:Name="cd1"/>
</Grid.ColumnDefinitions>
<ToggleButton Content="{TemplateBinding Header}" ContentTemplate="{TemplateBinding HeaderTemplate}" FontFamily="{TemplateBinding FontFamily}" FontSize="{TemplateBinding FontSize}" FontStretch="{TemplateBinding FontStretch}" FontStyle="{TemplateBinding FontStyle}" FontWeight="{TemplateBinding FontWeight}" Foreground="{TemplateBinding Foreground}" Grid.Column="0" Grid.Row="0" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" IsChecked="{TemplateBinding IsExpanded}" Margin="1" MinHeight="0" MinWidth="0" x:Name="ExpanderButton" Padding="{TemplateBinding Padding}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}">
<ToggleButton.Template>
<ControlTemplate TargetType="ToggleButton">
<Grid>
<Grid.Background>
<LinearGradientBrush StartPoint="0.5, 0" EndPoint="0.5,1">
<GradientStop Color="white" Offset="0"/>
<GradientStop Color="#FFAAAAAA" Offset="1"/>
</LinearGradientBrush>
</Grid.Background>
<Grid HorizontalAlignment="Center" VerticalAlignment="Center">
<Grid.RenderTransform>
<RotateTransform x:Name="myTransform" Angle="0" CenterX="7.5" CenterY="7.5"/>
</Grid.RenderTransform>
<Ellipse Width="15" Height="15" Fill="#FF888888"/>
<Line Stroke="White" X1="3" Y1="4" X2="7.5" Y2="8" />
<Line Stroke="White" X1="12" Y1="4" X2="7.5" Y2="8" />
<Line Stroke="White" X1="3" Y1="8" X2="7.5" Y2="12" />
<Line Stroke="White" X1="12" Y1="8" X2="7.5" Y2="12" />
</Grid>
</Grid>
</ControlTemplate>
</ToggleButton.Template>
</ToggleButton>
</Grid>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Edit
This is how the good version look like (expands down, see arrows). I now want these arrows to be rotated 45 degrees so i can use it for al for sides.
If I understand what you're asking, I think you can get the answer if you look at the default Expander template. You can do this by creating a new temp project, dropping an Expander on the artboard, and right-clicking it in the Objects list and creating a copy of the template.
You'll see the Expander has VisualStates for ExpandUp, ExpandDown, ExpandLeft and ExpandRight. For the different directions, each state swaps out the Expander ToggleButton for a up/down, left or right template. Each direction also configures the Expander's grid to put the button and the expander area in the right positions.
You need to create left and right ToggleButton templates. That's where you can design the arrows to point the right way. Then in the Expander's left and right VisualStates, point to those templates.
Hopefully that makes sense. I think if you look at the default template it should be clear, but it's been a while since I've done it. I remember they didn't do all the states, though.
Here's my SL example. Our app only needed up and down so there's no left or right, but hopefully it can get you started. The arrows rotate so you can see how that works too.
<ResourceDictionary
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk"
xmlns:toolkit="http://schemas.microsoft.com/winfx/2006/xaml/presentation/toolkit"
xmlns:System="clr-namespace:System;assembly=mscorlib"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="/BasicResources;component/BasicStyles.xaml"/>
<ResourceDictionary Source="/BasicResources;component/BasicResource.xaml"/>
</ResourceDictionary.MergedDictionaries>
<!-- Named fade brush for visual effect on Expander Header right edge -->
<!-- this brush is specified here as it uses resource brushes, so will work properly with high contrast -->
<LinearGradientBrush x:Key="ExpanderHeaderFadeBrush" StartPoint="0,0" EndPoint="1,0">
<GradientStop Color="Transparent"/>
<GradientStop Color="{StaticResource BgColor}" Offset="1"/>
</LinearGradientBrush>
<Style x:Key="ExpanderHeaderBorderStyle" TargetType="Border">
<Setter Property="BorderBrush" Value="{StaticResource BorderRestBrush}"/>
<Setter Property="BorderThickness" Value="0,0.5,0,0"/>
<Setter Property="VerticalAlignment" Value="Bottom"/>
<Setter Property="HorizontalAlignment" Value="Stretch"/>
<Setter Property="Background" Value="{StaticResource MouseDownBgBrush}"/>
</Style>
<ControlTemplate x:Key="ExpanderHeaderCT" TargetType="ContentControl">
<Border
x:Name="bdrControlFooter"
Style="{StaticResource ExpanderHeaderBorderStyle}"
Height="{TemplateBinding Height}">
<Border
x:Name="bdrTopInner"
BorderBrush="{StaticResource WhiteBrush}"
BorderThickness="0,1,0,0">
<ContentPresenter
Cursor="{TemplateBinding Cursor}"
ContentTemplate="{TemplateBinding ContentTemplate}"
Content="{TemplateBinding Content}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
Margin="{TemplateBinding Padding}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
</Border>
</Border>
</ControlTemplate>
<Style x:Key="ExpanderHeaderContentStyle" TargetType="ContentControl">
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
<Setter Property="VerticalContentAlignment" Value="Top" />
<Setter Property="Height" Value="44" />
<Setter Property="Template" Value="{StaticResource ExpanderHeaderCT}" />
</Style>
<!-- down button template -->
<ControlTemplate x:Key="ExpanderDownHeaderTemplate" TargetType="ToggleButton">
<Grid Background="Transparent">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CheckStates">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="0:0:0.1"/>
</VisualStateGroup.Transitions>
<VisualState x:Name="Checked">
<Storyboard>
<DoubleAnimation Duration="0" To="45" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.Rotation)" Storyboard.TargetName="pathTwirly" />
</Storyboard>
</VisualState>
<VisualState x:Name="Unchecked"/>
<VisualState x:Name="Indeterminate"/>
</VisualStateGroup>
<VisualStateGroup x:Name="CommonStates">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="0:0:0.3"/>
</VisualStateGroup.Transitions>
<VisualState x:Name="Normal"/>
<VisualState x:Name="MouseOver">
<Storyboard>
<ColorAnimation Duration="0" To="{StaticResource OrangeColor}" FillBehavior="HoldEnd" Storyboard.TargetProperty="(TextBlock.Foreground).(SolidColorBrush.Color)" Storyboard.TargetName="header" />
<ColorAnimation Duration="0" To="{StaticResource OrangeColor}" FillBehavior="HoldEnd" Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)" Storyboard.TargetName="pathTwirly" />
</Storyboard>
</VisualState>
<VisualState x:Name="Pressed">
</VisualState>
<VisualState x:Name="Disabled"/>
</VisualStateGroup>
<VisualStateGroup x:Name="FocusStates">
<VisualState x:Name="Focused">
<Storyboard>
<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="FocusVisualElement">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Unfocused"/>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid Background="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="58"/>
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<ContentControl x:Name="contentOuter"
Style="{StaticResource ExpanderHeaderContentStyle}"
VerticalContentAlignment="Stretch"
VerticalAlignment="Stretch"
Height="58">
<Grid x:Name="gInnerGrid"
Background="{StaticResource GradientHeaderBgBrush}" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="50"/>
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Path x:Name="pathTwirly"
Data="F1 M 0.000,10.000 L 5.500,4.999 L 0.000,0.000 L 0.000,10.000 Z"
HorizontalAlignment="Left"
VerticalAlignment="Center"
Margin="35,0,0,0"
RenderTransformOrigin="0.5,0.5">
<Path.RenderTransform>
<CompositeTransform/>
</Path.RenderTransform>
<Path.Fill>
<SolidColorBrush x:Name="brushPathFill" Color="{StaticResource BlueColor}" />
</Path.Fill>
</Path>
<Rectangle x:Name="rectFade"
Grid.Column="1"
Width="75"
HorizontalAlignment="Right"
Fill="{StaticResource ExpanderHeaderFadeBrush}"/>
<TextBlock x:Name="header"
Text="{TemplateBinding Content}"
Style="{StaticResource BlueSmallHeadingText}"
Grid.Column="1"
HorizontalAlignment="Stretch"
Margin="4,0,0,0"
VerticalAlignment="Center">
<TextBlock.Foreground>
<SolidColorBrush x:Name="brushHeader" Color="{StaticResource BlueColor}"/>
</TextBlock.Foreground>
</TextBlock>
</Grid>
</ContentControl>
</Grid>
<!-- strokedasharray specified here .. silverlight bug that it won't pick up that style element. works fine in up! -->
<Rectangle x:Name="FocusVisualElement"
Style="{StaticResource LinkRectangleFocusStyle}"
IsHitTestVisible="false"
StrokeThickness="1"
StrokeDashArray="1,3"
Visibility="Collapsed"/>
</Grid>
</ControlTemplate>
<!-- up button template -->
<ControlTemplate x:Key="ExpanderUpHeaderTemplate" TargetType="ToggleButton">
<Grid Background="Transparent">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CheckStates">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="00:00:0.1"/>
</VisualStateGroup.Transitions>
<VisualState x:Name="Checked">
<Storyboard>
<DoubleAnimation Duration="0" To="-45" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.Rotation)" Storyboard.TargetName="pathTwirly" />
</Storyboard>
</VisualState>
<VisualState x:Name="Unchecked"/>
</VisualStateGroup>
<VisualStateGroup x:Name="CommonStates">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="0:0:0.3"/>
</VisualStateGroup.Transitions>
<VisualState x:Name="Normal"/>
<VisualState x:Name="MouseOver">
<Storyboard>
<ColorAnimation Duration="0" To="{StaticResource OrangeColor}" Storyboard.TargetProperty="(TextBlock.Foreground).(SolidColorBrush.Color)" Storyboard.TargetName="header" />
<ColorAnimation Duration="0" To="{StaticResource OrangeColor}" Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)" Storyboard.TargetName="pathTwirly" />
</Storyboard>
</VisualState>
<VisualState x:Name="Pressed"/>
<VisualState x:Name="Disabled"/>
</VisualStateGroup>
<VisualStateGroup x:Name="FocusStates">
<VisualState x:Name="Focused">
<Storyboard>
<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="FocusVisualElement">
<DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Unfocused"/>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid Background="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="58"/>
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<ContentControl x:Name="contentOuter"
Style="{StaticResource ExpanderHeaderContentStyle}"
VerticalContentAlignment="Stretch"
Height="58">
<Grid x:Name="gInnerGrid"
Background="{StaticResource GradientHeaderBgBrush}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="50"/>
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Path x:Name="pathTwirly"
Data="F1 M 0.000,10.000 L 5.500,4.999 L 0.000,0.000 L 0.000,10.000 Z"
HorizontalAlignment="Left"
VerticalAlignment="Center"
Margin="35,0,0,0"
RenderTransformOrigin="0.5,0.5">
<Path.RenderTransform>
<CompositeTransform/>
</Path.RenderTransform>
<Path.Fill>
<SolidColorBrush x:Name="brushPathFill" Color="{StaticResource BlueColor}"/>
</Path.Fill>
</Path>
<Rectangle x:Name="rectFade"
Grid.Column="1"
Width="75"
HorizontalAlignment="Right"
Fill="{StaticResource ExpanderHeaderFadeBrush}"/>
<TextBlock x:Name="header"
Text="{TemplateBinding Content}"
Style="{StaticResource BlueSmallHeadingText}"
Grid.Column="1"
HorizontalAlignment="Stretch"
Margin="4,0,0,0"
VerticalAlignment="Center">
<TextBlock.Foreground>
<SolidColorBrush x:Name="brushHeader" Color="{StaticResource BlueColor}"/>
</TextBlock.Foreground>
</TextBlock>
</Grid>
</ContentControl>
</Grid>
<Rectangle x:Name="MouseOverBorderElement"
Style="{StaticResource RectangleMouseOverStyle}"
Grid.ColumnSpan="2"
Opacity="0"/>
<Rectangle x:Name="FocusVisualElement"
Style="{StaticResource LinkRectangleFocusStyle}"
IsHitTestVisible="false"
Visibility="Collapsed"/>
</Grid>
</ControlTemplate>
<!-- main expander template -->
<ControlTemplate x:Key="ExpanderCT" TargetType="toolkit:Expander">
<Grid Background="Transparent">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="0"/>
</VisualStateGroup.Transitions>
<VisualState x:Name="Normal"/>
<VisualState x:Name="Disabled">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="DisabledVisualElement">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="MouseOver"/>
<VisualState x:Name="Pressed"/>
</VisualStateGroup>
<!-- focus comes from the expander togglebutton -->
<VisualStateGroup x:Name="FocusStates">
<VisualState x:Name="Focused"/>
<VisualState x:Name="Unfocused"/>
</VisualStateGroup>
<VisualStateGroup x:Name="ExpansionStates">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="0"/>
</VisualStateGroup.Transitions>
<VisualState x:Name="Collapsed"/>
<VisualState x:Name="Expanded">
<Storyboard>
<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="ExpandSite">
<DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="ExpandDirectionStates">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="0"/>
</VisualStateGroup.Transitions>
<VisualState x:Name="ExpandDown">
<Storyboard>
<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Height" Storyboard.TargetName="rd1">
<DiscreteObjectKeyFrame KeyTime="0" Value="*"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Width" Storyboard.TargetName="cd0">
<DiscreteObjectKeyFrame KeyTime="0" Value="*"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="ExpandUp">
<Storyboard>
<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Template" Storyboard.TargetName="ExpanderButton">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ExpanderUpHeaderTemplate}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="(Grid.Row)" Storyboard.TargetName="ExpanderButton">
<DiscreteObjectKeyFrame KeyTime="0" Value="1"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="(Grid.Row)" Storyboard.TargetName="ExpandSite">
<DiscreteObjectKeyFrame KeyTime="0" Value="0"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Height" Storyboard.TargetName="rd0">
<DiscreteObjectKeyFrame KeyTime="0" Value="*"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Width" Storyboard.TargetName="cd0">
<DiscreteObjectKeyFrame KeyTime="0" Value="*"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="ExpandLeft" />
<VisualState x:Name="ExpandRight" />
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<!-- begin layout -->
<Border x:Name="Background"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
Background="{TemplateBinding Background}">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition x:Name="cd0" Width="Auto"/>
<ColumnDefinition x:Name="cd1" Width="Auto"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition x:Name="rd0" Height="Auto"/>
<RowDefinition x:Name="rd1" Height="Auto"/>
</Grid.RowDefinitions>
<ToggleButton x:Name="ExpanderButton"
ContentTemplate="{TemplateBinding HeaderTemplate}"
Content="{TemplateBinding Header}"
Grid.Column="0"
Foreground="{TemplateBinding Foreground}"
FontWeight="{TemplateBinding FontWeight}"
FontStyle="{TemplateBinding FontStyle}"
FontStretch="{TemplateBinding FontStretch}"
FontSize="{TemplateBinding FontSize}"
FontFamily="{TemplateBinding FontFamily}"
HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
IsChecked="{TemplateBinding IsExpanded}"
Margin="0"
MinWidth="0"
MinHeight="0"
Padding="{TemplateBinding Padding}"
Grid.Row="0"
Template="{StaticResource ExpanderDownHeaderTemplate}"
VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/>
<ContentControl x:Name="ExpandSite"
ContentTemplate="{TemplateBinding ContentTemplate}"
Content="{TemplateBinding Content}"
Grid.Column="0"
Foreground="{TemplateBinding Foreground}"
FontWeight="{TemplateBinding FontWeight}"
FontStyle="{TemplateBinding FontStyle}"
FontStretch="{TemplateBinding FontStretch}"
FontSize="{TemplateBinding FontSize}"
FontFamily="{TemplateBinding FontFamily}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
Margin="{TemplateBinding Padding}"
Grid.Row="1"
Visibility="Collapsed"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/>
</Grid>
</Border>
<Border x:Name="DisabledVisualElement"
Style="{StaticResource BorderDisabledStyle}"
IsHitTestVisible="false"
Visibility="Collapsed"/>
<Border x:Name="FocusVisualElement"
Style="{StaticResource BorderFocusStyle}"
IsHitTestVisible="false"
Visibility="Collapsed"/>
</Grid>
</ControlTemplate>
<!-- styles the expander header .. the top line and background color -->
<Style TargetType="toolkit:Expander">
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
<Setter Property="VerticalContentAlignment" Value="Stretch"/>
<Setter Property="Template" Value="{StaticResource ExpanderCT}"/>
</Style>
I've created 4 possible states and added them to the grid's resources. This way, when a certain direction is called, it'll go fetch the appropriate template. So the arrows are unique for every template, there's no need to rotate them anymore.
here's the xaml for the 4 templates, hope someone can use them
<ControlTemplate x:Key="ExpanderDownHeaderTemplate" TargetType="ToggleButton">
<Grid Background="Transparent">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CheckStates">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="00:00:00"/>
</VisualStateGroup.Transitions>
<VisualState x:Name="Checked">
<Storyboard>
<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Data" Storyboard.TargetName="arrow">
<DiscreteObjectKeyFrame KeyTime="0" Value="M 1,1.5 L 4.5,5 L 8,1.5"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Unchecked"/>
</VisualStateGroup>
<VisualStateGroup x:Name="CommonStates">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="0"/>
<VisualTransition GeneratedDuration="00:00:00.1" To="MouseOver"/>
<VisualTransition GeneratedDuration="00:00:00.1" To="Pressed"/>
</VisualStateGroup.Transitions>
<VisualState x:Name="Normal"/>
<VisualState x:Name="MouseOver">
<Storyboard>
<DoubleAnimation BeginTime="0" To="1" Storyboard.TargetProperty="(Border.Opacity)" Storyboard.TargetName="brdExpander"/>
</Storyboard>
</VisualState>
<VisualState x:Name="Pressed" />
</VisualStateGroup>
<VisualStateGroup x:Name="FocusStates">
<VisualState x:Name="Focused" />
<VisualState x:Name="Unfocused"/>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Border Name="brdExpander" Padding="{TemplateBinding Padding}" CornerRadius="1" Opacity="0.7" Background="{StaticResource ToggleButtonBackground}">
<StackPanel HorizontalAlignment="Center" VerticalAlignment="Center" Orientation="Horizontal">
<Path x:Name="arrow" Data="M 1,4.5 L 4.5,1 L 8,4.5" HorizontalAlignment="Center" Stroke="{StaticResource ItemYellow}" StrokeThickness="2" VerticalAlignment="Center"/>
<ContentPresenter ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" Grid.Column="1" HorizontalAlignment="Center" Margin="10,0,0,0" VerticalAlignment="Center"/>
</StackPanel>
</Border>
</Grid>
</ControlTemplate>
<ControlTemplate x:Key="ExpanderUpHeaderTemplate" TargetType="ToggleButton">
<Grid Background="Transparent">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CheckStates">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="00:00:00"/>
</VisualStateGroup.Transitions>
<VisualState x:Name="Checked">
<Storyboard>
<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Data" Storyboard.TargetName="arrow">
<DiscreteObjectKeyFrame KeyTime="0" Value="M 1,5 L 4.5,1.5 L 8,5"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Unchecked"/>
</VisualStateGroup>
<VisualStateGroup x:Name="CommonStates">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="0"/>
<VisualTransition GeneratedDuration="00:00:00.1" To="MouseOver"/>
<VisualTransition GeneratedDuration="00:00:00.1" To="Pressed"/>
</VisualStateGroup.Transitions>
<VisualState x:Name="Normal"/>
<VisualState x:Name="MouseOver">
<Storyboard>
<DoubleAnimation BeginTime="0" To="1" Storyboard.TargetProperty="(Border.Opacity)" Storyboard.TargetName="brdExpander"/>
</Storyboard>
</VisualState>
<VisualState x:Name="Pressed" />
</VisualStateGroup>
<VisualStateGroup x:Name="FocusStates">
<VisualState x:Name="Focused" />
<VisualState x:Name="Unfocused"/>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Border Name="brdExpander" Padding="{TemplateBinding Padding}" CornerRadius="1" Opacity="0.7" Background="{StaticResource ToggleButtonBackground}">
<StackPanel HorizontalAlignment="Center" VerticalAlignment="Center" Orientation="Horizontal">
<Path x:Name="arrow" Data="M 1,1 L 4.5,4.5 L 8,1" HorizontalAlignment="Center" Stroke="{StaticResource ItemYellow}" StrokeThickness="2" VerticalAlignment="Center"/>
<ContentPresenter x:Name="header" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" Grid.Column="1" HorizontalAlignment="Stretch" Margin="10,0,0,0" VerticalAlignment="Center"/>
</StackPanel>
</Border>
</Grid>
</ControlTemplate>
<ControlTemplate x:Key="ExpanderLeftHeaderTemplate" TargetType="ToggleButton">
<Grid Background="Transparent">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CheckStates">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="00:00:00"/>
</VisualStateGroup.Transitions>
<VisualState x:Name="Checked">
<Storyboard>
<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Data" Storyboard.TargetName="arrow">
<DiscreteObjectKeyFrame KeyTime="0" Value="M 4.5,1 L 1,4.5 L 4.5,8"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Unchecked"/>
</VisualStateGroup>
<VisualStateGroup x:Name="CommonStates">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="0"/>
<VisualTransition GeneratedDuration="00:00:00.1" To="MouseOver"/>
<VisualTransition GeneratedDuration="00:00:00.1" To="Pressed"/>
</VisualStateGroup.Transitions>
<VisualState x:Name="Normal"/>
<VisualState x:Name="MouseOver">
<Storyboard>
<DoubleAnimation BeginTime="0" To="1" Storyboard.TargetProperty="(Border.Opacity)" Storyboard.TargetName="brdExpander"/>
</Storyboard>
</VisualState>
<VisualState x:Name="Pressed" />
</VisualStateGroup>
<VisualStateGroup x:Name="FocusStates">
<VisualState x:Name="Focused" />
<VisualState x:Name="Unfocused"/>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Border Name="brdExpander" Padding="{TemplateBinding Padding}" CornerRadius="1" Opacity="0.7" Background="{StaticResource ToggleButtonBackground}">
<StackPanel HorizontalAlignment="Center" VerticalAlignment="Center" >
<Path x:Name="arrow" Data="M 1,1 L 4.5,4.5 L 1,8" HorizontalAlignment="Center" Stroke="{StaticResource ItemYellow}" StrokeThickness="2" VerticalAlignment="Center"/>
<layoutToolkit:LayoutTransformer>
<layoutToolkit:LayoutTransformer.LayoutTransform>
<TransformGroup>
<RotateTransform Angle="270"/>
</TransformGroup>
</layoutToolkit:LayoutTransformer.LayoutTransform>
<ContentPresenter x:Name="header" ContentTemplate="{TemplateBinding ContentTemplate}" HorizontalAlignment="Center" Margin="0,0,10,0" Grid.Row="1" VerticalAlignment="Stretch" >
<!-- Content="{TemplateBinding Content}"-->
<ContentPresenter.Content>
<TextBlock Text="{TemplateBinding Content}" Foreground="{TemplateBinding Foreground}"/>
</ContentPresenter.Content>
</ContentPresenter>
</layoutToolkit:LayoutTransformer>
</StackPanel>
</Border>
</Grid>
</ControlTemplate>
<ControlTemplate x:Key="ExpanderRightHeaderTemplate" TargetType="ToggleButton">
<Grid Background="Transparent">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CheckStates">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="00:00:00"/>
</VisualStateGroup.Transitions>
<VisualState x:Name="Checked">
<Storyboard>
<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Data" Storyboard.TargetName="arrow">
<DiscreteObjectKeyFrame KeyTime="0" Value="M 1,1 L 4.5,4.5 L 1,8"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Unchecked"/>
</VisualStateGroup>
<VisualStateGroup x:Name="CommonStates">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="0"/>
<VisualTransition GeneratedDuration="00:00:00.1" To="MouseOver"/>
<VisualTransition GeneratedDuration="00:00:00.1" To="Pressed"/>
</VisualStateGroup.Transitions>
<VisualState x:Name="Normal"/>
<VisualState x:Name="MouseOver">
<Storyboard>
<DoubleAnimation BeginTime="0" To="1" Storyboard.TargetProperty="(Border.Opacity)" Storyboard.TargetName="brdExpander"/>
</Storyboard>
</VisualState>
<VisualState x:Name="Pressed" />
</VisualStateGroup>
<VisualStateGroup x:Name="FocusStates">
<VisualState x:Name="Focused" />
<VisualState x:Name="Unfocused"/>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Border Name="brdExpander" Padding="{TemplateBinding Padding}" CornerRadius="1" Opacity="0.7" Background="{StaticResource ToggleButtonBackground}">
<StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">
<Path x:Name="arrow" Data="M 4.5,1 L 1,4.5 L 4.5,8" HorizontalAlignment="Center" Stroke="{StaticResource ItemYellow}" StrokeThickness="2" VerticalAlignment="Center"/>
<layoutToolkit:LayoutTransformer>
<layoutToolkit:LayoutTransformer.LayoutTransform>
<TransformGroup>
<RotateTransform Angle="90"/>
</TransformGroup>
</layoutToolkit:LayoutTransformer.LayoutTransform>
<ContentPresenter x:Name="header" ContentTemplate="{TemplateBinding ContentTemplate}" HorizontalAlignment="Center" Margin="10,0,0,0" Grid.Row="1" VerticalAlignment="Stretch">
<ContentPresenter.Content>
<TextBlock Text="{TemplateBinding Content}" Foreground="{TemplateBinding Foreground}"/>
</ContentPresenter.Content>
</ContentPresenter>
</layoutToolkit:LayoutTransformer>
</StackPanel>
</Border>
</Grid>
</ControlTemplate>
My individual ListBox has two different ItemTemplates - which gone be chosen by a TemplateSelector.
This works fine and i have two different ItemTmplates shown up on the screen.
But what i dont have instead is a Selection. So i can't select an Item in the ListBox. With the Keyboard it works and you can select one.
Here is what my ContainserStyle looks like:
<Style x:Key="ListBoxItemStyleMain" TargetType="ListBoxItem">
<Setter Property="Padding" Value="5" />
<Setter Property="HorizontalContentAlignment" Value="Left" />
<Setter Property="VerticalContentAlignment" Value="Top" />
<Setter Property="Background" Value="Transparent" />
<Setter Property="BorderThickness" Value="1" />
<Setter Property="TabNavigation" Value="Local" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListBoxItem">
<Grid x:Name="grid" Background="{TemplateBinding Background}" RenderTransformOrigin="0.5,0.5">
<Grid.RenderTransform>
<CompositeTransform />
</Grid.RenderTransform>
<Grid.ColumnDefinitions>
<ColumnDefinition />
</Grid.ColumnDefinitions>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal" />
<VisualState x:Name="MouseOver">
<Storyboard>
<DoubleAnimation Storyboard.TargetName="fillColor" Storyboard.TargetProperty="Opacity" Duration="0" To=".35" />
<DoubleAnimation Duration="0:0:0.3" To="1.1" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleX)" Storyboard.TargetName="contentPresenter" d:IsOptimized="True"/>
<DoubleAnimation Duration="0:0:0.3" To="1.1" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleY)" Storyboard.TargetName="contentPresenter" d:IsOptimized="True"/>
</Storyboard>
</VisualState>
<VisualState x:Name="Disabled">
<Storyboard>
<DoubleAnimation Storyboard.TargetName="contentPresenter" Storyboard.TargetProperty="Opacity" Duration="0" To=".55" />
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="SelectionStates">
<VisualState x:Name="Unselected"/>
<VisualState x:Name="Selected">
<Storyboard>
<DoubleAnimation Duration="0" To=".75" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="fillColor2"/>
</Storyboard>
</VisualState>
<VisualState x:Name="SelectedUnfocused"/>
</VisualStateGroup>
<VisualStateGroup x:Name="FocusStates">
<VisualState x:Name="Focused">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="FocusVisualElement" Storyboard.TargetProperty="Visibility" Duration="0">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Unfocused" />
</VisualStateGroup>
<VisualStateGroup x:Name="LayoutStates">
<VisualState x:Name="AfterLoaded"/>
<VisualState x:Name="BeforeLoaded"/>
<VisualState x:Name="BeforeUnloaded"/>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Rectangle x:Name="fillColor" Fill="{StaticResource SolidBrushSmarxGreen20}" IsHitTestVisible="False" Opacity="0" RadiusX="1" RadiusY="1" d:LayoutOverrides="GridBox" />
<Rectangle x:Name="fillColor2" Fill="{StaticResource SolidBrushSmarxGreen60}" IsHitTestVisible="False" Opacity="0" RadiusX="1" RadiusY="1" d:LayoutOverrides="GridBox" />
<ContentPresenter x:Name="contentPresenter" RenderTransformOrigin="0.5,0.5" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}">
<ContentPresenter.RenderTransform>
<CompositeTransform />
</ContentPresenter.RenderTransform>
</ContentPresenter>
<Rectangle x:Name="FocusVisualElement" RadiusX="1" RadiusY="1" Stroke="{StaticResource SolidBrushSmarxGreen60}" StrokeThickness="1" Visibility="Collapsed" d:LayoutOverrides="GridBox"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
So - as you can see, i have a Selected-State defined.
It's all default styling and Templating - except for the colors.
Thanks in any advice :)
regards
Mike
Found it out - it's really unclear why i don't get a selection. Because when i insert some Items with Content (which i haven't got at the moment), then the selection works fine.
The Selection State works anyway - but you have to click precisely on the Focus Border :)
I have a Silverlight 4 application. This application uses an Accordian. I am trying to style this accordian. In an attempt to do this, I have the following:
<ControlTemplate TargetType="toolkitPrimitives:AccordionButton" x:Key="myAccordianHeader">
<Grid Background="Transparent">
<vsm:VisualStateManager.VisualStateGroups>
<!-- ExpansionStates -->
<vsm:VisualStateGroup x:Name="ExpansionStates">
<vsm:VisualStateGroup.Transitions>
<vsm:VisualTransition GeneratedDuration="0"/>
</vsm:VisualStateGroup.Transitions>
<vsm:VisualState x:Name="Collapsed">
<Storyboard>
</Storyboard>
</vsm:VisualState>
<vsm:VisualState x:Name="Expanded">
<Storyboard>
<Storyboard>
<ColorAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0030000" Storyboard.TargetName="background" Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)">
<SplineColorKeyFrame KeyTime="00:00:00" Value="Transparent" />
</ColorAnimationUsingKeyFrames>
</Storyboard>
</Storyboard>
</vsm:VisualState>
</vsm:VisualStateGroup>
<!-- CheckStates -->
<vsm:VisualStateGroup x:Name="CheckStates">
<vsm:VisualStateGroup.Transitions>
<vsm:VisualTransition GeneratedDuration="00:00:00"/>
</vsm:VisualStateGroup.Transitions>
<vsm:VisualState x:Name="Checked">
</vsm:VisualState>
<vsm:VisualState x:Name="Unchecked"/>
</vsm:VisualStateGroup>
<!-- CommonStates -->
<vsm:VisualStateGroup x:Name="CommonStates">
<vsm:VisualStateGroup.Transitions>
<vsm:VisualTransition GeneratedDuration="0"/>
<vsm:VisualTransition GeneratedDuration="00:00:00.1" From="MouseOver" To="Normal"/>
<vsm:VisualTransition GeneratedDuration="00:00:00.1" To="MouseOver"/>
<vsm:VisualTransition GeneratedDuration="00:00:00.1" To="Pressed"/>
</vsm:VisualStateGroup.Transitions>
<vsm:VisualState x:Name="Normal"/>
<vsm:VisualState x:Name="MouseOver">
<Storyboard>
<ColorAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0030000" Storyboard.TargetName="MouseOverBackground" Storyboard.TargetProperty="(Grid.Background).(SolidColorBrush.Color)">
<SplineColorKeyFrame KeyTime="00:00:00" Value="Transparent"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
</vsm:VisualState>
<vsm:VisualState x:Name="Pressed">
<Storyboard>
</Storyboard>
</vsm:VisualState>
<vsm:VisualState x:Name="Disabled">
<Storyboard>
</Storyboard>
</vsm:VisualState>
</vsm:VisualStateGroup>
<!-- FocusStates -->
<vsm:VisualStateGroup x:Name="FocusStates">
<vsm:VisualState x:Name="Focused">
<Storyboard>
<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="FocusVisualElement" Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</vsm:VisualState>
<vsm:VisualState x:Name="Unfocused"/>
</vsm:VisualStateGroup>
</vsm:VisualStateManager.VisualStateGroups>
<Border x:Name="MouseOverBackground" Background="Transparent" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}">
<Border x:Name="background" Background="Transparent">
<Grid Background="Transparent" Margin="{TemplateBinding Padding}">
<ContentControl x:Name="header" Grid.Column="1" Grid.Row="0" Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}" Foreground="{TemplateBinding Foreground}" FontFamily="{TemplateBinding FontFamily}" FontSize="{TemplateBinding FontSize}" FontStretch="{TemplateBinding FontStretch}" FontStyle="{TemplateBinding FontStyle}" FontWeight="{TemplateBinding FontWeight}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
</ContentControl>
</Grid>
</Border>
</Border>
<Rectangle x:Name="FocusVisualElement" IsHitTestVisible="false" Stroke="Green" StrokeDashArray="1 2" StrokeThickness="1" Visibility="Collapsed"/>
</Grid>
</ControlTemplate>
<ControlTemplate TargetType="toolkit:AccordionItem" x:Key="myAccordianItem">
<Grid Background="Transparent">
<vsm:VisualStateManager.VisualStateGroups>
<!-- CommonState -->
<vsm:VisualStateGroup x:Name="CommonStates">
<vsm:VisualStateGroup.Transitions>
<vsm:VisualTransition GeneratedDuration="0"/>
</vsm:VisualStateGroup.Transitions>
<vsm:VisualState x:Name="Normal"/>
<vsm:VisualState x:Name="Disabled">
<Storyboard>
<DoubleAnimation Duration="0" Storyboard.TargetName="DisabledVisualElement" Storyboard.TargetProperty="(UIElement.Opacity)" To="1"/>
</Storyboard>
</vsm:VisualState>
</vsm:VisualStateGroup>
<!-- FocusStates -->
<vsm:VisualStateGroup x:Name="FocusStates">
<vsm:VisualState x:Name="Focused">
<Storyboard>
<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="FocusVisualElement" Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</vsm:VisualState>
<!-- Unfocused -->
<vsm:VisualState x:Name="Unfocused"/>
</vsm:VisualStateGroup>
<!-- ExpansionStates -->
<vsm:VisualStateGroup x:Name="ExpansionStates">
<vsm:VisualStateGroup.Transitions>
<vsm:VisualTransition GeneratedDuration="0"/>
</vsm:VisualStateGroup.Transitions>
<vsm:VisualState x:Name="Collapsed">
<Storyboard>
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="ExpandSite" Storyboard.TargetProperty="(ExpandableContentControl.Percentage)">
<SplineDoubleKeyFrame KeyTime="00:00:00.3" KeySpline="0.2,0,0,1" Value="0"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</vsm:VisualState>
<vsm:VisualState x:Name="Expanded">
<Storyboard>
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="ExpandSite" Storyboard.TargetProperty="(ExpandableContentControl.Percentage)">
<SplineDoubleKeyFrame KeyTime="00:00:00.3" KeySpline="0.2,0,0,1" Value="1"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</vsm:VisualState>
</vsm:VisualStateGroup>
<!-- ExpansionStates -->
<vsm:VisualStateGroup x:Name="LockedStates">
<vsm:VisualStateGroup.Transitions>
<vsm:VisualTransition GeneratedDuration="0"/>
</vsm:VisualStateGroup.Transitions>
<vsm:VisualState x:Name="Locked">
<Storyboard>
<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="ExpanderButton" Storyboard.TargetProperty="IsEnabled">
<DiscreteObjectKeyFrame KeyTime="0" Value="False"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</vsm:VisualState>
<vsm:VisualState x:Name="Unlocked">
<Storyboard>
<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="ExpanderButton" Storyboard.TargetProperty="IsEnabled">
<DiscreteObjectKeyFrame KeyTime="0" Value="True"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</vsm:VisualState>
</vsm:VisualStateGroup>
</vsm:VisualStateManager.VisualStateGroups>
<Border x:Name="Background" Padding="{TemplateBinding Padding}" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="4">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<toolkitPrimitives:AccordionButton Template="{StaticResource myItemHeader}" x:Name="ExpanderButton" Content="{TemplateBinding Header}" ContentTemplate="{TemplateBinding HeaderTemplate}" IsChecked="{TemplateBinding IsSelected}" Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="0" Padding="4" Margin="0" FontFamily="{TemplateBinding FontFamily}" FontSize="14" FontStretch="{TemplateBinding FontStretch}" FontStyle="{TemplateBinding FontStyle}" FontWeight="Bold" Foreground="#FF000000" HorizontalContentAlignment="Left" VerticalContentAlignment="Center"/>
<toolkitPrimitives:ExpandableContentControl x:Name="ExpandSite" Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="1" Percentage="0" Background="#FFD3DEEF" RevealMode="{TemplateBinding ExpandDirection}" Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}" Padding="2" Margin="1" FontFamily="{TemplateBinding FontFamily}" FontSize="12" FontStretch="{TemplateBinding FontStretch}" FontStyle="{TemplateBinding FontStyle}" FontWeight="{TemplateBinding FontWeight}" Foreground="DarkGray" HorizontalAlignment="Stretch" HorizontalContentAlignment="Left" VerticalAlignment="Stretch" VerticalContentAlignment="Top"/>
</Grid>
</Border>
<Border x:Name="DisabledVisualElement" IsHitTestVisible="false" Opacity="0" Background="#A5FFFFFF" CornerRadius="3"/>
<Border x:Name="FocusVisualElement" IsHitTestVisible="false" Visibility="Collapsed" BorderThickness="1" CornerRadius="3">
<Border.BorderBrush>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FFA3AEB9"/>
<GradientStop Color="#FF8399A9" Offset="0.375"/>
<GradientStop Color="#FF718597" Offset="0.375"/>
<GradientStop Color="#FF617584" Offset="1"/>
</LinearGradientBrush>
</Border.BorderBrush>
</Border>
</Grid>
</ControlTemplate>
<Style x:Key="myItemStyle" TargetType="toolkit:AccordionItem">
<Setter Property="HeaderTemplate">
<Setter.Value>
<DataTemplate>
<TextBlock Text="Text goes here" />
</DataTemplate>
</Setter.Value>
</Setter>
</Style>
<toolkit:Accordion x:Name="myAccordian"
ItemsSource="{Binding MyItems}"
ItemContainerStyle="{StaticResource myItemStyle}">
I want my entire Accordian style defined as a reusable template. I need to use the styles I've created in the ControlTemplate elements. My challenge is, I don't know how to get those ControlTemplates to be used by my Style. Can someone show how to integrate my ControlTemplate into the Style? Thanks!
you just need to set the control template in a style, e.g.
<Style x:Key="myItemStyle" TargetType="toolkit:AccordionItem">
<Setter Property="HeaderTemplate">
<Setter.Value>
<DataTemplate>
<TextBlock Text="Text goes here" />
</DataTemplate>
</Setter.Value>
</Setter>
**<Setter Property="Template" Value="{StaticResource myAccordianItem}"/>**
</Style>
<Style x:Key="myAccordionButtonStyle" TargetType="toolkit:AccordionButton">
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="Background" Value="White"/>
<Setter Property="HorizontalAlignment" Value="Stretch"/>
<Setter Property="VerticalAlignment" Value="Stretch"/>
<Setter Property="HorizontalContentAlignment" Value="Center"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="IsTabStop" Value="True"/>
<Setter Property="TabNavigation" Value="Once"/>
**<Setter Property="Template" Value="{StaticResource myAccordianHeader}"/>**
</Style>
and in the Accordion control, specify these styles above
<toolkit:Accordion x:Name="myAccordian" ItemsSource="{Binding MyItems}" ItemContainerStyle="{StaticResource myItemStyle}" AccordionButtonStyle="{StaticResource myAccordionButtonStyle}" />
I hope this helps. :)