Can this be done via styles?

[Mark]

So... all is well... i have a great looking treeview complete with a custom ItemTemplate, ItemContainerStyleSelector and a Hierarchical datasource BUT for some reason I can't seem to get the ExpandedImageSrc and DefaultImageSrc to come into view. I have even gone into the template itself and hard referenced an image but to no avail. It seems like the only way to get the images to come through is to hard code them in the hierarchical template but... how does one get the benefit of default vs expand images?

So the question is... how does one utilized your ExpandedImageSrc and DefaultImageSrc properties within all of this?

If you figure this out... my hero!!

Here is the tree

<telerikNavigation:RadTreeView
                IsDragDropEnabled="True"
                IsLineEnabled="True"
                ItemTemplate="{StaticResource DefaultHierarchicalDataTemplate}"
                ItemContainerStyleSelector="{StaticResource StyleSelector}"
                ItemsSource="{Binding Root.Folders}"
                IsExpandOnSingleClickEnabled="True"
                 />

Here is my hierarchical template.

<core:HierarchicalDataTemplate
            x:Key="DefaultHierarchicalDataTemplate"
            ItemsSource="{Binding Children}">
             <StackPanel Orientation="Horizontal">
                <TextBlock Text="{Binding Name}" />
            </StackPanel>
        </core:HierarchicalDataTemplate>

Here is my style

<Style TargetType="telerikNavigation:RadTreeViewItem" x:Key="FolderStyle">
            <Setter Property="FontWeight" Value="Bold"/>
            <Setter Property="DefaultImageSrc" Value="{StaticResource FolderIcon}"/>
            <Setter Property="ExpandedImageSrc" Value="{StaticResource FolderExpandedIcon}"/>
            <Setter Property="Template" Value="{StaticResource TreeViewItemDefaultTemplate}"/>
            <Setter Property="Foreground" Value="{StaticResource RadTreeView_Foreground}" />
        </Style>

Here is the wopping rad tree view item template

