Optimized RadTreeView xaml

2 posts, 0 answers
  1. Ryan Black
    Ryan Black avatar
    54 posts
    Member since:
    Mar 2010

    Posted 14 Dec 2010 Link to this post

    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>


  2. Petar Mladenov
    Admin
    Petar Mladenov avatar
    2891 posts

    Posted 20 Dec 2010 Link to this post

    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
    Browse the videos here>> to help you get started with RadControls for WPF
  3. UI for WPF is Visual Studio 2017 Ready
Back to Top