I am using Telerik’s RadPanelBar and customizing it by deriving the class from RadPanelbar. But when i start the project it will be normal black theme applied to the control. How to override this. IF i try this setting inside the xaml on the local app( i mean not in customcontrol Library) then it works exactly as i want it)
Here is a sample
<Style TargetType="{x:Type local:CISAccordion}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type local:CISAccordion}">
<Border Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}">
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="ItemContainerStyle" Value="{StaticResource TopLevelStyle}"/>
<Setter Property="FontFamily" Value="Microsoft Sans Serif"/>
<Setter Property="FontSize" Value="11"/>
<Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Disabled"/>
<Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Disabled"/>
</Style>
<Style x:Key="TopLevelStyle" x:Name="RadPanelBarItemStyle" TargetType="{x:Type telerik:RadPanelBarItem}">
<Setter Property="Background">
<Setter.Value>
<SolidColorBrush Color="{DynamicResource {x:Static SystemColors.GradientInactiveCaptionColorKey}}"/>
</Setter.Value>
</Setter>
<Setter Property="BorderBrush">
<Setter.Value>
<SolidColorBrush Color="{DynamicResource {x:Static SystemColors.GradientInactiveCaptionColorKey}}"/>
</Setter.Value>
</Setter>
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
<Setter Property="VerticalContentAlignment" Value="Stretch"/>
<Setter Property="ChildItemsTemplate">
<Setter.Value>
<ControlTemplate TargetType="{x:Type telerik:RadPanelBarItem}">
<Grid x:Name="RootElement">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid x:Name="HeaderRow" Background="Transparent">
<!--<Border x:Name="MouseOverVisual" BorderBrush="#FFFFC92B" BorderThickness="1" CornerRadius="1" Opacity="0">
<Border BorderBrush="White" BorderThickness="1" CornerRadius="0">
<Border.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FFFFFBA3" Offset="1"/>
<GradientStop Color="#FFFFFBDA" Offset="0"/>
</LinearGradientBrush>
</Border.Background>
</Border>
</Border>
<Border x:Name="SelectionVisual" BorderBrush="#FFFFC92B" BorderThickness="1" CornerRadius="1" Opacity="0">
<Border BorderBrush="White" BorderThickness="1" CornerRadius="0">
<Border.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FFFCE79F" Offset="1"/>
<GradientStop Color="#FFFDD3A8"/>
</LinearGradientBrush>
</Border.Background>
</Border>
</Border>-->
<Border x:Name="DisabledVisual" BorderBrush="#FF989898" BorderThickness="1" CornerRadius="1" Opacity="0">
<Border BorderBrush="Transparent" BorderThickness="1" Background="#FFE0E0E0" CornerRadius="0"/>
</Border>
<ContentControl x:Name="Header" ContentTemplate="{TemplateBinding HeaderTemplate}" Foreground="{TemplateBinding Foreground}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
<Rectangle x:Name="FocusVisual" IsHitTestVisible="False" RadiusY="2" RadiusX="2" Stroke="Black" StrokeThickness="1" StrokeDashArray="1 2" Visibility="Collapsed"/>
</Grid>
<Grid x:Name="ItemsContainer" Grid.Row="1" Visibility="Collapsed">
<ItemsPresenter/>
</Grid>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsSelected" Value="True">
<!--<Setter Property="Opacity" TargetName="SelectionVisual" Value="1"/>-->
</Trigger>
<Trigger Property="IsFocused" Value="True">
<Setter Property="Visibility" TargetName="FocusVisual" Value="Visible"/>
</Trigger>
<Trigger Property="IsExpanded" Value="True">
<Setter Property="Visibility" TargetName="ItemsContainer" Value="Visible"/>
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Opacity" TargetName="DisabledVisual" Value="1"/>
</Trigger>
<!--<EventTrigger RoutedEvent="Mouse.MouseEnter" SourceName="HeaderRow">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Duration="0:0:0.2" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="MouseOverVisual"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
<EventTrigger RoutedEvent="Mouse.MouseLeave" SourceName="HeaderRow">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Duration="0:0:0.2" To="0" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="MouseOverVisual"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>-->
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="Level" Value="1">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type telerik:RadPanelBarItem}">
<Grid x:Name="RootElement" SnapsToDevicePixels="True">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid x:Name="HeaderRow">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Border x:Name="NormalVisual" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Grid.ColumnSpan="5">
<Border BorderBrush="White" BorderThickness="1" Background="{TemplateBinding Background}"/>
</Border>
<Border x:Name="SelectVisual" BorderThickness="1" Grid.ColumnSpan="5" Opacity="0" BorderBrush="{x:Null}">
<Border BorderThickness="1" Background="{x:Null}" BorderBrush="{x:Null}"/>
</Border>
<Border x:Name="DisabledVisual" BorderBrush="#FF989898" BorderThickness="1" Grid.ColumnSpan="5" Opacity="0">
<Border BorderBrush="Transparent" BorderThickness="1" Background="{x:Null}"/>
</Border>
<Path x:Name="arrow" Grid.Column="5" Visibility="{Binding ArrowVisible}" Data="M1,1.5L4.5,5 8,1.5" HorizontalAlignment="Right" Margin="7,0" Opacity="1" RenderTransformOrigin="0.5,0.5" Stretch="None" Stroke="Black" StrokeThickness="2" VerticalAlignment="Center">
<Path.RenderTransform>
<RotateTransform Angle="0"/>
</Path.RenderTransform>
</Path>
<ContentControl x:Name="Header" Grid.ColumnSpan="4" ContentTemplate="{TemplateBinding HeaderTemplate}" Foreground="{TemplateBinding Foreground}" FontSize="{TemplateBinding FontSize}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
<Rectangle x:Name="FocusVisual" Grid.ColumnSpan="5" Grid.Column="0" IsHitTestVisible="False" Stroke="Black" StrokeThickness="1" StrokeDashArray="1 2" Visibility="Collapsed"/>
</Grid>
<Grid x:Name="ItemsContainer" Grid.Row="1" Visibility="Collapsed">
<telerik:LayoutTransformControl x:Name="transformationRoot" IsTabStop="False">
<ItemsPresenter/>
</telerik:LayoutTransformControl>
</Grid>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter Property="Opacity" TargetName="SelectVisual" Value="1"/>
</Trigger>
<Trigger Property="IsFocused" Value="True">
<Setter Property="Visibility" TargetName="FocusVisual" Value="Visible"/>
</Trigger>
<Trigger Property="IsExpanded" Value="True">
<Setter Property="LayoutTransform" TargetName="arrow">
<Setter.Value>
<TransformGroup>
<RotateTransform Angle="180"/>
</TransformGroup>
</Setter.Value>
</Setter>
<Setter Property="Visibility" TargetName="ItemsContainer" Value="Visible"/>
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Opacity" TargetName="DisabledVisual" Value="1"/>
<Setter Property="Opacity" TargetName="NormalVisual" Value="0"/>
</Trigger>
<Trigger Property="IsMouseOver" Value="True"/>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Trigger>
</Style.Triggers>
</Style>
if i place this TopLevelStyle in the App.xaml and give it as itemContainerStyle then it will work normally means the control will be having the colors and animation i wanted.
I found out a another way to do that using a UserControl and then applying style to it. It did not work when applying themes from the Generic.xaml. If there is any other way i will really appreciate the help