templated tree view

[Khurram]

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

[Khurram]

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

[Petar Mladenov]

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

[Khurram]

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

[Khurram]

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

regards,
Khurram

[Petar Mladenov]

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

[Khurram]

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

[Petar Mladenov]

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