Hello support!!
I created a simple project to test my theme... RadDropDownButton was ok, but when user mouse over, press... in RadDropDownButton, appear another color... How to configure to stay with the same color ? And how to change RadDropDownButton border color to the same colors of blue and not orange ? Thanks!!
------------------
MainPage.xaml:
<UserControl x:Class="SilverlightApplication1.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="400" xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation">
<Grid x:Name="LayoutRoot" Background="White">
<!--Button and Menu action-->
<telerik:RadDropDownButton Style="{StaticResource MyButton}" x:Name="mnuActionDropDown" Grid.Row="3" VerticalAlignment="Center" Content="My Actions" Margin="50,0,0,0" HorizontalAlignment="Left" DropDownIndicatorVisibility="Visible" DropDownButtonPosition="Right">
<telerik:RadDropDownButton.DropDownContent>
<ListBox x:Name="lstActions" Style="{StaticResource MyListBox}" SelectionMode="Single" >
<ListBoxItem Style="{StaticResource MyListBoxItem}" x:Name="lstItemAction1" Content="Add" IsSelected="false"/>
<ListBoxItem Style="{StaticResource MyListBoxItem}" x:Name="lstItemAction2" Content="Remove" IsSelected="false" />
</ListBox>
</telerik:RadDropDownButton.DropDownContent>
</telerik:RadDropDownButton>
</Grid>
</UserControl>
-----------
MainPage.xaml.cs:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
namespace SilverlightApplication1
{
public partial class MainPage : UserControl
{
public MainPage()
{
InitializeComponent();
}
}
}
--------------------
App.xaml:
<Application xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
x:Class="SilverlightApplication1.App"
>
<Application.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="Resources/MyButton.xaml"/>
<ResourceDictionary Source="Resources/MyListBox.xaml"/>
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Application.Resources>
</Application>
-------------------
MyButton.xaml:
<ResourceDictionary
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:telerik="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls"
xmlns:telerikPrimitives="clr-namespace:Telerik.Windows.Controls.Primitives;assembly=Telerik.Windows.Controls"
xmlns:dragDrop="clr-namespace:Telerik.Windows.Controls.DragDrop;assembly=Telerik.Windows.Controls"
xmlns:animation="clr-namespace:Telerik.Windows.Controls.Animation;assembly=Telerik.Windows.Controls"
xmlns:telerikChromes="clr-namespace:Telerik.Windows.Controls.Chromes;assembly=Telerik.Windows.Controls"
xmlns:vsm="clr-namespace:System.Windows;assembly=System.Windows"
xmlns:sys="clr-namespace:System;assembly=mscorlib"
xmlns:telerikTransitions="clr-namespace:Telerik.Windows.Controls.TransitionEffects;assembly=Telerik.Windows.Controls"
xmlns:telerikTransitonControl="clr-namespace:Telerik.Windows.Controls.TransitionControl;assembly=Telerik.Windows.Controls"
xmlns:telerikQuickStart="clr-namespace:Telerik.Windows.Controls.QuickStart;assembly=Telerik.Windows.Controls"
>
<LinearGradientBrush x:Key="ControlOuterBorder_Normal" EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FF2EBDEF" Offset="0"/>
<GradientStop Color="#FF00335B" Offset="0.992"/>
</LinearGradientBrush>
<LinearGradientBrush x:Key="ControlBackground_Normal" EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FFEBF3FF"/>
<GradientStop Color="#FFCAE1FF" Offset="0"/>
<GradientStop Color="#FF2EBDEF" Offset="0"/>
<GradientStop Color="#FF00335B" Offset="1"/>
</LinearGradientBrush>
<SolidColorBrush x:Key="ControlForeground_Normal" Color="White" />
<CornerRadius x:Key="ControlOuterBorder_CornerRadius">5</CornerRadius>
<SolidColorBrush x:Key="ControlElement_Disabled" Color="#FF8D8D8D" />
<LinearGradientBrush x:Key="ControlElement_Active" EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FF77BD00" Offset="0"/>
<GradientStop Color="#FFBDE96D" Offset="1"/>
</LinearGradientBrush>
<LinearGradientBrush x:Key="ControlElement_Normal" EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FF77BD00" Offset="0"/>
<GradientStop Color="#FFBDE96D" Offset="0.984"/>
</LinearGradientBrush>
<LinearGradientBrush x:Key="ControlOuterBorder" EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FF2EBDEF" Offset="0"/>
<GradientStop Color="#FF00335B" Offset="1"/>
</LinearGradientBrush>
<LinearGradientBrush x:Key="ControlBackground" EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FF2EBDEF" Offset="0"/>
<GradientStop Color="#FF00335B" Offset="1"/>
</LinearGradientBrush>
<Style x:Key="MyButton" TargetType="telerik:RadDropDownButton"
>
<Setter Property="IsOpen" Value="false" />
<Setter Property="BorderThickness" Value="1" />
<Setter Property="BorderBrush" Value="{StaticResource ControlOuterBorder_Normal}" />
<Setter Property="Background" Value="{StaticResource ControlBackground_Normal}" />
<Setter Property="Foreground" Value="{StaticResource ControlForeground_Normal}" />
<Setter Property="HorizontalContentAlignment" Value="Center" />
<Setter Property="VerticalContentAlignment" Value="Center" />
<Setter Property="Padding" Value="3" />
<Setter Property="CornerRadius" Value="{StaticResource ControlOuterBorder_CornerRadius}" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="telerik:RadDropDownButton">
<Grid>
<vsm:VisualStateManager.VisualStateGroups>
<vsm:VisualStateGroup x:Name="CommonStates">
<vsm:VisualState x:Name="Normal" />
<vsm:VisualState x:Name="Disabled">
<Storyboard>
<DoubleAnimation Storyboard.TargetName="Content"
Storyboard.TargetProperty="Opacity" To="0.5" Duration="0" />
<ObjectAnimationUsingKeyFrames
Storyboard.TargetName="DropDownIndicator"
Storyboard.TargetProperty="Fill">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ControlElement_Disabled}" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</vsm:VisualState>
</vsm:VisualStateGroup>
<vsm:VisualStateGroup x:Name="IsOpenState">
<vsm:VisualState x:Name="Closed" />
<vsm:VisualState x:Name="Opened">
<Storyboard>
<ObjectAnimationUsingKeyFrames
Storyboard.TargetName="DropDownIndicator"
Storyboard.TargetProperty="Fill">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ControlElement_Active}" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</vsm:VisualState>
</vsm:VisualStateGroup>
<vsm:VisualStateGroup x:Name="DropDownButtonPosition">
<vsm:VisualState x:Name="DropDownButtonAtLeft">
<Storyboard>
<ObjectAnimationUsingKeyFrames
Storyboard.TargetName="DropDownIndicator"
Storyboard.TargetProperty="(Grid.Column)">
<DiscreteObjectKeyFrame KeyTime="0" Value="0" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames
Storyboard.TargetName="DropDownIndicator"
Storyboard.TargetProperty="(Grid.Row)">
<DiscreteObjectKeyFrame KeyTime="0" Value="1" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</vsm:VisualState>
<vsm:VisualState x:Name="DropDownButtonAtTop">
<Storyboard>
<ObjectAnimationUsingKeyFrames
Storyboard.TargetName="DropDownIndicator"
Storyboard.TargetProperty="(Grid.Column)">
<DiscreteObjectKeyFrame KeyTime="0" Value="1" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames
Storyboard.TargetName="DropDownIndicator"
Storyboard.TargetProperty="(Grid.Row)">
<DiscreteObjectKeyFrame KeyTime="0" Value="0" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</vsm:VisualState>
<vsm:VisualState x:Name="DropDownButtonAtRight">
<Storyboard>
<ObjectAnimationUsingKeyFrames
Storyboard.TargetName="DropDownIndicator"
Storyboard.TargetProperty="(Grid.Column)">
<DiscreteObjectKeyFrame KeyTime="0" Value="2" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames
Storyboard.TargetName="DropDownIndicator"
Storyboard.TargetProperty="(Grid.Row)">
<DiscreteObjectKeyFrame KeyTime="0" Value="1" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</vsm:VisualState>
<vsm:VisualState x:Name="DropDownButtonAtBottom">
<Storyboard>
<ObjectAnimationUsingKeyFrames
Storyboard.TargetName="DropDownIndicator"
Storyboard.TargetProperty="(Grid.Column)">
<DiscreteObjectKeyFrame KeyTime="0" Value="1" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames
Storyboard.TargetName="DropDownIndicator"
Storyboard.TargetProperty="(Grid.Row)">
<DiscreteObjectKeyFrame KeyTime="0" Value="2" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</vsm:VisualState>
</vsm:VisualStateGroup>
<vsm:VisualStateGroup x:Name="PopupPlacementState">
<vsm:VisualState x:Name="PlacementBottom" />
<vsm:VisualState x:Name="PlacementTop">
<Storyboard>
<ObjectAnimationUsingKeyFrames
Storyboard.TargetName="DropDownIndicator"
Storyboard.TargetProperty="RenderTransform">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<TransformGroup>
<RotateTransform Angle="180" />
</TransformGroup>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</vsm:VisualState>
<vsm:VisualState x:Name="PlacementLeft">
<Storyboard>
<ObjectAnimationUsingKeyFrames
Storyboard.TargetName="DropDownIndicator"
Storyboard.TargetProperty="RenderTransform">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<TransformGroup>
<RotateTransform Angle="90"/>
</TransformGroup>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</vsm:VisualState>
<vsm:VisualState x:Name="PlacementRight">
<Storyboard>
<ObjectAnimationUsingKeyFrames
Storyboard.TargetName="DropDownIndicator"
Storyboard.TargetProperty="RenderTransform">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<TransformGroup>
<RotateTransform Angle="-90"/>
</TransformGroup>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</vsm:VisualState>
</vsm:VisualStateGroup>
</vsm:VisualStateManager.VisualStateGroups>
<telerikChromes:ButtonChrome
Background="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Background}"
BorderBrush="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=BorderBrush}"
BorderThickness="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=BorderThickness}"
RenderEnabled="{TemplateBinding IsEnabled}"
RenderNormal="{TemplateBinding IsBackgroundVisible}"
RenderMouseOver="{TemplateBinding IsMouseOver}"
RenderPressed="{TemplateBinding IsPressed}"
RenderFocused="{TemplateBinding IsFocused}"
RenderChecked="{TemplateBinding IsOpen}"
CornerRadius="{TemplateBinding CornerRadius}" />
<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>
<ContentPresenter x:Name="Content"
Grid.Row="1" Grid.Column="1"
Margin="{TemplateBinding Padding}"
Content="{TemplateBinding Content}"
ContentTemplate="{TemplateBinding ContentTemplate}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
/>
<Path
x:Name="DropDownIndicator"
Grid.Row="2" Grid.Column="1"
IsHitTestVisible="False"
Visibility="{TemplateBinding DropDownIndicatorVisibility}"
Fill="{StaticResource ControlElement_Normal}"
HorizontalAlignment="Center"
VerticalAlignment="Center"
RenderTransformOrigin="0.5,0.5"
Margin="5,3,5,3"
Data="M0,0 L5,0 5,1 4,1 4,2 3,2 3,3 2,3 2,2 1,2 1,1 0,1 0,0 z"
/>
</Grid>
<Popup
x:Name="DropDownPopup"
>
<Grid>
<Border x:Name="DropDownPopupBorder"
BorderBrush="{StaticResource ControlOuterBorder}"
Background="{StaticResource ControlBackground}"
BorderThickness="1"
CornerRadius="{TemplateBinding CornerRadius}"
Margin="0,1,4,4" MinWidth="3" MinHeight="3"
Width="{TemplateBinding DropDownWidth}"
Height="{TemplateBinding DropDownHeight}"
MaxWidth="{TemplateBinding DropDownMaxWidth}"
MaxHeight="{TemplateBinding DropDownMaxHeight}">
<ContentPresenter
x:Name="DropDownPopupContent"
Content="{TemplateBinding DropDownContent}"
ContentTemplate="{TemplateBinding DropDownContentTemplate}"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
DataContext="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=DataContext}"/>
</Border>
</Grid>
</Popup>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ResourceDictionary>
-------
MyListBox.xaml :
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:telerik="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls"
xmlns:telerikPrimitives="clr-namespace:Telerik.Windows.Controls.Primitives;assembly=Telerik.Windows.Controls"
xmlns:dragDrop="clr-namespace:Telerik.Windows.Controls.DragDrop;assembly=Telerik.Windows.Controls"
xmlns:animation="clr-namespace:Telerik.Windows.Controls.Animation;assembly=Telerik.Windows.Controls"
xmlns:telerikChromes="clr-namespace:Telerik.Windows.Controls.Chromes;assembly=Telerik.Windows.Controls"
xmlns:vsm="clr-namespace:System.Windows;assembly=System.Windows"
xmlns:sys="clr-namespace:System;assembly=mscorlib"
xmlns:telerikTransitions="clr-namespace:Telerik.Windows.Controls.TransitionEffects;assembly=Telerik.Windows.Controls"
xmlns:telerikTransitonControl="clr-namespace:Telerik.Windows.Controls.TransitionControl;assembly=Telerik.Windows.Controls"
xmlns:telerikQuickStart="clr-namespace:Telerik.Windows.Controls.QuickStart;assembly=Telerik.Windows.Controls">
<LinearGradientBrush x:Key="ControlBackground" EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FF11456E" Offset="0"/>
<GradientStop Color="#FF17456A" Offset="1"/>
</LinearGradientBrush>
<SolidColorBrush x:Key="ControlForeground_Normal" Color="White" />
<LinearGradientBrush x:Key="ControlOuterBorder" EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FF11456E" Offset="0"/>
<GradientStop Color="#FF17456A" Offset="1"/>
</LinearGradientBrush>
<CornerRadius x:Key="ControlOuterBorder_CornerRadius">2</CornerRadius>
<LinearGradientBrush x:Key="ControlOuterBorder_Highlighted" EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FF0A5987" Offset="0"/>
<GradientStop Color="#FF115F8B" Offset="1"/>
</LinearGradientBrush>
<LinearGradientBrush x:Key="ControlBackground_Highlighted" EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FF0A5987" Offset="0"/>
<GradientStop Color="#FF115F8B" Offset="1"/>
</LinearGradientBrush>
<LinearGradientBrush x:Key="ControlInnerBorder_Highlighted" EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FF0A5987" Offset="0"/>
<GradientStop Color="#FF115F8B" Offset="1"/>
</LinearGradientBrush>
<CornerRadius x:Key="ControlInnerBorder_CornerRadius">1</CornerRadius>
<!-- style for ListBox -->
<Style x:Key="MyListBox" TargetType="ListBox">
<Setter Property="Padding" Value="1" />
<Setter Property="Background" Value="{StaticResource ControlBackground}" />
<Setter Property="Foreground" Value="{StaticResource ControlForeground_Normal}" />
<Setter Property="HorizontalContentAlignment" Value="Left" />
<Setter Property="VerticalContentAlignment" Value="Top" />
<Setter Property="IsTabStop" Value="False" />
<Setter Property="BorderThickness" Value="1" />
<Setter Property="TabNavigation" Value="Once" />
<Setter Property="BorderBrush" Value="{StaticResource ControlOuterBorder}" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListBox">
<ScrollViewer x:Name="ScrollViewer" Margin="0"
Padding="{TemplateBinding Padding}"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}">
<ItemsPresenter />
</ScrollViewer>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<!-- style for ListBoxItem -->
<Style x:Key="MyListBoxItem" TargetType="ListBoxItem">
<Setter Property="Padding" Value="3" />
<Setter Property="HorizontalContentAlignment" Value="Left" />
<Setter Property="VerticalContentAlignment" Value="Top" />
<Setter Property="Background" Value="Transparent" />
<Setter Property="BorderBrush" Value="Transparent" />
<Setter Property="BorderThickness" Value="1" />
<Setter Property="TabNavigation" Value="Local" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListBoxItem">
<Grid>
<vsm:VisualStateManager.VisualStateGroups>
<vsm:VisualStateGroup x:Name="CommonStates">
<vsm:VisualState x:Name="Normal" />
<vsm:VisualState x:Name="MouseOver">
<Storyboard>
<ObjectAnimationUsingKeyFrames
Storyboard.TargetName="MouseOverRectangle"
Storyboard.TargetProperty="Opacity" Duration="0">
<DiscreteObjectKeyFrame KeyTime="0" Value="1" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</vsm:VisualState>
<vsm:VisualState x:Name="Disabled">
<Storyboard>
<ObjectAnimationUsingKeyFrames
Storyboard.TargetName="contentPresenter"
Storyboard.TargetProperty="Opacity">
<DiscreteObjectKeyFrame KeyTime="0" Value="0.5" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</vsm:VisualState>
</vsm:VisualStateGroup>
</vsm:VisualStateManager.VisualStateGroups>
<!-- normal-->
<Border CornerRadius="{StaticResource ControlOuterBorder_CornerRadius}"
Margin="1,0" BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
Background="{TemplateBinding Background}" />
<!-- Mouseover -->
<Border x:Name="MouseOverRectangle" Opacity="0"
CornerRadius="{StaticResource ControlOuterBorder_CornerRadius}"
Margin="1,0" BorderBrush="{StaticResource ControlOuterBorder_Highlighted}"
BorderThickness="{TemplateBinding BorderThickness}">
<Border Background="{StaticResource ControlBackground_Highlighted}"
BorderBrush="{StaticResource ControlInnerBorder_Highlighted}"
BorderThickness="1"
CornerRadius="{StaticResource ControlInnerBorder_CornerRadius}" />
</Border>
<telerikChromes:ButtonChrome
RenderNormal="False" Margin="1,0"
RenderSelected="{TemplateBinding IsSelected}"
RenderEnabled="{TemplateBinding IsEnabled}"
CornerRadius="{StaticResource ControlOuterBorder_CornerRadius}" />
<ContentPresenter x:Name="contentPresenter" Margin="{TemplateBinding Padding}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ResourceDictionary>
I created a simple project to test my theme... RadDropDownButton was ok, but when user mouse over, press... in RadDropDownButton, appear another color... How to configure to stay with the same color ? And how to change RadDropDownButton border color to the same colors of blue and not orange ? Thanks!!
------------------
MainPage.xaml:
<UserControl x:Class="SilverlightApplication1.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="400" xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation">
<Grid x:Name="LayoutRoot" Background="White">
<!--Button and Menu action-->
<telerik:RadDropDownButton Style="{StaticResource MyButton}" x:Name="mnuActionDropDown" Grid.Row="3" VerticalAlignment="Center" Content="My Actions" Margin="50,0,0,0" HorizontalAlignment="Left" DropDownIndicatorVisibility="Visible" DropDownButtonPosition="Right">
<telerik:RadDropDownButton.DropDownContent>
<ListBox x:Name="lstActions" Style="{StaticResource MyListBox}" SelectionMode="Single" >
<ListBoxItem Style="{StaticResource MyListBoxItem}" x:Name="lstItemAction1" Content="Add" IsSelected="false"/>
<ListBoxItem Style="{StaticResource MyListBoxItem}" x:Name="lstItemAction2" Content="Remove" IsSelected="false" />
</ListBox>
</telerik:RadDropDownButton.DropDownContent>
</telerik:RadDropDownButton>
</Grid>
</UserControl>
-----------
MainPage.xaml.cs:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
namespace SilverlightApplication1
{
public partial class MainPage : UserControl
{
public MainPage()
{
InitializeComponent();
}
}
}
--------------------
App.xaml:
<Application xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
x:Class="SilverlightApplication1.App"
>
<Application.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="Resources/MyButton.xaml"/>
<ResourceDictionary Source="Resources/MyListBox.xaml"/>
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Application.Resources>
</Application>
-------------------
MyButton.xaml:
<ResourceDictionary
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:telerik="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls"
xmlns:telerikPrimitives="clr-namespace:Telerik.Windows.Controls.Primitives;assembly=Telerik.Windows.Controls"
xmlns:dragDrop="clr-namespace:Telerik.Windows.Controls.DragDrop;assembly=Telerik.Windows.Controls"
xmlns:animation="clr-namespace:Telerik.Windows.Controls.Animation;assembly=Telerik.Windows.Controls"
xmlns:telerikChromes="clr-namespace:Telerik.Windows.Controls.Chromes;assembly=Telerik.Windows.Controls"
xmlns:vsm="clr-namespace:System.Windows;assembly=System.Windows"
xmlns:sys="clr-namespace:System;assembly=mscorlib"
xmlns:telerikTransitions="clr-namespace:Telerik.Windows.Controls.TransitionEffects;assembly=Telerik.Windows.Controls"
xmlns:telerikTransitonControl="clr-namespace:Telerik.Windows.Controls.TransitionControl;assembly=Telerik.Windows.Controls"
xmlns:telerikQuickStart="clr-namespace:Telerik.Windows.Controls.QuickStart;assembly=Telerik.Windows.Controls"
>
<LinearGradientBrush x:Key="ControlOuterBorder_Normal" EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FF2EBDEF" Offset="0"/>
<GradientStop Color="#FF00335B" Offset="0.992"/>
</LinearGradientBrush>
<LinearGradientBrush x:Key="ControlBackground_Normal" EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FFEBF3FF"/>
<GradientStop Color="#FFCAE1FF" Offset="0"/>
<GradientStop Color="#FF2EBDEF" Offset="0"/>
<GradientStop Color="#FF00335B" Offset="1"/>
</LinearGradientBrush>
<SolidColorBrush x:Key="ControlForeground_Normal" Color="White" />
<CornerRadius x:Key="ControlOuterBorder_CornerRadius">5</CornerRadius>
<SolidColorBrush x:Key="ControlElement_Disabled" Color="#FF8D8D8D" />
<LinearGradientBrush x:Key="ControlElement_Active" EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FF77BD00" Offset="0"/>
<GradientStop Color="#FFBDE96D" Offset="1"/>
</LinearGradientBrush>
<LinearGradientBrush x:Key="ControlElement_Normal" EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FF77BD00" Offset="0"/>
<GradientStop Color="#FFBDE96D" Offset="0.984"/>
</LinearGradientBrush>
<LinearGradientBrush x:Key="ControlOuterBorder" EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FF2EBDEF" Offset="0"/>
<GradientStop Color="#FF00335B" Offset="1"/>
</LinearGradientBrush>
<LinearGradientBrush x:Key="ControlBackground" EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FF2EBDEF" Offset="0"/>
<GradientStop Color="#FF00335B" Offset="1"/>
</LinearGradientBrush>
<Style x:Key="MyButton" TargetType="telerik:RadDropDownButton"
>
<Setter Property="IsOpen" Value="false" />
<Setter Property="BorderThickness" Value="1" />
<Setter Property="BorderBrush" Value="{StaticResource ControlOuterBorder_Normal}" />
<Setter Property="Background" Value="{StaticResource ControlBackground_Normal}" />
<Setter Property="Foreground" Value="{StaticResource ControlForeground_Normal}" />
<Setter Property="HorizontalContentAlignment" Value="Center" />
<Setter Property="VerticalContentAlignment" Value="Center" />
<Setter Property="Padding" Value="3" />
<Setter Property="CornerRadius" Value="{StaticResource ControlOuterBorder_CornerRadius}" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="telerik:RadDropDownButton">
<Grid>
<vsm:VisualStateManager.VisualStateGroups>
<vsm:VisualStateGroup x:Name="CommonStates">
<vsm:VisualState x:Name="Normal" />
<vsm:VisualState x:Name="Disabled">
<Storyboard>
<DoubleAnimation Storyboard.TargetName="Content"
Storyboard.TargetProperty="Opacity" To="0.5" Duration="0" />
<ObjectAnimationUsingKeyFrames
Storyboard.TargetName="DropDownIndicator"
Storyboard.TargetProperty="Fill">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ControlElement_Disabled}" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</vsm:VisualState>
</vsm:VisualStateGroup>
<vsm:VisualStateGroup x:Name="IsOpenState">
<vsm:VisualState x:Name="Closed" />
<vsm:VisualState x:Name="Opened">
<Storyboard>
<ObjectAnimationUsingKeyFrames
Storyboard.TargetName="DropDownIndicator"
Storyboard.TargetProperty="Fill">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ControlElement_Active}" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</vsm:VisualState>
</vsm:VisualStateGroup>
<vsm:VisualStateGroup x:Name="DropDownButtonPosition">
<vsm:VisualState x:Name="DropDownButtonAtLeft">
<Storyboard>
<ObjectAnimationUsingKeyFrames
Storyboard.TargetName="DropDownIndicator"
Storyboard.TargetProperty="(Grid.Column)">
<DiscreteObjectKeyFrame KeyTime="0" Value="0" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames
Storyboard.TargetName="DropDownIndicator"
Storyboard.TargetProperty="(Grid.Row)">
<DiscreteObjectKeyFrame KeyTime="0" Value="1" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</vsm:VisualState>
<vsm:VisualState x:Name="DropDownButtonAtTop">
<Storyboard>
<ObjectAnimationUsingKeyFrames
Storyboard.TargetName="DropDownIndicator"
Storyboard.TargetProperty="(Grid.Column)">
<DiscreteObjectKeyFrame KeyTime="0" Value="1" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames
Storyboard.TargetName="DropDownIndicator"
Storyboard.TargetProperty="(Grid.Row)">
<DiscreteObjectKeyFrame KeyTime="0" Value="0" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</vsm:VisualState>
<vsm:VisualState x:Name="DropDownButtonAtRight">
<Storyboard>
<ObjectAnimationUsingKeyFrames
Storyboard.TargetName="DropDownIndicator"
Storyboard.TargetProperty="(Grid.Column)">
<DiscreteObjectKeyFrame KeyTime="0" Value="2" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames
Storyboard.TargetName="DropDownIndicator"
Storyboard.TargetProperty="(Grid.Row)">
<DiscreteObjectKeyFrame KeyTime="0" Value="1" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</vsm:VisualState>
<vsm:VisualState x:Name="DropDownButtonAtBottom">
<Storyboard>
<ObjectAnimationUsingKeyFrames
Storyboard.TargetName="DropDownIndicator"
Storyboard.TargetProperty="(Grid.Column)">
<DiscreteObjectKeyFrame KeyTime="0" Value="1" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames
Storyboard.TargetName="DropDownIndicator"
Storyboard.TargetProperty="(Grid.Row)">
<DiscreteObjectKeyFrame KeyTime="0" Value="2" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</vsm:VisualState>
</vsm:VisualStateGroup>
<vsm:VisualStateGroup x:Name="PopupPlacementState">
<vsm:VisualState x:Name="PlacementBottom" />
<vsm:VisualState x:Name="PlacementTop">
<Storyboard>
<ObjectAnimationUsingKeyFrames
Storyboard.TargetName="DropDownIndicator"
Storyboard.TargetProperty="RenderTransform">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<TransformGroup>
<RotateTransform Angle="180" />
</TransformGroup>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</vsm:VisualState>
<vsm:VisualState x:Name="PlacementLeft">
<Storyboard>
<ObjectAnimationUsingKeyFrames
Storyboard.TargetName="DropDownIndicator"
Storyboard.TargetProperty="RenderTransform">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<TransformGroup>
<RotateTransform Angle="90"/>
</TransformGroup>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</vsm:VisualState>
<vsm:VisualState x:Name="PlacementRight">
<Storyboard>
<ObjectAnimationUsingKeyFrames
Storyboard.TargetName="DropDownIndicator"
Storyboard.TargetProperty="RenderTransform">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<TransformGroup>
<RotateTransform Angle="-90"/>
</TransformGroup>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</vsm:VisualState>
</vsm:VisualStateGroup>
</vsm:VisualStateManager.VisualStateGroups>
<telerikChromes:ButtonChrome
Background="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Background}"
BorderBrush="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=BorderBrush}"
BorderThickness="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=BorderThickness}"
RenderEnabled="{TemplateBinding IsEnabled}"
RenderNormal="{TemplateBinding IsBackgroundVisible}"
RenderMouseOver="{TemplateBinding IsMouseOver}"
RenderPressed="{TemplateBinding IsPressed}"
RenderFocused="{TemplateBinding IsFocused}"
RenderChecked="{TemplateBinding IsOpen}"
CornerRadius="{TemplateBinding CornerRadius}" />
<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>
<ContentPresenter x:Name="Content"
Grid.Row="1" Grid.Column="1"
Margin="{TemplateBinding Padding}"
Content="{TemplateBinding Content}"
ContentTemplate="{TemplateBinding ContentTemplate}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
/>
<Path
x:Name="DropDownIndicator"
Grid.Row="2" Grid.Column="1"
IsHitTestVisible="False"
Visibility="{TemplateBinding DropDownIndicatorVisibility}"
Fill="{StaticResource ControlElement_Normal}"
HorizontalAlignment="Center"
VerticalAlignment="Center"
RenderTransformOrigin="0.5,0.5"
Margin="5,3,5,3"
Data="M0,0 L5,0 5,1 4,1 4,2 3,2 3,3 2,3 2,2 1,2 1,1 0,1 0,0 z"
/>
</Grid>
<Popup
x:Name="DropDownPopup"
>
<Grid>
<Border x:Name="DropDownPopupBorder"
BorderBrush="{StaticResource ControlOuterBorder}"
Background="{StaticResource ControlBackground}"
BorderThickness="1"
CornerRadius="{TemplateBinding CornerRadius}"
Margin="0,1,4,4" MinWidth="3" MinHeight="3"
Width="{TemplateBinding DropDownWidth}"
Height="{TemplateBinding DropDownHeight}"
MaxWidth="{TemplateBinding DropDownMaxWidth}"
MaxHeight="{TemplateBinding DropDownMaxHeight}">
<ContentPresenter
x:Name="DropDownPopupContent"
Content="{TemplateBinding DropDownContent}"
ContentTemplate="{TemplateBinding DropDownContentTemplate}"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
DataContext="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=DataContext}"/>
</Border>
</Grid>
</Popup>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ResourceDictionary>
-------
MyListBox.xaml :
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:telerik="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls"
xmlns:telerikPrimitives="clr-namespace:Telerik.Windows.Controls.Primitives;assembly=Telerik.Windows.Controls"
xmlns:dragDrop="clr-namespace:Telerik.Windows.Controls.DragDrop;assembly=Telerik.Windows.Controls"
xmlns:animation="clr-namespace:Telerik.Windows.Controls.Animation;assembly=Telerik.Windows.Controls"
xmlns:telerikChromes="clr-namespace:Telerik.Windows.Controls.Chromes;assembly=Telerik.Windows.Controls"
xmlns:vsm="clr-namespace:System.Windows;assembly=System.Windows"
xmlns:sys="clr-namespace:System;assembly=mscorlib"
xmlns:telerikTransitions="clr-namespace:Telerik.Windows.Controls.TransitionEffects;assembly=Telerik.Windows.Controls"
xmlns:telerikTransitonControl="clr-namespace:Telerik.Windows.Controls.TransitionControl;assembly=Telerik.Windows.Controls"
xmlns:telerikQuickStart="clr-namespace:Telerik.Windows.Controls.QuickStart;assembly=Telerik.Windows.Controls">
<LinearGradientBrush x:Key="ControlBackground" EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FF11456E" Offset="0"/>
<GradientStop Color="#FF17456A" Offset="1"/>
</LinearGradientBrush>
<SolidColorBrush x:Key="ControlForeground_Normal" Color="White" />
<LinearGradientBrush x:Key="ControlOuterBorder" EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FF11456E" Offset="0"/>
<GradientStop Color="#FF17456A" Offset="1"/>
</LinearGradientBrush>
<CornerRadius x:Key="ControlOuterBorder_CornerRadius">2</CornerRadius>
<LinearGradientBrush x:Key="ControlOuterBorder_Highlighted" EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FF0A5987" Offset="0"/>
<GradientStop Color="#FF115F8B" Offset="1"/>
</LinearGradientBrush>
<LinearGradientBrush x:Key="ControlBackground_Highlighted" EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FF0A5987" Offset="0"/>
<GradientStop Color="#FF115F8B" Offset="1"/>
</LinearGradientBrush>
<LinearGradientBrush x:Key="ControlInnerBorder_Highlighted" EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FF0A5987" Offset="0"/>
<GradientStop Color="#FF115F8B" Offset="1"/>
</LinearGradientBrush>
<CornerRadius x:Key="ControlInnerBorder_CornerRadius">1</CornerRadius>
<!-- style for ListBox -->
<Style x:Key="MyListBox" TargetType="ListBox">
<Setter Property="Padding" Value="1" />
<Setter Property="Background" Value="{StaticResource ControlBackground}" />
<Setter Property="Foreground" Value="{StaticResource ControlForeground_Normal}" />
<Setter Property="HorizontalContentAlignment" Value="Left" />
<Setter Property="VerticalContentAlignment" Value="Top" />
<Setter Property="IsTabStop" Value="False" />
<Setter Property="BorderThickness" Value="1" />
<Setter Property="TabNavigation" Value="Once" />
<Setter Property="BorderBrush" Value="{StaticResource ControlOuterBorder}" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListBox">
<ScrollViewer x:Name="ScrollViewer" Margin="0"
Padding="{TemplateBinding Padding}"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}">
<ItemsPresenter />
</ScrollViewer>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<!-- style for ListBoxItem -->
<Style x:Key="MyListBoxItem" TargetType="ListBoxItem">
<Setter Property="Padding" Value="3" />
<Setter Property="HorizontalContentAlignment" Value="Left" />
<Setter Property="VerticalContentAlignment" Value="Top" />
<Setter Property="Background" Value="Transparent" />
<Setter Property="BorderBrush" Value="Transparent" />
<Setter Property="BorderThickness" Value="1" />
<Setter Property="TabNavigation" Value="Local" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListBoxItem">
<Grid>
<vsm:VisualStateManager.VisualStateGroups>
<vsm:VisualStateGroup x:Name="CommonStates">
<vsm:VisualState x:Name="Normal" />
<vsm:VisualState x:Name="MouseOver">
<Storyboard>
<ObjectAnimationUsingKeyFrames
Storyboard.TargetName="MouseOverRectangle"
Storyboard.TargetProperty="Opacity" Duration="0">
<DiscreteObjectKeyFrame KeyTime="0" Value="1" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</vsm:VisualState>
<vsm:VisualState x:Name="Disabled">
<Storyboard>
<ObjectAnimationUsingKeyFrames
Storyboard.TargetName="contentPresenter"
Storyboard.TargetProperty="Opacity">
<DiscreteObjectKeyFrame KeyTime="0" Value="0.5" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</vsm:VisualState>
</vsm:VisualStateGroup>
</vsm:VisualStateManager.VisualStateGroups>
<!-- normal-->
<Border CornerRadius="{StaticResource ControlOuterBorder_CornerRadius}"
Margin="1,0" BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
Background="{TemplateBinding Background}" />
<!-- Mouseover -->
<Border x:Name="MouseOverRectangle" Opacity="0"
CornerRadius="{StaticResource ControlOuterBorder_CornerRadius}"
Margin="1,0" BorderBrush="{StaticResource ControlOuterBorder_Highlighted}"
BorderThickness="{TemplateBinding BorderThickness}">
<Border Background="{StaticResource ControlBackground_Highlighted}"
BorderBrush="{StaticResource ControlInnerBorder_Highlighted}"
BorderThickness="1"
CornerRadius="{StaticResource ControlInnerBorder_CornerRadius}" />
</Border>
<telerikChromes:ButtonChrome
RenderNormal="False" Margin="1,0"
RenderSelected="{TemplateBinding IsSelected}"
RenderEnabled="{TemplateBinding IsEnabled}"
CornerRadius="{StaticResource ControlOuterBorder_CornerRadius}" />
<ContentPresenter x:Name="contentPresenter" Margin="{TemplateBinding Padding}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ResourceDictionary>