Optimized RadTreeView xaml

[Ryan Black]

Hey Telerik!

I have been playing around with optimizing my xaml code for my controls and have ran into a question about performance.

Are both of these ways considered the same?  If the bottom is faster, how do I get my row height=60 in the Template to show below the list instead of below the first added item.

<Style x:Key="ccTemplate" TargetType="{x:Type ContentControl}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type ContentControl}" >
                <Grid x:Name="listBoxGrid" TextOptions.TextFormattingMode="Display">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="200*"/>
                        <RowDefinition Height="60" />
                    </Grid.RowDefinitions>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="80" />
                        <ColumnDefinition Width="80" />
                        <ColumnDefinition Width="80" />
                        <ColumnDefinition Width="80" />
                        <ColumnDefinition/>
                    </Grid.ColumnDefinitions>
                    <Grid Grid.ColumnSpan="6" >
                        <ContentPresenter />
                    </Grid>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

<Style x:Key="{x:Type control:ListBoxControl}" TargetType="{x:Type control:ListBoxControl}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate>
                <ContentControl Style="{StaticResource ccTemplate}" x:Name="cc">
                    <telerikNavigation:RadTreeView
                            Name="mainList"
                            ItemsSource="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=ItemsSource}"
                            ItemTemplate="{DynamicResource MainDataTemplate}"
                            ItemContainerStyle="{DynamicResource MainStyle}"
                            MinWidth="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=MinWidth}"
                            ScrollViewer.HorizontalScrollBarVisibility="Auto"
                            BorderBrush="#FF00569F"
                            Background="{DynamicResource ListItemBackground}"
                            BorderThickness="1"
                            SelectionMode="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=SelectionMode, FallbackValue=Single}"
                            IsDragDropEnabled="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=IsDragDropEnabled, FallbackValue=False}"
                            IsDropPreviewLineEnabled="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=IsDropPreviewLineEnabled, FallbackValue=True}"
                            AllowDrop="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=AllowDrop, FallbackValue=True}"
                            >
                    </telerikNavigation:RadTreeView>
                </ContentControl>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Vs.

<Style x:Key="{x:Type control:ListBoxControl}" TargetType="{x:Type control:ListBoxControl}">
       <Setter Property="ItemsSource" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=ItemsSource}" />
       <Setter Property="ItemTemplate" Value="{DynamicResource MainDataTemplate}"/>
       <Setter Property="ItemContainerStyle" Value="{DynamicResource MainStyle}"/>
       <Setter Property="BorderBrush" Value="#FF00569F"/>
       <Setter Property="Background" Value="{DynamicResource ListItemBackground}"/>
       <Setter Property="IsLineEnabled" Value="True"/>
       <Setter Property="IsRootLinesEnabled" Value="False"/>
       <Setter Property="BorderThickness" Value="1"/>
       <Setter Property="IsExpandOnSingleClickEnabled" Value="True" />
       <Setter Property="Validation.ErrorTemplate" Value="{DynamicResource ValidationTemplate}" />
       <Setter Property="SelectionMode" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=SelectionMode, FallbackValue=Single}" />
       <Setter Property="IsDragDropEnabled" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=IsDragDropEnabled, FallbackValue=False}" />
       <Setter Property="IsDropPreviewLineEnabled" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=IsDropPreviewLineEnabled, FallbackValue=True}" />
       <Setter Property="AllowDrop" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=AllowDrop, FallbackValue=True}" />
   </Style>

