Search code examples
wpfxamltelerikcustom-controlsradpanelbar

How to extend RadPanelBar Custom Control ItemContainerStyle?


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.


Solution

  • 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