Find a control in BarItemControlTemplate

[Michael]

Hi

I have a custom style for the BarItemControlTemplate,  I'm trying to find the Grid element via code, but the FindName always return null. My goal is to be able to find the ScrollViewer element with in this template so that i can add a event handler for the ScrollChanged event. 

private void OnBreadCrumbControlCurrentItemChanged(object sender, RadRoutedEventArgs e)
{
    var breadcrumb = sender as RadBreadcrumb;

    if (breadcrumb != null)
    {
        var grid = breadcrumb.BarItemControlTemplate.FindName("Grid", breadcrumb.CurrentContainer) as Grid;
        grid = breadcrumb.BarItemControlTemplate.FindName("Grid", breadcrumb) as Grid;
    }
}

<Style x:Key="RadBreadcrumbStyle" TargetType="{x:Type telerik:RadBreadcrumb}">
    <Setter Property="BarItemControlTemplate">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type telerikNavigation:RadBreadcrumbBarItem}">
                <Grid x:Name="Grid">
                    <Border x:Name="headerContainer" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}">
                        <telerik:RadSplitButton x:Name="SplitButton" ContentTemplate="{TemplateBinding HeaderTemplate}" Content="{TemplateBinding Header}" Command="telerikNavigation:RadBreadcrumbCommands.ClearSelectedItem" Foreground="{TemplateBinding Foreground}"
                                                IsOpen="{Binding IsPopupOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}" InnerCornerRadius="0" Margin="0"
                                                Style="{TemplateBinding SplitButtonStyle}">
                            <telerik:RadSplitButton.DropDownContent>
                                <ScrollViewer x:Name="ScrollViewer" BorderThickness="0" HorizontalScrollBarVisibility="Auto" MaxWidth="270" MinWidth="200" Padding="0" MaxHeight="200" VerticalScrollBarVisibility="Auto">
                                    <Grid>
                                        <Grid HorizontalAlignment="Left" Width="32">
                                            <Border BorderBrush="Transparent" BorderThickness="0,0,1,0" Background="#FF848484" HorizontalAlignment="Right" Width="2"/>
                                            <Rectangle Fill="#FFF0F0F0" Margin="0,0,2,0"/>
                                        </Grid>
                                        <ItemsPresenter Margin="3"/>
                                    </Grid>
                                </ScrollViewer>
                            </telerik:RadSplitButton.DropDownContent>
                        </telerik:RadSplitButton>
                    </Border>
                </Grid>
                <ControlTemplate.Triggers>
                    <Trigger Property="HasItems" Value="False">
                        <Setter Property="DropDownIndicatorVisibility" TargetName="SplitButton" Value="Collapsed"/>
                    </Trigger>
                    <Trigger Property="IsLinearMode" Value="True">
                        <Setter Property="DropDownIndicatorVisibility" TargetName="SplitButton" Value="Collapsed"/>
                    </Trigger>
                    <Trigger Property="IsButtonPartHidden" Value="True">
                        <Setter Property="IsButtonPartVisible" TargetName="SplitButton" Value="False"/>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

[Zarko]

Hello,
Could you please send us some more code snippets or a project with the issue because I wasn't able to reproduce it. I've attached the sample project that I used for testing so you could examine it and see if it helps you. In the project I use the FindName method to find the grid and change its Background and everything seem to work fine.
We're looking forward to hearing from you.

Regards,
Zarko
the Telerik team

[Michael]

Sorry forgot to say that the Breadcrumb control is part of a custom control. Using your example I added the following custom control and when the current item is changed the grid is always null.

public class CustomControl : Control
   {
       static CustomControl()
       {
           DefaultStyleKeyProperty.OverrideMetadata(typeof(CustomControl), new FrameworkPropertyMetadata(typeof(CustomControl)));
       }

       protected override void OnInitialized(EventArgs e)
       {
           base.OnInitialized(e);
           DataContext = new MainViewModel();
       }

       public override void OnApplyTemplate()
       {
           base.OnApplyTemplate();

           var breadcrumb = Template.FindName("breadcrumb", this) as RadBreadcrumb;

           if (breadcrumb != null)
           {
               breadcrumb.CurrentItemChanged += OnBreadcrumbCurrentItemChanged;
            }
       }

       private void OnBreadcrumbCurrentItemChanged(object sender, Telerik.Windows.RadRoutedEventArgs e)
       {
           var breadcrumb = sender as RadBreadcrumb;

           if (breadcrumb != null)
           {
               var grid = breadcrumb.BarItemControlTemplate.FindName("Grid", breadcrumb.CurrentContainer) as Grid;

               if (grid != null)
               {
                   grid.Background = new SolidColorBrush(Colors.Red);
               }
           }
       }
   }