<Color x:Key="RadTreeView_Foreground">White</Color>
    <SolidColorBrush x:Key="RadTreeView_FocusBrushBlack" Color="White"/>
    <SolidColorBrush x:Key="RadTreeView_InputTextBoxBackground" Color="#FFFFFFFF"/>
    <SolidColorBrush x:Key="RadTreeView_BorderOuterBrush" Color="#FFFFFFFF"/>
    <SolidColorBrush x:Key="RadTreeView_BorderInnerBrush" Color="#FF979994"/>
    <Color x:Key="RadTreeView_LineColor">#FF275DC7</Color>
    <SolidColorBrush x:Key="RadTreeView_LineBrush" Color="{StaticResource CoolBlueBorder}"/>
    <SolidColorBrush x:Key="RadTreeView_NavigationMouseoverStroke" Color="{StaticResource CoolBlueBorder}"/>
    <SolidColorBrush x:Key="RadTreeView_NavigationMouseoverFill" Color="{StaticResource CoolBlue}"/>
    <SolidColorBrush x:Key="RadTreeView_SelectUnFocusFill" Color="{StaticResource CoolBlue}"/>
    <SolidColorBrush x:Key="RadTreeView_SelectUnFocus" Color="{StaticResource CoolBlue}"/>
    <SolidColorBrush x:Key="RadTreeView_NavigationSelectFill" Color="{StaticResource CoolBlue}"/>
    <SolidColorBrush x:Key="RadTreeView_NavigationSelectStroke" Color="{StaticResource CoolBlueBorder}"/>
    <ControlTemplate x:Key="TreeViewItemDefaultTemplate" TargetType="telerikNavigation:RadTreeViewItem">
        <Grid x:Name="RootElement">
            <Grid.Resources>
                <SolidColorBrush x:Key="LineBrush" Color="{StaticResource RadTreeView_LineColor}"/>
            </Grid.Resources>
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
                <RowDefinition/>
            </Grid.RowDefinitions>
            <VisualStateManager.VisualStateGroups>
                <VisualStateGroup x:Name="EditStates">
                    <VisualState x:Name="Display"/>
                    <VisualState x:Name="Edit">
                        <Storyboard>
                            <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="EditHeaderElement" Storyboard.TargetProperty="Visibility">
                                <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
                            </ObjectAnimationUsingKeyFrames>
                            <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="Header" Storyboard.TargetProperty="Visibility">
                                <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
                            </ObjectAnimationUsingKeyFrames>
                        </Storyboard>
                    </VisualState>
                </VisualStateGroup>
                <VisualStateGroup x:Name="CommonStates">
                    <VisualStateGroup.Transitions>
                        <VisualTransition From="Normal" GeneratedDuration="00:00:00.2000000" To="MouseOver">
                            <Storyboard>
                                <ColorAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="SelectionVisual" Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)">
                                    <EasingColorKeyFrame KeyTime="00:00:00" Value="#993174F8"/>
                                </ColorAnimationUsingKeyFrames>
                                <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="SelectionUnfocusedVisual" Storyboard.TargetProperty="(UIElement.Opacity)">
                                    <EasingDoubleKeyFrame KeyTime="00:00:00" Value="0.795"/>
                                </DoubleAnimationUsingKeyFrames>
                            </Storyboard>
                        </VisualTransition>
                        <VisualTransition From="MouseOver" GeneratedDuration="00:00:00.5000000"/>
                    </VisualStateGroup.Transitions>
                    <VisualState x:Name="Normal"/>
                    <VisualState x:Name="Disabled">
                        <Storyboard>
                            <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="DisabledVisual" Storyboard.TargetProperty="Visibility">
                                <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
                            </ObjectAnimationUsingKeyFrames>
                            <DoubleAnimation Duration="0:0:0.0" Storyboard.TargetName="Header" Storyboard.TargetProperty="Opacity" To="0.35"/>
                            <DoubleAnimation Duration="0:0:0.0" Storyboard.TargetName="Image" Storyboard.TargetProperty="Opacity" To="0.35"/>
                        </Storyboard>
                    </VisualState>
                    <VisualState x:Name="MouseOver">
                        <Storyboard>
                            <DoubleAnimation Duration="0:0:0.1" Storyboard.TargetName="MouseOverVisual" Storyboard.TargetProperty="Opacity" To="0.9"/>
                        </Storyboard>
                    </VisualState>
                </VisualStateGroup>
                <VisualStateGroup x:Name="SelectionStates">
                    <VisualState x:Name="Unselected"/>
                    <VisualState x:Name="Selected">
                        <Storyboard>
                            <ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="SelectionVisual" Storyboard.TargetProperty="(UIElement.Visibility)">
                                <DiscreteObjectKeyFrame KeyTime="00:00:00">
                                    <DiscreteObjectKeyFrame.Value>
                                        <Visibility>Visible</Visibility>
                                    </DiscreteObjectKeyFrame.Value>
                                </DiscreteObjectKeyFrame>
                            </ObjectAnimationUsingKeyFrames>
                        </Storyboard>
                    </VisualState>
                    <VisualState x:Name="SelectedUnfocused">
                        <Storyboard>
                            <ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="SelectionVisual" Storyboard.TargetProperty="(UIElement.Visibility)">
                                <DiscreteObjectKeyFrame KeyTime="00:00:00">
                                    <DiscreteObjectKeyFrame.Value>
                                        <Visibility>Visible</Visibility>
                                    </DiscreteObjectKeyFrame.Value>
                                </DiscreteObjectKeyFrame>
                            </ObjectAnimationUsingKeyFrames>
                        </Storyboard>
                    </VisualState>
                </VisualStateGroup>
                <VisualStateGroup x:Name="LoadingOnDemandStates">
                    <VisualState x:Name="LoadingOnDemand">
                        <Storyboard>
                            <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="LoadingVisual" Storyboard.TargetProperty="Visibility">
                                <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
                            </ObjectAnimationUsingKeyFrames>
                            <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="Expander" Storyboard.TargetProperty="Visibility">
                                <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
                            </ObjectAnimationUsingKeyFrames>
                            <DoubleAnimation Duration="0:0:1" RepeatBehavior="Forever" Storyboard.TargetName="LoadingVisualAngleTransform" Storyboard.TargetProperty="Angle" From="0" To="359"/>
                        </Storyboard>
                    </VisualState>
                    <VisualState x:Name="LoadingOnDemandReverse"/>
                </VisualStateGroup>
                <VisualStateGroup x:Name="FocusStates">
                    <VisualState x:Name="Focused">
                        <Storyboard>
                            <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="FocusVisual" Storyboard.TargetProperty="Visibility">
                                <DiscreteObjectKeyFrame KeyTime="0">
                                    <DiscreteObjectKeyFrame.Value>
                                        <Visibility>Collapsed</Visibility>
                                    </DiscreteObjectKeyFrame.Value>
                                </DiscreteObjectKeyFrame>
                            </ObjectAnimationUsingKeyFrames>
                        </Storyboard>
                    </VisualState>
                    <VisualState x:Name="Unfocused"/>
                </VisualStateGroup>
                <VisualStateGroup x:Name="ExpandStates">
                    <VisualState x:Name="Expanded"/>
                    <VisualState x:Name="Collapsed"/>
                </VisualStateGroup>
            </VisualStateManager.VisualStateGroups>
            <Grid x:Name="HeaderRow" MinHeight="{TemplateBinding MinHeight}" Background="Transparent">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto"/>
                    <ColumnDefinition Width="Auto"/>
                    <ColumnDefinition Width="Auto"/>
                    <ColumnDefinition Width="Auto"/>
                    <ColumnDefinition Width="Auto"/>
                    <ColumnDefinition Width="*"/>
                </Grid.ColumnDefinitions>
                <Rectangle Fill="{TemplateBinding Background}" Stroke="{TemplateBinding BorderBrush}" StrokeThickness="{TemplateBinding BorderThickness}" RadiusX="2" RadiusY="2" Grid.Column="2" Grid.ColumnSpan="6"/>
                <Rectangle x:Name="MouseOverVisual" RadiusX="2" RadiusY="2" Opacity="0" Grid.Column="2" Grid.ColumnSpan="6">
                    <Rectangle.Stroke>
                        <SolidColorBrush Color="{StaticResource CoolBlueBorder}"/>
                    </Rectangle.Stroke>
                    <Rectangle.Fill>
                        <SolidColorBrush Color="{StaticResource CoolBlue}"/>
                    </Rectangle.Fill>
                </Rectangle>
                <Rectangle x:Name="SelectionUnfocusedVisual" RadiusX="2" RadiusY="2" Visibility="Collapsed" Grid.Column="3" Grid.ColumnSpan="3" Margin="0,-1,0,1" StrokeDashArray="1 0" >
                    <Rectangle.Stroke>
                        <SolidColorBrush Color="{StaticResource CoolBlueBorder}"/>
                    </Rectangle.Stroke>
                    <Rectangle.Fill>
                        <SolidColorBrush Color="{StaticResource CoolBlue}"/>
                    </Rectangle.Fill>
                </Rectangle>
                <Rectangle x:Name="SelectionVisual" Stroke="{StaticResource RadTreeView_NavigationSelectStroke}" RadiusX="2" RadiusY="2" IsHitTestVisible="False" Visibility="Collapsed" Grid.Column="2" Grid.ColumnSpan="6" StrokeDashArray="1 0">
                    <Rectangle.Fill>
                        <SolidColorBrush Color="{StaticResource CoolBlue}"/>
                    </Rectangle.Fill>
                </Rectangle>
                <StackPanel x:Name="IndentContainer" Opacity="0.2" Orientation="Horizontal">
                    <Rectangle x:Name="IndentFirstVerticalLine" Stroke="{StaticResource LineBrush}" VerticalAlignment="Top" Width="1" Visibility="Collapsed">
                        <Rectangle.Clip>
                            <RectangleGeometry Rect="0,0,1,10000"/>
                        </Rectangle.Clip>
                    </Rectangle>
                </StackPanel>
                <Grid x:Name="ListRootContainer" HorizontalAlignment="Center" MinWidth="20" Grid.Column="1">
                    <Rectangle x:Name="HorizontalLine" Stroke="{StaticResource RadTreeView_LineBrush}" Height="1" HorizontalAlignment="Right" VerticalAlignment="Center" Opacity="0.2">
                        <Rectangle.Clip>
                            <RectangleGeometry Rect="0,0,10000,1"/>
                        </Rectangle.Clip>
                    </Rectangle>
                    <Rectangle x:Name="VerticalLine" Stroke="{StaticResource RadTreeView_LineBrush}" HorizontalAlignment="Center" VerticalAlignment="Top" Width="1" Opacity="0.2">
                        <Rectangle.Clip>
                            <RectangleGeometry Rect="0,0,1,10000"/>
                        </Rectangle.Clip>
                    </Rectangle>
                    <ToggleButton x:Name="Expander" Background="{TemplateBinding Background}" IsTabStop="False"/>
                    <Grid x:Name="LoadingVisual" HorizontalAlignment="Center" VerticalAlignment="Center" RenderTransformOrigin="0.5,0.5" Visibility="Collapsed">
                        <Grid.RenderTransform>
                            <TransformGroup>
                                <RotateTransform x:Name="LoadingVisualAngleTransform" Angle="0" CenterX="0.5" CenterY="0.5"/>
                            </TransformGroup>
                        </Grid.RenderTransform>
                        <Path Stretch="Fill" Stroke="{TemplateBinding Foreground}" StrokeStartLineCap="Round" StrokeThickness="1" Height="10" Width="10" Data="M1,0 A1,1,90,1,1,0,-1"/>
                        <Path Fill="{TemplateBinding Foreground}" Stretch="Fill" StrokeThickness="1" Height="4" HorizontalAlignment="Left" Margin="5,-1.5,0,0" VerticalAlignment="Top" Width="4" Data="M0,-1.1 L0.1,-1 L0,-0.9"/>
                    </Grid>
                </Grid>
                <CheckBox x:Name="CheckBoxElement" Margin="5,0,0,0" VerticalAlignment="Center" Visibility="Collapsed" IsTabStop="False" Grid.Column="2"/>
                <RadioButton x:Name="RadioButtonElement" Margin="5,0,0,0" VerticalAlignment="Center" Visibility="Collapsed" IsTabStop="False" Grid.Column="2"/>
                <Image x:Name="Image" HorizontalAlignment="Center" Margin="2" MaxHeight="16" MaxWidth="16" VerticalAlignment="Center" Grid.Column="3" Source="{TemplateBinding DefaultImageSrc}"/>
                <Rectangle x:Name="FocusVisual" Stroke="{StaticResource RadTreeView_FocusBrushBlack}" StrokeDashArray="1 2" StrokeThickness="1" RadiusX="3" RadiusY="3" IsHitTestVisible="False" Visibility="Collapsed" Grid.Column="2" Grid.ColumnSpan="6"/>
                <Grid Grid.Column="4" Grid.ColumnSpan="2" d:IsHidden="True">
                    <ContentPresenter x:Name="Header" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Content="{TemplateBinding Header}" ContentTemplate="{TemplateBinding HeaderTemplate}"/>
                    <ContentPresenter x:Name="EditHeaderElement" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Visibility="Collapsed"/>
                </Grid>
                <Border x:Name="EditElementContainer" HorizontalAlignment="Left" VerticalAlignment="Center" Width="Auto" Visibility="Collapsed" Grid.Column="4" Background="{StaticResource RadTreeView_InputTextBoxBackground}" BorderBrush="{StaticResource RadTreeView_BorderOuterBrush}" BorderThickness="1" CornerRadius="3,3,3,3">
                    <Border Height="Auto" Width="Auto" BorderBrush="{StaticResource RadTreeView_BorderInnerBrush}" BorderThickness="1" CornerRadius="2,2,2,2">
                        <TextBox x:Name="EditElement" BorderThickness="0" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/>
                    </Border>
                </Border>
                <Rectangle x:Name="DisabledVisual" IsHitTestVisible="true" Visibility="Collapsed" Grid.Column="2" Grid.ColumnSpan="3"/>
            </Grid>
            <ItemsPresenter x:Name="ItemsHost" VerticalAlignment="Bottom" Visibility="Collapsed" Grid.Row="1"/>
        </Grid>
    </ControlTemplate>

[Miroslav]

Hello Mark,

I tried this with an example I was working on and the images do appear.

The ImageSrc properties will either take a string or an ImagesSource object. I could not make out what the {StaticResource} in your case points to for the images.

I believe the properties can also be bound to the ViewModel using ContainerBindings but I did't go that far.

Again - the example is for drag-drop but the TreeView on the left is bound and I set the ItemContainerStyle. I used the latest internal build to test this, but I guess it should work with 2.812.

Hopefully this will work in your case as well.

All the best,
Miroslav
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Mark]

Ahh. Thanks for your help. In a round about way!

I should rename this post as "how to reference images in a resource dictionary".

so...

This works like a champ!

 

 

<sys:String x:Key="FolderExpandedIconPath">blah</sys:String>

 

This does not work and this is what I had.

<

 

ImageBrush x:Key="FolderExpandedIcon" ImageSource="blah" />

 

<

 

Image x:Key="FolderExpandedImage" Source="blah" />