And adding the grid to the RadTreeTemplate

 <ControlTemplate x:Key="RadTreeViewMainItemControlTemplate" TargetType="{x:Type telerikNavigation:RadTreeViewItem}">

        <Grid x:Name="listBoxGrid" TextOptions.TextFormattingMode="Display">

            <Grid.RowDefinitions>

                <RowDefinition Height="200*"/>

                <RowDefinition Height="60" />

            </Grid.RowDefinitions>

            <Grid.ColumnDefinitions>

                <ColumnDefinition Width="80" />

                <ColumnDefinition Width="80" />

                <ColumnDefinition Width="80" />

                <ColumnDefinition Width="80" />

                <ColumnDefinition/>

            </Grid.ColumnDefinitions>

            <Grid Grid.ColumnSpan="6" >

                <Grid x:Name="RootElement" MinWidth="300" Cursor="Hand">

                    <Grid.RowDefinitions>

                        <RowDefinition Height="Auto"/>

                        <RowDefinition/>

                    </Grid.RowDefinitions>

                    <Grid x:Name="HeaderRow" MinHeight="{TemplateBinding MinHeight}" SnapsToDevicePixels="True" Background="Transparent">

                        <Grid.ColumnDefinitions>

                            <ColumnDefinition Width="Auto"/>

                            <ColumnDefinition Width="Auto"/>

                            <ColumnDefinition Width="Auto"/>

                            <ColumnDefinition Width="Auto"/>

                            <ColumnDefinition Width="Auto"/>

                            <ColumnDefinition Width="*"/>

                        </Grid.ColumnDefinitions>

                        <Border Grid.ColumnSpan="6" Background="{TemplateBinding Background}" BorderBrush="Transparent" BorderThickness="0" />

                        <Border x:Name="MouseOverVisual" Opacity="0"  Grid.ColumnSpan="6" Background="{DynamicResource ListItemMouseOver}" BorderBrush="{DynamicResource ListItemMouseOverBorder}" BorderThickness="0" />

                        <Border x:Name="SelectionUnfocusedVisual" Visibility="Collapsed" Grid.ColumnSpan="6" BorderBrush="Transparent" Background="{DynamicResource ListItemUnSelect}" BorderThickness="0" />

                        <Border x:Name="SelectionVisual" Visibility="Collapsed" Grid.ColumnSpan="6" BorderBrush="{DynamicResource ListItemSelectBorder}" Background="{DynamicResource ListItemSelect}" BorderThickness="0" />

                        <StackPanel x:Name="IndentContainer" Orientation="Horizontal">

                            <Rectangle x:Name="IndentFirstVerticalLine" />

                        </StackPanel>

                        <Grid x:Name="ListRootContainer" HorizontalAlignment="Center" MinWidth="20" Grid.Column="1">

                            <ToggleButton Name="MainToggle" Style="{DynamicResource ExpanderStyle}" IsTabStop="False" IsChecked="{TemplateBinding IsExpanded}"/>

                            <Grid x:Name="LoadingVisual" HorizontalAlignment="Center" VerticalAlignment="Center" RenderTransformOrigin="0.5,0.5" Visibility="Collapsed">

                                <Grid.RenderTransform>

                                    <TransformGroup>

                                        <RotateTransform Angle="0" CenterX="0.5" CenterY="0.5"/>

                                    </TransformGroup>

                                </Grid.RenderTransform>

                                <Path Stretch="Fill" Stroke="{TemplateBinding Foreground}" StrokeStartLineCap="Round" StrokeThickness="1" Width="10" Height="10" Data="M1,0A1,1,90,1,1,0,-1"/>

                                <Path Fill="{TemplateBinding Foreground}" Stretch="Fill" StrokeThickness="1" HorizontalAlignment="Left" Margin="5,-1.5,0,0" VerticalAlignment="Top" Width="4" Height="4" Data="M0,-1.1L0.1,-1 0,-0.9"/>

                            </Grid>

                        </Grid>

                        <CheckBox x:Name="CheckBoxElement" Margin="5,0,0,0" VerticalAlignment="Center" IsTabStop="False" Visibility="Collapsed" Grid.Column="2">

                        </CheckBox>

                        <RadioButton x:Name="RadioButtonElement" Margin="5,0,0,0" VerticalAlignment="Center" IsTabStop="False" Visibility="Collapsed" Grid.Column="2">

                        </RadioButton>

                        <Image x:Name="Image" HorizontalAlignment="Center" Margin="2" MaxHeight="16" MaxWidth="16" VerticalAlignment="Center" Grid.Column="3" Source="{TemplateBinding DefaultImageSrc}"/>

                        <Rectangle x:Name="FocusVisual"/>

                        <Grid Grid.Column="4" Grid.ColumnSpan="2">

                            <ContentPresenter x:Name="Header"

                                      HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"

                                      Margin="{TemplateBinding Padding}"

                                      VerticalAlignment="{TemplateBinding VerticalContentAlignment}"

                                      ContentSource="Header"/>

                            <ContentPresenter x:Name="EditHeaderElement" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Visibility="Collapsed" ContentTemplate="{TemplateBinding HeaderEditTemplate}"/>

                        </Grid>

                    </Grid>

                    <Border BorderThickness="0 0 0 2" BorderBrush="{DynamicResource BottomListItem}" />

                    <ItemsPresenter x:Name="ItemsHost" Visibility="Collapsed" Grid.Row="1" DataContext="{Binding}" />

                    <Border BorderThickness="0 0 0 2" BorderBrush="{DynamicResource BottomListItem}" />

                </Grid>

            </Grid>

        </Grid>

        <ControlTemplate.Triggers>

            <Trigger Property="IsInEditMode" Value="True">

                <Setter Property="Visibility" TargetName="Header" Value="Collapsed"/>

                <Setter Property="Visibility" TargetName="EditHeaderElement" Value="Visible"/>

            </Trigger>

            <Trigger Property="IsSelected" Value="True">

                <Setter Property="Visibility" TargetName="SelectionVisual" Value="Visible"/>

                <Setter Property="BorderThickness" Value="1" />

            </Trigger>

            <Trigger Property="IsFocused" Value="True">

                <Setter Property="Visibility" TargetName="FocusVisual" Value="Visible"/>

            </Trigger>

            <MultiTrigger>

                <MultiTrigger.Conditions>

                    <Condition Property="IsSelected" Value="True"/>

                    <Condition Property="IsSelectionActive" Value="False"/>

                </MultiTrigger.Conditions>

                <Setter Property="Opacity" TargetName="SelectionVisual" Value="1"/>

                <Setter Property="Visibility" TargetName="SelectionUnfocusedVisual" Value="Visible"/>

            </MultiTrigger>

            <Trigger Property="IsEnabled" Value="False">

                <Setter Property="Opacity" TargetName="Header" Value="0.5"/>

            </Trigger>

            <Trigger Property="IsExpanded" Value="True">

                <Setter Property="Visibility" TargetName="ItemsHost" Value="Visible"/>

            </Trigger>

            <Trigger Property="HasItems" Value="False">

                <Setter Property="Visibility" TargetName="MainToggle" Value="Collapsed" />

            </Trigger>

            <Trigger Property="IsLoadingOnDemand" Value="True">

                <Trigger.EnterActions>

                    <BeginStoryboard>

                        <Storyboard>

                            <DoubleAnimation Duration="00:00:01" RepeatBehavior="Forever" Storyboard.TargetName="LoadingVisualAngleTransform" Storyboard.TargetProperty="Angle" From="0" To="359"/>

                        </Storyboard>

                    </BeginStoryboard>

                </Trigger.EnterActions>

                <Setter Property="Visibility" TargetName="LoadingVisual" Value="Visible"/>

            </Trigger>

            <Trigger Property="IsDragOver" Value="True">

                <Setter Property="Opacity" TargetName="MouseOverVisual" Value="1"/>

            </Trigger>

            <Trigger Property="IsMouseOver" SourceName="HeaderRow" Value="True">

                <Setter Property="Opacity" TargetName="MouseOverVisual" Value="1"/>

            </Trigger>

        </ControlTemplate.Triggers>

    </ControlTemplate>