<ResourceDictionary
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="clr-namespace:Breadcrumb"
    xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
    xmlns:telerikNavigation="clr-namespace:Telerik.Windows.Controls.Breadcrumb;assembly=Telerik.Windows.Controls.Navigation">

    <Style x:Key="RadBreadcrumbStyle" TargetType="{x:Type telerik:RadBreadcrumb}">
        <Setter Property="BarItemControlTemplate">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type telerikNavigation:RadBreadcrumbBarItem}">
                    <Grid x:Name="Grid">
                        <Border x:Name="headerContainer"
                                        Background="{TemplateBinding Background}"
                                        BorderBrush="{TemplateBinding BorderBrush}"
                                        BorderThickness="{TemplateBinding BorderThickness}">
                            <telerik:RadSplitButton x:Name="SplitButton"
                                                            Margin="0"
                                                            Command="telerikNavigation:RadBreadcrumbCommands.ClearSelectedItem"
                                                            Content="{TemplateBinding Header}"
                                                            ContentTemplate="{TemplateBinding HeaderTemplate}"
                                                            Foreground="{TemplateBinding Foreground}"
                                                            InnerCornerRadius="0"
                                                            IsOpen="{Binding IsPopupOpen,
                                                                             Mode=TwoWay,
                                                                             RelativeSource={RelativeSource TemplatedParent}}"
                                                            Style="{TemplateBinding SplitButtonStyle}">
                                <telerik:RadSplitButton.DropDownContent>
                                    <ScrollViewer x:Name="ScrollViewer"
                                                          MinWidth="200"
                                                          MaxWidth="270"
                                                          MaxHeight="200"
                                                          BorderThickness="0"
                                                          HorizontalScrollBarVisibility="Auto"
                                                          Padding="0"
                                                          VerticalScrollBarVisibility="Auto">
                                        <Grid>
                                            <Grid Width="32" HorizontalAlignment="Left">
                                                <Border Width="2"
                                                                HorizontalAlignment="Right"
                                                                Background="#FF848484"
                                                                BorderBrush="Transparent"
                                                                BorderThickness="0,0,1,0" />
                                                <Rectangle Margin="0,0,2,0" Fill="#FFF0F0F0" />
                                            </Grid>
                                            <ItemsPresenter Margin="3" />
                                        </Grid>
                                    </ScrollViewer>
                                </telerik:RadSplitButton.DropDownContent>
                            </telerik:RadSplitButton>
                        </Border>
                    </Grid>
                    <ControlTemplate.Triggers>
                        <Trigger Property="HasItems" Value="False">
                            <Setter TargetName="SplitButton" Property="DropDownIndicatorVisibility" Value="Collapsed" />
                        </Trigger>
                        <Trigger Property="IsLinearMode" Value="True">
                            <Setter TargetName="SplitButton" Property="DropDownIndicatorVisibility" Value="Collapsed" />
                        </Trigger>
                        <Trigger Property="IsButtonPartHidden" Value="True">
                            <Setter TargetName="SplitButton" Property="IsButtonPartVisible" Value="False" />
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <Style TargetType="{x:Type local:CustomControl}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type local:CustomControl}">
                    <Border Background="{TemplateBinding Background}"
                            BorderBrush="{TemplateBinding BorderBrush}"
                            BorderThickness="{TemplateBinding BorderThickness}">
                        <telerik:RadBreadcrumb x:Name="breadcrumb"
                               Height="30"
                               Header="Root"
                               HeaderMemberPath="Header"
                               HierarchicalItemsSource="Items"
                               HierarchicalMemberPath="Header"
                               ItemsSource="{Binding Items}"
                               Style="{StaticResource RadBreadcrumbStyle}" />
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</ResourceDictionary>

[Zarko]

Hi Michael,
After a bit of investigation I figured out that the problem is not in the custom control but in the time that you try to find the grid. In the CurrentItemChanged handler the CurrentContainer is created but its template is still not applied and that's why the grid is always null. If you just want to change the background of the Grid you can directly set it to the Background property of the container like this:

private void OnBreadcrumbCurrentItemChanged(object sender, Telerik.Windows.RadRoutedEventArgs e)
{
    this.breadcrumb = sender as RadBreadcrumb;

    if (this.breadcrumb != null && breadcrumb.CurrentContainer != null)
    {
        breadcrumb.CurrentContainer.Background = new SolidColorBrush(Colors.Red);
    }
}

If you want to do something else your can try to handle the LayoutUpdated of the container because it's thrown right after the template is applied.
I've attached a sample project that shows this cases so could you please examine it and if you have further questions feel free to ask.

Regards,
Zarko
the Telerik team