templated tree view

8 posts, 0 answers
  1. Khurram
    Khurram avatar
    5 posts
    Member since:
    Jun 2011

    Posted 08 Jun 2011 Link to this post

    Hi,
    I am working on templated tree view, i have attached the file . In that i have colored the text background of the tree view items.
    I want to color the whole rectangle , what should i do for that.

    Thanks n Regards

    Khurram
  2. Khurram
    Khurram avatar
    5 posts
    Member since:
    Jun 2011

    Posted 10 Jun 2011 Link to this post

    Actually what i need to do is i want to bind color property with the rectangle. Currently I have bind it with the Border's background property on textblock .


    Rectangel control is in itemContainerStyle thats what is creating a problem, please look into it , its very urgent.

    Regards,
    Khurram
  3. DevCraft banner
  4. Petar Mladenov
    Admin
    Petar Mladenov avatar
    2891 posts

    Posted 13 Jun 2011 Link to this post

    Hello Khurram,

    I guess you use the Custom Controltemplate from the TemplatedNodes demo:
    <Grid Grid.Row="0" x:Name="HeaderRow" Height="Auto" VerticalAlignment="Bottom">
                          <Rectangle RadiusX="3" RadiusY="3" Stroke="#FF709FDA" StrokeLineJoin="Bevel" StrokeThickness="1">
                              <Rectangle.Fill>
                                  <!--<LinearGradientBrush EndPoint="0.5,0.034" StartPoint="0.5,0.966">
                                      <GradientStop Color="#FFE4E5F0" Offset="0" />
                                      <GradientStop Color="#FFFFFFFF" Offset="1" />
                                  </LinearGradientBrush>-->
                                  DeepSkyBlue
                              </Rectangle.Fill>
                          </Rectangle>
    If so, you can use the Rectangle inside the HeaderRow Grid adn set its fill. Please let us know if this helped you or not.

    Best wishes,
    Petar Mladenov
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  5. Khurram
    Khurram avatar
    5 posts
    Member since:
    Jun 2011

    Posted 15 Jun 2011 Link to this post

    Hi,Thanks for ur reply. Actually i m biniding the color with the tree item ,means every item in the tree has a color property and that can be changed. So as u can see the image that i had uploaded in my first post, there are hierhical templates , it is actually a two depth tree, in which root node is e.g "Objective", its childs are "Goals" and Goals have "Tactics". The scenario was either Objective is directly linked or linked through a tactic , if it  is directly linked the Objective Color would be changed (from red to yellow), and if it is linked through tactic then there would be color in the hiearchiy, means tactic , goal and objective.In the start all would be having red color. For making it more clear i m pasting my xaml below:

    <DataTemplate x:Key="TacticTemplate">
               <Border Background="{Binding TacticColor}">
                   <TextBlock Text="{Binding TacticName}" TextWrapping="Wrap" Width="100" Height="30" ToolTipService.ToolTip="{Binding TacticName}" />
               </Border>
           </DataTemplate>
     
           <telerik:HierarchicalDataTemplate x:Key="GoalTemplate"
                    
                   ItemTemplate="{StaticResource TacticTemplate}" ItemsSource="{Binding Tactics,Mode=TwoWay}">
               <Border Background="{Binding GoalColor}">
                   <TextBlock Text="{Binding GoalName}" TextWrapping="Wrap" Width="100" Height="30" ToolTipService.ToolTip="{Binding GoalName}"  />
               </Border>
           </telerik:HierarchicalDataTemplate>
     
            
            
           <telerik:HierarchicalDataTemplate x:Key="ObjectiveTemplate"
                    
                   ItemTemplate="{StaticResource GoalTemplate}"  ItemsSource="{Binding Goals,Mode=TwoWay}" >
               <Border Background="{Binding ObjectiveColor}">
                   <TextBlock Text="{Binding ObjectiveName}" TextWrapping="Wrap" Width="100" Height="30" ToolTipService.ToolTip="{Binding ObjectiveName}"  />
               </Border>
           </telerik:HierarchicalDataTemplate>
            
            
            
            
            
            
           <!-- Customizing TreeView -->
     
           <ControlTemplate TargetType="telerikControl:RadTreeViewItem"
                       x:Key="TreeViewItemDefaultTemplate">
               <Grid Margin="2" Height="Auto" VerticalAlignment="Top">
                   <VisualStateManager.VisualStateGroups>
                       <VisualStateGroup x:Name="CommonStates">
                           <VisualState x:Name="Normal">
                               <Storyboard></Storyboard>
                           </VisualState>
                       </VisualStateGroup>
                       <VisualStateGroup x:Name="SelectionStates">
                           <VisualState x:Name="Unselected"></VisualState>
                           <VisualState x:Name="Selected">
                               <Storyboard>
                                   <ObjectAnimationUsingKeyFrames
                                               Storyboard.TargetName="SelectionVisual"
                                               Storyboard.TargetProperty="Visibility" Duration="0">
                                       <DiscreteObjectKeyFrame KeyTime="0">
                                           <DiscreteObjectKeyFrame.Value>
                                               <Visibility>Visible</Visibility>
                                           </DiscreteObjectKeyFrame.Value>
                                       </DiscreteObjectKeyFrame>
                                   </ObjectAnimationUsingKeyFrames>
                               </Storyboard>
                           </VisualState>
                       </VisualStateGroup>
                       <VisualStateGroup x:Name="FocusStates">
                           <VisualState x:Name="Focused">
                               <Storyboard>
                                   <ObjectAnimationUsingKeyFrames
                                               Storyboard.TargetName="FocusVisual"
                                               Storyboard.TargetProperty="Visibility" Duration="0">
                                       <DiscreteObjectKeyFrame KeyTime="0">
                                           <DiscreteObjectKeyFrame.Value>
                                               <Visibility>Visible</Visibility>
                                           </DiscreteObjectKeyFrame.Value>
                                       </DiscreteObjectKeyFrame>
                                   </ObjectAnimationUsingKeyFrames>
                               </Storyboard>
                           </VisualState>
                           <VisualState x:Name="Unfocused"></VisualState>
                       </VisualStateGroup>
                       <VisualStateGroup x:Name="ExpandStates">
                           <VisualState x:Name="Expanded">
                               <Storyboard>
                                   <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ItemsHost"
                                               Storyboard.TargetProperty="Visibility" Duration="0">
                                       <DiscreteObjectKeyFrame KeyTime="0">
                                           <DiscreteObjectKeyFrame.Value>
                                               <Visibility>Visible</Visibility>
                                           </DiscreteObjectKeyFrame.Value>
                                       </DiscreteObjectKeyFrame>
                                   </ObjectAnimationUsingKeyFrames>
                                   <DoubleAnimation Storyboard.TargetName="ItemsHost"
                                               Storyboard.TargetProperty="Opacity" From="0.1" To="1.0"
                                               Duration="0:0:0.2" />
                               </Storyboard>
                           </VisualState>
                           <VisualState x:Name="Collapsed">
                               <Storyboard>
                                   <DoubleAnimation Storyboard.TargetName="ItemsHost"
                                               Storyboard.TargetProperty="Opacity" From="1" To="0.1"
                                               Duration="0:0:0.2" />
                                   <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ItemsHost"
                                               Storyboard.TargetProperty="Visibility" Duration="0"
                                               BeginTime="0:0:0.2">
                                       <DiscreteObjectKeyFrame KeyTime="0">
                                           <DiscreteObjectKeyFrame.Value>
                                               <Visibility>Collapsed</Visibility>
                                           </DiscreteObjectKeyFrame.Value>
                                       </DiscreteObjectKeyFrame>
                                   </ObjectAnimationUsingKeyFrames>
                               </Storyboard>
                           </VisualState>
                       </VisualStateGroup>
                   </VisualStateManager.VisualStateGroups>
                   <Grid.RowDefinitions>
                       <RowDefinition Height="Auto" />
                       <RowDefinition Height="Auto" />
                   </Grid.RowDefinitions>
                   <Grid Grid.Row="0" x:Name="HeaderRow" Height="Auto" VerticalAlignment="Bottom">
                       <Rectangle RadiusX="3" RadiusY="3" Stroke="#FF709FDA" StrokeLineJoin="Bevel"
                                   StrokeThickness="1">
                           <Rectangle.Fill>
                               <LinearGradientBrush EndPoint="0.5,0.034" StartPoint="0.5,0.966">
                                   <GradientStop Color="#FFE4E5F0" Offset="0" />
                                   <GradientStop Color="#FFFFFFFF" Offset="1" />
                               </LinearGradientBrush>
                           </Rectangle.Fill>
                       </Rectangle>
                       <!-- Selection -->
                       <Border x:Name="SelectionVisual" Visibility="Collapsed"
                                   BorderBrush="#FFA8C9D8" BorderThickness="1,1,1,1"
                                   CornerRadius="3,3,3,3">
                           <Border.Background>
                               <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                   <GradientStop Color="#FF00CCFF" Offset="0" />
                                   <GradientStop Color="#FF9BB1FF" Offset="1" />
                               </LinearGradientBrush>
                           </Border.Background>
                           <Border CornerRadius="2,2,2,2" BorderBrush="#FFFFFFFF"
                                       BorderThickness="2">
                               <Border.Background>
                                   <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                       <GradientStop Color="#E5FFFFFF" Offset="0" />
                                       <GradientStop Color="#33FFFFFF" Offset="1" />
                                       <GradientStop Color="#4DFFFFFF" Offset="0.5" />
                                       <GradientStop Color="#00FFFFFF" Offset="0.511" />
                                   </LinearGradientBrush>
                               </Border.Background>
                           </Border>
                       </Border>
                       <StackPanel>
                           <StackPanel Orientation="Horizontal" HorizontalAlignment="Center"
                                       Margin="5">
                                
                               <ContentControl Name="Header" Padding="5"
                                           Content="{TemplateBinding Header}"
                                           ContentTemplate="{TemplateBinding HeaderTemplate}"
                                           HorizontalAlignment="Center" VerticalAlignment="Center" />
                           </StackPanel>
                           <ToggleButton x:Name="Expander" Margin="0,0,0,5"></ToggleButton>
                       </StackPanel>
                       <Rectangle x:Name="FocusVisual" RadiusX="3" RadiusY="3"
                                   Visibility="Collapsed" Stroke="Black" StrokeThickness="0.75"
                                   StrokeDashArray="1,2" IsHitTestVisible="False" />
                   </Grid>
                   <ItemsPresenter Grid.Row="1" x:Name="ItemsHost" Visibility="Collapsed" />
               </Grid>
           </ControlTemplate>
           <Style TargetType="telerikControl:RadTreeViewItem" x:Key="TreeViewItemStyle">
               <Setter Property="Template" Value="{StaticResource TreeViewItemDefaultTemplate}" />
               <Setter Property="IsExpanded" Value="False"></Setter>
               <Setter Property="ItemsPanel">
                   <Setter.Value>
                       <ItemsPanelTemplate>
                           <StackPanel HorizontalAlignment="Center" Margin="4,6"
                                       Orientation="Horizontal" />
                       </ItemsPanelTemplate>
                   </Setter.Value>
               </Setter>
           </Style>
           <Style TargetType="ToggleButton" x:Key="ExpanderStyle">
               <Setter Property="IsEnabled" Value="True" />
               <Setter Property="IsTabStop" Value="False" />
               <Setter Property="Cursor" Value="Hand" />
               <Setter Property="Template">
                   <Setter.Value>
                       <ControlTemplate TargetType="ToggleButton">
                           <Grid>
                               <VisualStateManager.VisualStateGroups>
                                   <VisualStateGroup x:Name="CommonStates">
                                       <VisualState x:Name="Normal"></VisualState>
                                   </VisualStateGroup>
                                   <VisualStateGroup x:Name="CheckStates">
                                       <VisualState x:Name="Checked">
                                           <Storyboard>
                                               <DoubleAnimation Duration="0:0:0.2"
                                                           Storyboard.TargetName="ExpandedStates"
                                                           Storyboard.TargetProperty="Opacity" To="1" />
                                               <DoubleAnimation Duration="0:0:0.2"
                                                           Storyboard.TargetName="CollapsedStates"
                                                           Storyboard.TargetProperty="Opacity" To="0" />
                                           </Storyboard>
                                       </VisualState>
                                       <VisualState x:Name="Unchecked">
                                           <Storyboard>
                                               <DoubleAnimation Duration="0:0:0.2"
                                                           Storyboard.TargetName="ExpandedStates"
                                                           Storyboard.TargetProperty="Opacity" To="0" />
                                               <DoubleAnimation Duration="0:0:0.2"
                                                           Storyboard.TargetName="CollapsedStates"
                                                           Storyboard.TargetProperty="Opacity" To="1" />
                                           </Storyboard>
                                       </VisualState>
                                   </VisualStateGroup>
                               </VisualStateManager.VisualStateGroups>
                               <Grid x:Name="CollapsedStates">
                                   <Path x:Name="CollapsedVisual" Height="10" Width="5"
                                               Stretch="Fill" Stroke="#FF7C7C7C"
                                               Data="M1098.3334,527.90997 L1098.3334,536.30115 L1102.2695,532.36487 z"
                                               RenderTransformOrigin="0.5,0.5" />
                               </Grid>
                               <Grid x:Name="ExpandedStates">
                                   <Path x:Name="ExpandedVisual" Height="10" Width="5"
                                               Fill="#FF7C7C7C" Stretch="Fill" Stroke="#FF7C7C7C"
                                               Data="M1098.3334,527.90997 L1098.3334,536.30115 L1102.2695,532.36487 z"
                                               RenderTransformOrigin="0.5,0.5">
                                       <Path.RenderTransform>
                                           <TransformGroup>
                                               <ScaleTransform ScaleX="1" ScaleY="1" />
                                               <SkewTransform AngleX="0" AngleY="0" />
                                               <RotateTransform Angle="90" />
                                               <TranslateTransform X="0" Y="0" />
                                           </TransformGroup>
                                       </Path.RenderTransform>
                                   </Path>
                               </Grid>
                           </Grid>
                       </ControlTemplate>
                   </Setter.Value>
               </Setter>
           </Style>
    I need to bind the color properties i.e GoalColor,ObjectiveColor and TacticColor to Rectangle for each item . I hope i made myself clear,
    waiting for ur quick reply, thanks.

    Regards,
    Khurram
  6. Khurram
    Khurram avatar
    5 posts
    Member since:
    Jun 2011

    Posted 16 Jun 2011 Link to this post

    Hi, Please reply me as quickly as possible (wrote a detailed message , please check the last message before this), it is urgent.

    regards,
    Khurram
  7. Petar Mladenov
    Admin
    Petar Mladenov avatar
    2891 posts

    Posted 20 Jun 2011 Link to this post

    Hello Khurram,

    You can bind these 3 Color properties (GoalColor,ObjectiveColor and TacticColor) to the Background of the RadTreeViewItem via ContainerBindings. You will have 3 different ContainerBinding Collections for the 3 different hierarchical levels. Please examine this help article and let us know if you need further assistance on this.

    All the best,
    Petar Mladenov
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  8. Khurram
    Khurram avatar
    5 posts
    Member since:
    Jun 2011

    Posted 20 Jun 2011 Link to this post

    Hi Petar,

    Its not working for me ,
    Here is the code snippet :

    <telerik:ContainerBindingCollection x:Key="TacticContainer">
                <telerik:ContainerBinding PropertyName="Background" Binding="{Binding TacticColor,Mode=TwoWay}" ></telerik:ContainerBinding>
            </telerik:ContainerBindingCollection>
             
     
            <telerik:ContainerBindingCollection x:Key="GoalContainer">
                <telerik:ContainerBinding PropertyName="Background" Binding="{Binding GoalColor,Mode=TwoWay}" ></telerik:ContainerBinding>
            </telerik:ContainerBindingCollection>
     
            <telerik:ContainerBindingCollection x:Key="ObjectiveContainer">
                <telerik:ContainerBinding PropertyName="Background" Binding="{Binding ObjectiveColor,Mode=TwoWay}" ></telerik:ContainerBinding>
            </telerik:ContainerBindingCollection>
     
    <DataTemplate x:Key="TacticTemplate" telerik:ContainerBinding.ContainerBindings="{staticResource TacticContainer}">
                <!--<Border Background="{Binding TacticColor}">-->
                    <TextBlock Text="{Binding TacticName}" TextWrapping="Wrap" Width="100" Height="30" ToolTipService.ToolTip="{Binding TacticName}" />
               <!-- </Border>-->
            </DataTemplate>
     
            <telerik:HierarchicalDataTemplate x:Key="GoalTemplate"
                     
                    ItemTemplate="{StaticResource TacticTemplate}" ItemsSource="{Binding Tactics,Mode=TwoWay}" telerik:ContainerBinding.ContainerBindings="{staticResource GaolContainer}">
                <!--<Border Background="{Binding GoalColor}">-->
                    <TextBlock Text="{Binding GoalName}" TextWrapping="Wrap" Width="100" Height="30" ToolTipService.ToolTip="{Binding GoalName}"  />
               <!-- </Border>-->
            </telerik:HierarchicalDataTemplate>
     
             
             
            <telerik:HierarchicalDataTemplate x:Key="ObjectiveTemplate"
                     
                    ItemTemplate="{StaticResource GoalTemplate}"  ItemsSource="{Binding Goals,Mode=TwoWay}" telerik:ContainerBinding.ContainerBindings="{staticResource ObjectiveContainer}" >
                <!--<Border Background="{Binding ObjectiveColor}">-->
                    <TextBlock Text="{Binding ObjectiveName}" TextWrapping="Wrap" Width="100" Height="30" ToolTipService.ToolTip="{Binding ObjectiveName}"  />
                <!--</Border>-->
            </telerik:HierarchicalDataTemplate>


    Now the background color is not being bound, its showing the default color of rectangles. Am i missing something , please look into it,thanks.

    regards
    Khurram



  9. Petar Mladenov
    Admin
    Petar Mladenov avatar
    2891 posts

    Posted 23 Jun 2011 Link to this post

    Hi Khurram,

    Using the custom template I was even unable to use a background color set directly / explicitly in XAML.
    <telerik:RadtreeViewItem Background="DeepSkyBlue" />
    So I changed the template like so:
    <Grid Grid.Row="0" x:Name="HeaderRow" Height="Auto" VerticalAlignment="Bottom">
     
                           <Rectangle RadiusX="3" RadiusY="3" Stroke="#FF709FDA" StrokeLineJoin="Bevel" StrokeThickness="1"
                                      Fill="{Binding Path=Background, RelativeSource={RelativeSource TemplatedParent}}"
                                      >
     
                               <!--<Rectangle.Fill>-->
     
                                   <!--<LinearGradientBrush EndPoint="0.5,0.034" StartPoint="0.5,0.966">
     
                                       <GradientStop Color="#FFE4E5F0" Offset="0" />
     
                                       <GradientStop Color="#FFFFFFFF" Offset="1" />
     
                                   </LinearGradientBrush>-->
     
                               <!--</Rectangle.Fill>-->
     
                           </Rectangle>
    Now the Background works fine. I prepared a sample that uses both declarative and bound tree to show you and test the new template. Please also keep in mind that the animations`s changes over these colors are with higher priority than the explicit settings and the Style settings.
    Let us know if you need more info on this.

    Regards,
    Petar Mladenov
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
Back to Top
DevCraft banner