<ControlTemplate x:Key="RadTreeViewMainItemControlTemplate" TargetType="{x:Type telerikNavigation:RadTreeViewItem}">
       <Grid x:Name="listBoxGrid" TextOptions.TextFormattingMode="Display">
           <Grid.RowDefinitions>
               <RowDefinition Height="200*"/>
               <RowDefinition Height="60" />
           </Grid.RowDefinitions>
           <Grid.ColumnDefinitions>
               <ColumnDefinition Width="80" />
               <ColumnDefinition Width="80" />
               <ColumnDefinition Width="80" />
               <ColumnDefinition Width="80" />
               <ColumnDefinition/>
           </Grid.ColumnDefinitions>
           <Grid Grid.ColumnSpan="6" >
               <Grid x:Name="RootElement" MinWidth="300" Cursor="Hand">
                   <Grid.RowDefinitions>
                       <RowDefinition Height="Auto"/>
                       <RowDefinition/>
                   </Grid.RowDefinitions>
                   <Grid x:Name="HeaderRow" MinHeight="{TemplateBinding MinHeight}" SnapsToDevicePixels="True" Background="Transparent">
                       <Grid.ColumnDefinitions>
                           <ColumnDefinition Width="Auto"/>
                           <ColumnDefinition Width="Auto"/>
                           <ColumnDefinition Width="Auto"/>
                           <ColumnDefinition Width="Auto"/>
                           <ColumnDefinition Width="Auto"/>
                           <ColumnDefinition Width="*"/>
                       </Grid.ColumnDefinitions>
                       <Border Grid.ColumnSpan="6" Background="{TemplateBinding Background}" BorderBrush="Transparent" BorderThickness="0" />
                       <Border x:Name="MouseOverVisual" Opacity="0"  Grid.ColumnSpan="6" Background="{DynamicResource ListItemMouseOver}" BorderBrush="{DynamicResource ListItemMouseOverBorder}" BorderThickness="0" />

                       <Border x:Name="SelectionUnfocusedVisual" Visibility="Collapsed" Grid.ColumnSpan="6" BorderBrush="Transparent" Background="{DynamicResource ListItemUnSelect}" BorderThickness="0" />

                       <Border x:Name="SelectionVisual" Visibility="Collapsed" Grid.ColumnSpan="6" BorderBrush="{DynamicResource ListItemSelectBorder}" Background="{DynamicResource ListItemSelect}" BorderThickness="0" />

                       <StackPanel x:Name="IndentContainer" Orientation="Horizontal">
                           <Rectangle x:Name="IndentFirstVerticalLine" />
                       </StackPanel>
                       <Grid x:Name="ListRootContainer" HorizontalAlignment="Center" MinWidth="20" Grid.Column="1">
                           <ToggleButton Name="MainToggle" Style="{DynamicResource ExpanderStyle}" IsTabStop="False" IsChecked="{TemplateBinding IsExpanded}"/>
                           <Grid x:Name="LoadingVisual" HorizontalAlignment="Center" VerticalAlignment="Center" RenderTransformOrigin="0.5,0.5" Visibility="Collapsed">
                               <Grid.RenderTransform>
                                   <TransformGroup>
                                       <RotateTransform Angle="0" CenterX="0.5" CenterY="0.5"/>
                                   </TransformGroup>
                               </Grid.RenderTransform>
                               <Path Stretch="Fill" Stroke="{TemplateBinding Foreground}" StrokeStartLineCap="Round" StrokeThickness="1" Width="10" Height="10" Data="M1,0A1,1,90,1,1,0,-1"/>
                               <Path Fill="{TemplateBinding Foreground}" Stretch="Fill" StrokeThickness="1" HorizontalAlignment="Left" Margin="5,-1.5,0,0" VerticalAlignment="Top" Width="4" Height="4" Data="M0,-1.1L0.1,-1 0,-0.9"/>
                           </Grid>
                       </Grid>
                       <CheckBox x:Name="CheckBoxElement" Margin="5,0,0,0" VerticalAlignment="Center" IsTabStop="False" Visibility="Collapsed" Grid.Column="2">
                       </CheckBox>
                       <RadioButton x:Name="RadioButtonElement" Margin="5,0,0,0" VerticalAlignment="Center" IsTabStop="False" Visibility="Collapsed" Grid.Column="2">
                       </RadioButton>
                       <Image x:Name="Image" HorizontalAlignment="Center" Margin="2" MaxHeight="16" MaxWidth="16" VerticalAlignment="Center" Grid.Column="3" Source="{TemplateBinding DefaultImageSrc}"/>
                       <Rectangle x:Name="FocusVisual"/>
                       <Grid Grid.Column="4" Grid.ColumnSpan="2">
                           <ContentPresenter x:Name="Header"
                                     HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                     Margin="{TemplateBinding Padding}"
                                     VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                     ContentSource="Header"/>
                           <ContentPresenter x:Name="EditHeaderElement" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Visibility="Collapsed" ContentTemplate="{TemplateBinding HeaderEditTemplate}"/>
                       </Grid>
                   </Grid>
                   <Border BorderThickness="0 0 0 2" BorderBrush="{DynamicResource BottomListItem}" />
                   <ItemsPresenter x:Name="ItemsHost" Visibility="Collapsed" Grid.Row="1" DataContext="{Binding}" />
                   <Border BorderThickness="0 0 0 2" BorderBrush="{DynamicResource BottomListItem}" />

               </Grid>
           </Grid>
       </Grid>
       <ControlTemplate.Triggers>
           <Trigger Property="IsInEditMode" Value="True">
               <Setter Property="Visibility" TargetName="Header" Value="Collapsed"/>
               <Setter Property="Visibility" TargetName="EditHeaderElement" Value="Visible"/>
           </Trigger>
           <Trigger Property="IsSelected" Value="True">
               <Setter Property="Visibility" TargetName="SelectionVisual" Value="Visible"/>
               <Setter Property="BorderThickness" Value="1" />
           </Trigger>
           <Trigger Property="IsFocused" Value="True">
               <Setter Property="Visibility" TargetName="FocusVisual" Value="Visible"/>
           </Trigger>
           <MultiTrigger>
               <MultiTrigger.Conditions>
                   <Condition Property="IsSelected" Value="True"/>
                   <Condition Property="IsSelectionActive" Value="False"/>
               </MultiTrigger.Conditions>
               <Setter Property="Opacity" TargetName="SelectionVisual" Value="1"/>
               <Setter Property="Visibility" TargetName="SelectionUnfocusedVisual" Value="Visible"/>
           </MultiTrigger>
           <Trigger Property="IsEnabled" Value="False">
               <Setter Property="Opacity" TargetName="Header" Value="0.5"/>
           </Trigger>
           <Trigger Property="IsExpanded" Value="True">
               <Setter Property="Visibility" TargetName="ItemsHost" Value="Visible"/>
           </Trigger>
           <Trigger Property="HasItems" Value="False">
               <Setter Property="Visibility" TargetName="MainToggle" Value="Collapsed" />
           </Trigger>
           <Trigger Property="IsLoadingOnDemand" Value="True">
               <Trigger.EnterActions>
                   <BeginStoryboard>
                       <Storyboard>
                           <DoubleAnimation Duration="00:00:01" RepeatBehavior="Forever" Storyboard.TargetName="LoadingVisualAngleTransform" Storyboard.TargetProperty="Angle" From="0" To="359"/>
                       </Storyboard>
                   </BeginStoryboard>
               </Trigger.EnterActions>
               <Setter Property="Visibility" TargetName="LoadingVisual" Value="Visible"/>
           </Trigger>
           <Trigger Property="IsDragOver" Value="True">
               <Setter Property="Opacity" TargetName="MouseOverVisual" Value="1"/>
           </Trigger>
           <Trigger Property="IsMouseOver" SourceName="HeaderRow" Value="True">
               <Setter Property="Opacity" TargetName="MouseOverVisual" Value="1"/>
           </Trigger>
       </ControlTemplate.Triggers>
   </ControlTemplate>

[Petar Mladenov]

Hello Ryan Black,

We would highly appreciate if you send us a runnable sample that demonstrates the behavior of your custom control. This way we would investigate better and provide you with a more accurate advice. Thank you in advance.

All the best,
Petar Mladenov
the Telerik team