
This is about the RadSplitButton in UI for WPF. I use the Windows 8 theme.
RadSplitButton closed:
RadSplitButton opened:
I want to change that blue color (#25A0DA) to something that's not associated with the theme. I already change the colors of the Windows8Palette and the blue default color seems to be the AccentColor - I don't want to change the AccentColor, though (I set that to something different, which looks great everywhere except the RadSplitButton).
I already added the control template for RadSplitButton and it does work - when I change values I see those in the UI. But which value do I have to change to change the color when RadSplitButton was opened? I couldn't find it.
The XAML sample from the screenshots:
<telerik:RadSplitButton Content="This is a RadSplitButton" HorizontalAlignment="Left" Margin="80,70,0,0" VerticalAlignment="Top">
<telerik:RadSplitButton.DropDownContent>
<StackPanel>
<telerik:RadButton Content="This is a RadButton" HorizontalContentAlignment="Left"/>
<telerik:RadButton Content="This is a RadButton (2)" HorizontalContentAlignment="Left"/>
</StackPanel>
</telerik:RadSplitButton.DropDownContent>
</telerik:RadSplitButton>
1 Answer, 1 is accepted
Hello Volker,
The RadSplitButton control is represented by a RadButton and a RadToggleButton. They are present in the default ControlTemplate of the RadSplitButton and have x:Name="ButtonPart"(for RadButton) and x:Name="DropDownPart" (for RadToggleButton).
With this in mind, for the RadButton's background when the RadSplitButton's drop-down is opened, locate the VisualState instance with x:Name="OpenOrChecked" and modify the ObjectAnimationUsingKeyFrames instances in it.
The following snippet shows this suggestion's implementation:
<SolidColorBrush x:Key="RedBrush" Color="Red"/>
<VisualState x:Name="OpenOrChecked">
<Storyboard>
<!--Modify if needed for the BorderBrush color-->
<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="ButtonPart" Storyboard.TargetProperty="BorderBrush">
<DiscreteObjectKeyFrame KeyTime="0" Value="{telerik:Windows8Resource ResourceKey=AccentBrush}"/>
</ObjectAnimationUsingKeyFrames>
<!--Modify if needed for the Foreground color-->
<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="ButtonPart" Storyboard.TargetProperty="Foreground">
<DiscreteObjectKeyFrame KeyTime="0" Value="{telerik:Windows8Resource ResourceKey=MainBrush}"/>
</ObjectAnimationUsingKeyFrames>
<!--The following is responsible for the background color of the ButtonPart when the drop-down is opened-->
<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="ButtonPart" Storyboard.TargetProperty="Background">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource RedBrush}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ButtonPart" Storyboard.TargetProperty="IsBackgroundVisible">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<sys:Boolean>True</sys:Boolean>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<DoubleAnimation Duration="0" Storyboard.TargetName="CommonStatesWrapper" Storyboard.TargetProperty="Opacity" To="0"/>
</Storyboard>
</VisualState>
For the RadToggleButton control, extract the default Style with x:Name="RadSplitButtonToggleButtonStyle" and inside the default ControlTemplate, locate the Border with x:Name="CheckedVisual". Then set its Background color to the desired color. Finally, set the extracted Style to the TogglePartStyle property of the RadSplitButton element.
With this in mind, if the used assemblies version is Xaml, you can use the following ResourceDictionary:
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="/Telerik.Windows.Controls;component/Themes/GenericWindows8.xaml" />
</ResourceDictionary.MergedDictionaries>
<SolidColorBrush x:Key="RedBackgroundBrush" Color="Red"/>
<SolidColorBrush x:Key="DarkRedBorderBrush" Color="DarkRed"/>
<Style x:Key="CustomRadSplitButtonToggleButtonStyle" BasedOn="{StaticResource RadToggleButtonStyle}" TargetType="telerik:RadToggleButton">
<Setter Property="Foreground" Value="{telerik:Windows8Resource ResourceKey=StrongBrush}"/>
<Setter Property="Padding" Value="0"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="telerik:RadToggleButton">
<Grid SnapsToDevicePixels="True">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="MouseOver">
<Storyboard>
<DoubleAnimation Duration="0" To="0.15" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="OuterMouseOverBorder"/>
</Storyboard>
</VisualState>
<VisualState x:Name="Pressed">
<Storyboard>
<DoubleAnimation Duration="0" Storyboard.TargetName="OuterMouseOverBorder" Storyboard.TargetProperty="Opacity" To="0.15"/>
<DoubleAnimation To="-1" Duration="0" Storyboard.TargetName="Content" Storyboard.TargetProperty="(UIElement.RenderTransform).(TranslateTransform.Y)"/>
<DoubleAnimation Duration="0" Storyboard.TargetName="FocusVisual" Storyboard.TargetProperty="Opacity" To="0"/>
</Storyboard>
</VisualState>
<VisualState x:Name="Disabled">
<Storyboard>
<DoubleAnimation Duration="0" Storyboard.TargetName="OuterBorder" Storyboard.TargetProperty="Opacity" To="{telerik:Windows8Resource ResourceKey=DisabledOpacity}"/>
<DoubleAnimation Duration="0" Storyboard.TargetName="Content" Storyboard.TargetProperty="Opacity" To="{telerik:Windows8Resource ResourceKey=DisabledOpacity}"/>
</Storyboard>
</VisualState>
<VisualState x:Name="DisabledChecked">
<Storyboard>
<DoubleAnimation Duration="0" Storyboard.TargetName="Content" Storyboard.TargetProperty="Opacity" To="0.5"/>
</Storyboard>
</VisualState>
<VisualState x:Name="MouseOverChecked">
<Storyboard>
<DoubleAnimation Duration="0" Storyboard.TargetName="MouseOverCheckedVisual" Storyboard.TargetProperty="Opacity" To="0.2"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="BackgroundVisibility">
<VisualState x:Name="BackgroundIsHidden">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="OuterBorder" Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Collapsed</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="BackgroundIsVisible"/>
</VisualStateGroup>
<VisualStateGroup x:Name="CheckStates">
<VisualState x:Name="Checked">
<Storyboard>
<DoubleAnimation Duration="0" Storyboard.TargetName="CheckedVisual" Storyboard.TargetProperty="Opacity" To="1"/>
</Storyboard>
</VisualState>
<VisualState x:Name="Unchecked"/>
</VisualStateGroup>
<VisualStateGroup x:Name="FocusStatesGroup">
<VisualState x:Name="Unfocused">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="FocusVisual" Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="00:00:00.150">
<DiscreteObjectKeyFrame.Value>
<Visibility>Collapsed</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Focused">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="FocusVisual" Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="00:00:00.115">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Border x:Name="OuterBorder"
BorderThickness="{TemplateBinding BorderThickness}"
BorderBrush="{TemplateBinding BorderBrush}"
Background="{TemplateBinding Background}"
CornerRadius="{TemplateBinding CornerRadius}"/>
<Border x:Name="OuterMouseOverBorder"
Opacity="0"
CornerRadius="{TemplateBinding CornerRadius}"
BorderThickness="{TemplateBinding BorderThickness}"
Background="{telerik:Windows8Resource ResourceKey=StrongBrush}"/>
<Border x:Name="OuterPressedBorder"
Visibility="Collapsed"
CornerRadius="{TemplateBinding CornerRadius}"
BorderThickness="{TemplateBinding BorderThickness}"
Background="{telerik:Windows8Resource ResourceKey=BasicBrush}"/>
<Border x:Name="FocusVisual"
Visibility="Collapsed"
BorderThickness="{TemplateBinding BorderThickness}"
CornerRadius="{TemplateBinding CornerRadius}"
BorderBrush="{telerik:Windows8Resource ResourceKey=MarkerBrush}"
Opacity="0.2"/>
<!--Modify the below Border element's properties-->
<Border x:Name="CheckedVisual"
Opacity="0"
BorderThickness="{TemplateBinding BorderThickness}"
CornerRadius="{TemplateBinding CornerRadius}"
BorderBrush="{StaticResource DarkRedBorderBrush}"
Background="{StaticResource RedBackgroundBrush}"/>
<Border x:Name="MouseOverCheckedVisual"
Opacity="0"
BorderThickness="{TemplateBinding BorderThickness}"
CornerRadius="{TemplateBinding CornerRadius}"
Background="{telerik:Windows8Resource ResourceKey=MainBrush}"
BorderBrush="{telerik:Windows8Resource ResourceKey=MainBrush}"/>
<ContentPresenter x:Name="Content"
Content="{TemplateBinding Content}"
Margin="{TemplateBinding Padding}"
ContentTemplate="{TemplateBinding ContentTemplate}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
ContentTemplateSelector="{TemplateBinding ContentTemplateSelector}"
ContentStringFormat="{TemplateBinding ContentStringFormat}"
RecognizesAccessKey="True">
<ContentPresenter.RenderTransform>
<TranslateTransform/>
</ContentPresenter.RenderTransform>
</ContentPresenter>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style TargetType="telerik:RadSplitButton" BasedOn="{StaticResource RadSplitButtonStyle}">
<Setter Property="TogglePartStyle" Value="{StaticResource CustomRadSplitButtonToggleButtonStyle}"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="telerik:RadSplitButton">
<Grid SnapsToDevicePixels="True">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="Disabled">
<Storyboard/>
</VisualState>
<VisualState x:Name="MouseOver">
<Storyboard/>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="IsCheckedState">
<VisualState x:Name="UnChecked"/>
<VisualState x:Name="Checked">
<Storyboard/>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="IsOpenState">
<VisualState x:Name="Closed"/>
<VisualState x:Name="Opened">
<Storyboard>
<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="DropDownPart" Storyboard.TargetProperty="Foreground">
<DiscreteObjectKeyFrame KeyTime="0" Value="{telerik:Windows8Resource ResourceKey=MainBrush}"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="IsOpenOrChecked">
<VisualState x:Name="OpenOrChecked">
<Storyboard>
<!--Modify if needed-->
<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="ButtonPart" Storyboard.TargetProperty="BorderBrush">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource DarkRedBorderBrush}"/>
</ObjectAnimationUsingKeyFrames>
<!--Modify if needed-->
<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="ButtonPart" Storyboard.TargetProperty="Foreground">
<DiscreteObjectKeyFrame KeyTime="0" Value="{telerik:Windows8Resource ResourceKey=MainBrush}"/>
</ObjectAnimationUsingKeyFrames>
<!--The following is responsible for the background color of the ButtonPart when the drop-down is opened-->
<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="ButtonPart" Storyboard.TargetProperty="Background">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource RedBackgroundBrush}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ButtonPart" Storyboard.TargetProperty="IsBackgroundVisible">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<sys:Boolean>True</sys:Boolean>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<DoubleAnimation Duration="0" Storyboard.TargetName="CommonStatesWrapper" Storyboard.TargetProperty="Opacity" To="0"/>
</Storyboard>
</VisualState>
<VisualState x:Name="NotOpenNotChecked"/>
</VisualStateGroup>
<VisualStateGroup x:Name="DropDownButtonPosition">
<VisualState x:Name="DropDownButtonAtLeft">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="DropDownPart" Storyboard.TargetProperty="(Grid.Column)">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<sys:Int32>0</sys:Int32>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="DropDownPart" Storyboard.TargetProperty="(Grid.Row)">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<sys:Int32>1</sys:Int32>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="DropDownPart" Storyboard.TargetProperty="Margin" Duration="0">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Thickness>0 0 -1 0</Thickness>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="DropDownButtonAtTop">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="DropDownPart" Storyboard.TargetProperty="(Grid.Column)">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<sys:Int32>1</sys:Int32>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="DropDownPart" Storyboard.TargetProperty="(Grid.Row)">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<sys:Int32>0</sys:Int32>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="DropDownPart" Storyboard.TargetProperty="Margin" Duration="0">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Thickness>0 0 0 -1</Thickness>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="DropDownButtonAtRight">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="DropDownPart" Storyboard.TargetProperty="(Grid.Column)">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<sys:Int32>2</sys:Int32>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="DropDownPart" Storyboard.TargetProperty="(Grid.Row)">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<sys:Int32>1</sys:Int32>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="DropDownPart" Storyboard.TargetProperty="Margin" Duration="0">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Thickness>-1 0 0 0</Thickness>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="DropDownButtonAtBottom">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="DropDownPart" Storyboard.TargetProperty="(Grid.Column)">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<sys:Int32>1</sys:Int32>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="DropDownPart" Storyboard.TargetProperty="(Grid.Row)">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<sys:Int32>2</sys:Int32>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="DropDownPart" Storyboard.TargetProperty="Margin" Duration="0">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Thickness>0 -1 0 0</Thickness>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="ButtonPartVisibility">
<VisualState x:Name="ButtonInvisible">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="DropDownPart" Storyboard.TargetProperty="Margin">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Thickness>0 0 0 0</Thickness>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="DropDownPart" Storyboard.TargetProperty="(Grid.Row)">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<sys:Int32>0</sys:Int32>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="DropDownPart" Storyboard.TargetProperty="(Grid.RowSpan)">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<sys:Int32>3</sys:Int32>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="DropDownPart" Storyboard.TargetProperty="(Grid.Column)">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<sys:Int32>0</sys:Int32>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="DropDownPart" Storyboard.TargetProperty="(Grid.ColumnSpan)">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<sys:Int32>3</sys:Int32>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ButtonPart" Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Collapsed</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="ButtonVisible"/>
</VisualStateGroup>
<VisualStateGroup x:Name="BackgroundVisibility">
<VisualState x:Name="BackgroundIsHidden"/>
<VisualState x:Name="BackgroundIsVisible"/>
</VisualStateGroup>
<VisualStateGroup x:Name="FocusStatesGroup">
<VisualState x:Name="Unfocused">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="FocusVisual" Storyboard.TargetProperty="Opacity">
<DiscreteObjectKeyFrame KeyTime="00:00:00.150">
<DiscreteObjectKeyFrame.Value>
<sys:Double>0</sys:Double>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Focused">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="FocusVisual" Storyboard.TargetProperty="Opacity">
<DiscreteObjectKeyFrame KeyTime="00:00:00.115">
<DiscreteObjectKeyFrame.Value>
<sys:Double>0.2</sys:Double>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<telerik:RadButton x:Name="ButtonPart"
IsTabStop="False"
Grid.Row="1"
Grid.Column="1"
Visibility="{Binding RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay, Path=IsButtonPartVisible, Converter={StaticResource BooleanToVisibilityConverter}}"
Background="{TemplateBinding Background}"
Style="{TemplateBinding ButtonPartStyle}"
Padding="{TemplateBinding Padding}"
BorderThickness="{TemplateBinding BorderThickness}"
BorderBrush="{TemplateBinding BorderBrush}"
IsBackgroundVisible="{TemplateBinding IsBackgroundVisible}"
Foreground="{TemplateBinding Foreground}"
FontSize="{TemplateBinding FontSize}"
Content="{TemplateBinding Content}"
ContentTemplate="{TemplateBinding ContentTemplate}"
HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
MinHeight="{TemplateBinding MinHeight}"
ContentTemplateSelector="{TemplateBinding ContentTemplateSelector}"
ContentStringFormat="{TemplateBinding ContentStringFormat}"
Focusable="False"/>
<telerik:RadToggleButton x:Name="DropDownPart"
Margin="-1 0 0 0"
Grid.Row="1"
Grid.Column="2"
IsTabStop="False"
BorderThickness="{TemplateBinding BorderThickness}"
BorderBrush="{TemplateBinding BorderBrush}"
Background="{TemplateBinding Background}"
Style="{TemplateBinding TogglePartStyle}"
FontSize="{TemplateBinding FontSize}"
IsBackgroundVisible="{TemplateBinding IsBackgroundVisible}"
Visibility="{TemplateBinding DropDownIndicatorVisibility}"
IsChecked="{Binding Path=IsOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"
MinHeight="9"
MinWidth="15"
Focusable="False">
<Grid x:Name="PART_DropDownIndicatorInner"
IsHitTestVisible="False"
HorizontalAlignment="Center"
Canvas.ZIndex="2"
VerticalAlignment="Center"
RenderTransformOrigin="0.5 0.5">
<Path x:Name="Path" Fill="{Binding Foreground, ElementName=DropDownPart}" Data="M0,0 L6,0 L3,4 z" Margin="5 3"/>
</Grid>
</telerik:RadToggleButton>
</Grid>
<Border x:Name="CommonStatesWrapper" Visibility="{Binding Path=IsPressed, ElementName = DropDownPart, Converter={StaticResource InvertedBooleanToVisibilityConverter}}">
<Border x:Name="FocusVisual"
Visibility="{Binding Path=IsPressed, ElementName = ButtonPart, Converter={StaticResource InvertedBooleanToVisibilityConverter}}"
Background="{x:Null}"
BorderThickness="{TemplateBinding BorderThickness}"
CornerRadius="{TemplateBinding CornerRadius}"
Opacity="0"
BorderBrush="{telerik:Windows8Resource ResourceKey=MarkerBrush}"/>
</Border>
<Popup x:Name="DropDownPopup" PopupAnimation="{TemplateBinding PopupAnimation}" AllowsTransparency="True" StaysOpen="False" Focusable="False" Placement="Bottom">
<Grid>
<Border x:Name="DropDownPopupBorder"
BorderThickness="1"
MinWidth="3"
MinHeight="3"
Width="{TemplateBinding DropDownWidth}"
Height="{TemplateBinding DropDownHeight}"
MaxWidth="{TemplateBinding DropDownMaxWidth}"
MaxHeight="{TemplateBinding DropDownMaxHeight}"
Background="{telerik:Windows8Resource ResourceKey=MainBrush}"
BorderBrush="{telerik:Windows8Resource ResourceKey=BasicBrush}">
<ContentControl x:Name="DropDownPopupContent"
Foreground="{TemplateBinding Foreground}"
Content="{TemplateBinding DropDownContent}"
ContentTemplate="{TemplateBinding DropDownContentTemplate}"
HorizontalContentAlignment="Stretch"
VerticalContentAlignment="Stretch"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
DataContext="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=DataContext}"/>
</Border>
</Grid>
</Popup>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="DropDownPlacement" Value="Bottom"/>
<Trigger Property="DropDownPlacement" Value="Top">
<Setter TargetName="PART_DropDownIndicatorInner" Property="RenderTransform">
<Setter.Value>
<TransformGroup>
<RotateTransform Angle="180"/>
</TransformGroup>
</Setter.Value>
</Setter>
</Trigger>
<Trigger Property="DropDownPlacement" Value="Left">
<Setter TargetName="PART_DropDownIndicatorInner" Property="RenderTransform">
<Setter.Value>
<TransformGroup>
<RotateTransform Angle="90"/>
</TransformGroup>
</Setter.Value>
</Setter>
</Trigger>
<Trigger Property="DropDownPlacement" Value="Right">
<Setter TargetName="PART_DropDownIndicatorInner" Property="RenderTransform">
<Setter.Value>
<TransformGroup>
<RotateTransform Angle="-90"/>
</TransformGroup>
</Setter.Value>
</Setter>
</Trigger>
<Trigger Property="IsKeyboardFocused" Value="False">
<Setter TargetName="FocusVisual" Property="Visibility" Value="Collapsed"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ResourceDictionary>
If the NoXaml assemblies are used, remove the merged resource dictionary from the MergedDictionaries collection from the above code snippet.
The end result should be as follows:
With this being said, I have also attached a sample project for you to test.
Regards,
Stenly
Progress Telerik
Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.