Questions on UI for WPF Forum

3 answers

370 views

Resizing Tile

Hi I see there are 3 sizes for tiles at the moment. Single, Double and quadruple.

I was wondering if there are anymore sizes. I would like a Double and a Quadruple to be Stack ontop of eachother vertically.

TileList

answered on 06 Mar 2015

2 answers

113 views

GridView performance issues when sorted on column with non unique values

Hi Team,

The RadGridView performs very poorly when you sort by a column with non unique values and select many rows. The UI thread gets stuck and it takes a while for it to come back, which causes issues with updates or other user operations following it. Our test was done on 50,000 rows.

To reproduce:
1. Bind RadGridView ItemsSource to a collection with 50,000 items. Set selection mode to Extended. Make one values of one property unique and the other constant.
2. Run the sample and sort by the column with constant value.
3. Select all rows in the grid (CTRL+A)
4. Click on any row on the grid to verify that Dispatcher thread is locked.
Note that if grid is sorted by unique value column same operation is fairly fast.

See below for the sample view, code behind and VM to reproduce this issue.

<Window x:Class="VariousDataSources.MainWindow"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"

Title="MainWindow" >

<Window.Resources>

</Window.Resources>

<telerik:RadGridView x:Name="RadGridView1" GroupRenderMode="Flat" AutoGenerateColumns="True"

RowIndicatorVisibility="Collapsed" CanUserFreezeColumns="False"

ItemsSource="{Binding DataSource}" SelectionMode="Extended">

</telerik:RadGridView>

</Window>

public partial class MainWindow : Window

{

public MainWindow()

{

InitializeComponent();

DataContext = new MyModel();

}

public class MyRow

{

public int SlowColumn { get; set; }

public int FastColumn { get; set; }

}

public class MyModel : ViewModelBase

{

public MyModel()

{

DataSource = new ObservableCollection<MyRow>();

for (var i = 0; i < 50000; i++)

{

var row = new MyRow();

row.SlowColumn = 1;

row.FastColumn = i;

DataSource.Add(row);

}

public ObservableCollection<MyRow> DataSource { get; set; }

}

GridView

answered on 05 Mar 2015

1 answer

195 views

RadAutoCompleteBox not working after call BeginInsert in Radgridview

Good Morning.

I need to put a RadAutoCompleteBox inside a GridViewDataColumn, I follow this RadAutoCompleteBox inside GridView example.

Works only when I editing an existent column, but I facing problems when I try to Insert a new row or when I Cancel any modifications.

When I need to insert a new record I call the method BeginInsert of GridView.

this.radGridView.BeginInsert();

It add a new empty row at the end, but then the autocomplete doesn't work anymore.

When I want edit an existing row, and suddenly I decide to cancel the edition; I press Esc key and the value of the column doesn't return to his original value.

I Attach an example of the solution, it has a button with click event, and in the event I call BeginInsert method.
I upload it to dropbox.

Many thanks.

GridView

answered on 05 Mar 2015

5 answers

138 views

Accesing column name on which aggregate function was applied

Hi,

I have a custome aggregate function defined as follows. I would like to access the column name on which this particular function is being called from so that the function can act on that particular column. How can that be done? Currently I have hard-coded the column name('Score') which I do not want to do.

class Summation : AggregateFunction<BindableDynamicDictionary, int>

{

public Summation()

{

this.AggregationExpression = items => FindSum(items);

}

private int FindSum(IEnumerable<BindableDynamicDictionary> source)

{

var itemCount = source.Count();

int sum = 0;

if (itemCount >= 1)

{

var values = source.Select(i => i["Score"]);

foreach (int str in values)

{

sum = sum + str;

}

return sum;

}

Thanks

GridView

answered on 05 Mar 2015

6 answers

379 views

Nested Column Groups in RadGridView WPF

Hi,

I was wondering if there was a way to achieve column grouping similar to http://www.telerik.com/help/winforms/gridview-viewdefinitions-column-groups-view.html in WPF?

I have tried adding to the ChildGroups of the column groups but this doesn't seem to work the same way as the example in the above link.

The problem that I am seeing is that for column groups that do not have nested groups there appears to be an extra row added above each of these (to fill the space for those groups that do have children) which doesn't pick up my style and pushes the content of these groups down so not all of it is visible. What I would like to happen is that for the column groups that contain no nested groups is that the content of these cells fills the space without the extra row above it like the "Customer Contact" group in the winforms example in the link.

Thanks,

Steven

GridView

answered on 05 Mar 2015

1 answer

66 views

PanelBar Item Injection Broke

Hi there,

I just performed an upgrade from 2014 Q4 to 2015 Q1 and have run into an unexpected issue. I have been using Panel Bar Item injection via the prism framework to place panel bar items for each of my modules under their respective headers.

In my shell, the regions are laid out as follows:

<telerik:RadPanelBar

DockPanel.Dock="Left"

Width="200"

regions:RegionManager.RegionName="NavPanelRegion"

Background="LightBlue">

<telerik:RadPanelBarItem

regions:RegionManager.RegionName="NavPanelHomeRegion"

Header="Home">

</telerik:RadPanelBarItem>

<telerik:RadPanelBarItem

regions:RegionManager.RegionName="NavPanelToolsRegion"

Header="Tools">

</telerik:RadPanelBarItem>

<telerik:RadPanelBarItem

regions:RegionManager.RegionName="NavPanelMaintenanceRegion"

Header="Maintenance">

</telerik:RadPanelBarItem>

<telerik:RadPanelBarItem

regions:RegionManager.RegionName="NavPanelReportingRegion"

Header="Reporting">

</telerik:RadPanelBarItem>

</telerik:RadPanelBar>

Then each of the modules has one to many panel bar items defined:

<telerik:RadPanelBarItem x:Class="Modules.Dashboard.Views.DashboardPanelItemView"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"

xmlns:regions="http://www.codeplex.com/CompositeWPF"

xmlns:vm="clr-namespace:Modules.Dashboard.ViewModels"

Header="Homepage">

<telerik:RadPanelBarItem.Resources>

<vm:DashboardCommandViewModel x:Key="DashboardCommandVm" />

</telerik:RadPanelBarItem.Resources>

<telerik:RadPanelBarItem.Command>

<Binding Source="{StaticResource DashboardCommandVm}" Path="Home" />

</telerik:RadPanelBarItem.Command>

</telerik:RadPanelBarItem>

And during module initalization, the following is called:

public void Initialize()

{

Container.RegisterType<Object, Views.DashboardView>("DashboardView");

this._regionViewRegistry.RegisterViewWithRegion(RegionNames.Navigation.HomeNavigationPanelRegion, typeof(Views.DashboardPanelItemView));

this._regionViewRegistry.RegisterViewWithRegion("ContentRegion", typeof(DashboardView));

}

Prior to the update, this worked just fine and the panel bar items were injected under their respective parents. Now, though, post-upgrade, it's no longer functioning.

Any thoughts?

PanelBar

answered on 05 Mar 2015

2 answers

191 views

[Solved] PaneStateChange event on adding new pane

I have a simple pane factory which basically looks like this:

class PaneFactory : DockingPanesFactory

{

protected override void AddPane(RadDocking radDocking, RadPane pane)

{

//Docking is UserControl, which contains RadDocking

var docking = radDocking.ParentOfType<Docking>();

var settings = pane.Tag as PaneSettings;

if (settings.ScreenPosition == ScreenPosition.Left)

{

//LeftPaneGroup is pane group declared in xaml (docked to left side)

docking.LeftPaneGroup.AddItem(pane, DockPosition.Center);

}

else

{

//DocumentPaneGroup is document host declared in xaml

docking.DocumentPaneGroup.AddItem(pane, DockPosition.Center);

}

So there are two options: pane is either initially docked to the left or to the document host. If it is docked to document host - PaneStateChange
event is fired, but if it is docked to the left - there is no event. Is this a bug or an expected behaviour? Looks really inconsistent to me. Is there a way to force PaneStateChange event to always fire, when new pane is added?

Docking

answered on 05 Mar 2015

3 answers

130 views

XmlParseException - The default connectors cannot be removed because connections are attached to it.

Hi,
Connectors of some items are generated dynamically in run-time, so I tried to bind Connectors using Extension. Drag-drop process are definitely working good, but when I bind all diagram,before calling extension method, it throws exception "XmlParseException - The default connectors cannot be removed because connections are attached to it.".

Thanks in advance.

public class ConnectorExtension

{

public static readonly DependencyProperty ConnectorsProperty =

DependencyProperty.RegisterAttached("Connectors", typeof(List<ConnectorModel>), typeof(ConnectorExtension), new UIPropertyMetadata(null, new PropertyChangedCallback(ConnectorsChanged)));

public static void SetConnectors(UIElement element, List<ConnectorModel> value)

{

element.SetValue(ConnectorsProperty, value);

}

public static List<ConnectorModel> GetConnectors(UIElement element)

{

return (List<ConnectorModel>)element.GetValue(ConnectorsProperty);

}

public static void ConnectorsChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)

{

var connectors = e.NewValue as List<ConnectorModel>;

var shape = d as RadDiagramShapeBase;

if (shape != null )

{

if (connectors != null)

{

shape.UseDefaultConnectors = false;

shape.Connectors.Clear();

connectors.ForEach(connector => shape.Connectors.Add(new RadDiagramConnector() { Offset = connector.Offset, Name = connector.Name, Tag=connector.Name }));

}

else

{

shape.UseDefaultConnectors = false;

shape.Connectors.Clear();

}

<Style x:Key="DynamicConnectorStyle" TargetType="telerik:RadDiagramShape">

<Setter Property="Position" Value="{Binding Position, Mode=TwoWay}"/>

<Setter Property="IsSelected" Value="{Binding IsSelected}" />

<Setter Property="Height" Value="{Binding Height}" />

<Setter Property="Width" Value="{Binding Width}" />

<Setter Property="Background" Value="Transparent" />

<Setter Property="IsEditable" Value="False" />

<Setter Property="StrokeThickness" Value="0" />

<Setter Property="UseDefaultConnectors" Value="False"/>

<Setter Property="extensions:ConnectorExtension.Connectors" Value="{Binding Path=Connectors,UpdateSourceTrigger=PropertyChanged}"/>

<Setter Property="ContentTemplate" Value="{Binding Path=TemplateKey,Converter={StaticResource DataTemplateSelector}}" />

</Style>

Diagram

answered on 05 Mar 2015

1 answer

223 views

Double Clicking RibbonView tab header causes Ribbon to collapse

I have a rad ribbon view which has been configured to IsMinimizable to False, however double clicking on a ribbontab results in the ribbon view being set to minimized. Is this a known bug? Is there any known workarounds?

At present my only solution is setting isminimized to false in the minimizedchanged event, this still results in a small flicker of the panel.

RibbonView and RibbonWindow

answered on 05 Mar 2015

2 answers

372 views

TreeViewItem background

Hi,

I am triying to set background under entire row by items in a RadTreeView, but I don´t have expected result.

This is my actual result:

And this is what I want:

My xaml code:

<Window x:Class="RadControlsWpf_DataBinding_Demo_CodeBehind.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:ani="clr-namespace:RadControlsWpf_DataBinding_Demo_CodeBehind"
xmlns:vm="clr-namespace:RadControlsWpf_DataBinding_Demo_CodeBehind.ViewModels"
xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
Title="MainWindow" Height="350" BorderThickness="0,2,0,0" Margin="0,0,0,2" Visibility="Collapsed">

<Window.Resources>
<vm:DataSource x:Key="TreeViewDataSource"/>

<Style x:Key="RadTreeViewItemStyle" TargetType="{x:Type telerik:RadTreeViewItem}">
<Setter Property="FocusVisualStyle">
<Setter.Value>
<Style>
<Setter Property="Control.Template">
<Setter.Value>
<ControlTemplate>
<Rectangle Margin="0" Stroke="Transparent" StrokeThickness="0"/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Setter.Value>
</Setter>
<Setter Property="HorizontalContentAlignment" Value="Left"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="CheckState" Value="Off"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="Padding" Value="1,0,5,0"/>
<Setter Property="IsDropAllowed" Value="True"/>
<Setter Property="ItemsOptionListType" Value="Default"/>
<Setter Property="IsEnabled" Value="True"/>
<Setter Property="MinHeight" Value="30"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type telerik:RadTreeViewItem}">
<Grid x:Name="RootElement" Background="{Binding Background, ElementName=HeaderRow}" >
<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.TargetProperty="Visibility" Storyboard.TargetName="EditHeaderElement">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="Header">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Collapsed</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="Disabled">
<Storyboard>
<DoubleAnimation Duration="0" To="0.35" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="Header"/>
<DoubleAnimation Duration="0" To="0.35" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="Image"/>
</Storyboard>
</VisualState>
<VisualState x:Name="MouseOver">
<Storyboard>
<DoubleAnimation Duration="0:0:0.1" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="MouseOverVisual"/>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)" Storyboard.TargetName="HeaderRow">
<EasingColorKeyFrame KeyTime="0" Value="#FFE1E1E1"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="SelectionStates">
<VisualState x:Name="Unselected"/>
<VisualState x:Name="Selected">
<Storyboard>
<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="SelectionVisual">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Collapsed</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background)" Storyboard.TargetName="border">
<DiscreteObjectKeyFrame KeyTime="0" Value="{x:Null}"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="SelectedUnfocused">
<Storyboard>
<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="SelectionUnfocusedVisual">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Collapsed</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="LoadingOnDemandStates">
<VisualState x:Name="LoadingOnDemand">
<Storyboard>
<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="LoadingVisual">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="Expander">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Collapsed</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<DoubleAnimation Duration="0:0:1" From="0" RepeatBehavior="Forever" To="359" Storyboard.TargetProperty="Angle" Storyboard.TargetName="LoadingVisualAngleTransform"/>
</Storyboard>
</VisualState>
<VisualState x:Name="LoadingOnDemandReverse"/>
</VisualStateGroup>
<VisualStateGroup x:Name="FocusStates">
<VisualState x:Name="Focused">
</VisualState>
<VisualState x:Name="Unfocused"/>
</VisualStateGroup>
<VisualStateGroup x:Name="ExpandStates">
<VisualState x:Name="Expanded">
<Storyboard>
<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="ItemsHost">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Collapsed"/>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Rectangle Grid.ColumnSpan="1"
Fill="#FFF4F4F5"
HorizontalAlignment="Left"
Height="1" Stroke="#FFEDEDED"
VerticalAlignment="Top"
Width="{Binding ActualWidth, ElementName=RootElement}"
StrokeThickness="0"
Margin="0,-1,0,0"/>

<Grid x:Name="HeaderRow" Background="Transparent" MinHeight="{TemplateBinding MinHeight}" SnapsToDevicePixels="True">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Grid.ColumnSpan="6" Grid.Column="2"/>
<Border x:Name="MouseOverVisual" BorderBrush="#FFFFC92B" BorderThickness="0" Grid.ColumnSpan="6" Grid.Column="0" Opacity="0">
<Border BorderBrush="White" BorderThickness="0" CornerRadius="0" Visibility="Collapsed">
<Border.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FFFFFBA3" Offset="1"/>
<GradientStop Color="#FFFFFBDA" Offset="0"/>
</LinearGradientBrush>
</Border.Background>
</Border>
</Border>
<Border x:Name="SelectionUnfocusedVisual" BorderBrush="#FFDBDBDB" BorderThickness="0" Grid.Column="0" Visibility="Collapsed">
<Border BorderBrush="Transparent" BorderThickness="0" CornerRadius="0">
<Border.Background>
<LinearGradientBrush EndPoint="0,1">
<GradientStop Color="#FFF8F6F9" Offset="0"/>
<GradientStop Color="#FFF0F0F0" Offset="1"/>
</LinearGradientBrush>
</Border.Background>
</Border>
</Border>
<Border x:Name="SelectionVisual" BorderBrush="#FFFFC92B" BorderThickness="0" Grid.Column="0" Visibility="Collapsed">
<Border x:Name="border" BorderBrush="White" BorderThickness="0" CornerRadius="0">
<Border.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FFFCE79F" Offset="1"/>
<GradientStop Color="#FFFDD3A8"/>
</LinearGradientBrush>
</Border.Background>
</Border>
</Border>
<StackPanel x:Name="IndentContainer" Orientation="Horizontal" Visibility="Visible">
<Rectangle x:Name="IndentFirstVerticalLine" Stroke="#FFCCCCCC" Visibility="Collapsed" VerticalAlignment="Top" Width="1"/>
</StackPanel>
<Grid x:Name="ListRootContainer" Grid.Column="1" HorizontalAlignment="Center" Visibility="Collapsed">
<Rectangle x:Name="HorizontalLine" HorizontalAlignment="Right" Height="1" Stroke="#FFCCCCCC" VerticalAlignment="Center"/>
<Rectangle x:Name="VerticalLine" HorizontalAlignment="Center" Stroke="#FFCCCCCC" VerticalAlignment="Top" Width="1"/>
<ToggleButton x:Name="Expander" Background="{TemplateBinding Background}" IsTabStop="False"/>
<Grid x:Name="LoadingVisual" HorizontalAlignment="Center" RenderTransformOrigin="0.5,0.5" Visibility="Collapsed" VerticalAlignment="Center">
<Grid.RenderTransform>
<TransformGroup>
<RotateTransform Angle="0" CenterY="0.5" CenterX="0.5"/>
</TransformGroup>
</Grid.RenderTransform>
<Path Data="M1,0A1,1,90,1,1,0,-1" Height="10" StrokeStartLineCap="Round" Stretch="Fill" Stroke="{TemplateBinding Foreground}" StrokeThickness="1" Width="10"/>
<Path Data="M0,-1.1L0.1,-1 0,-0.9" Fill="{TemplateBinding Foreground}" HorizontalAlignment="Left" Height="4" Margin="5,-1.5,0,0" Stretch="Fill" StrokeThickness="1" VerticalAlignment="Top" Width="4"/>
</Grid>
</Grid>
<CheckBox x:Name="CheckBoxElement" Grid.Column="2" IsTabStop="False" Margin="5,0,0,0" Visibility="Collapsed" VerticalAlignment="Center">
<telerik:StyleManager.Theme>
<telerik:Office_BlackTheme/>
</telerik:StyleManager.Theme>
</CheckBox>
<RadioButton x:Name="RadioButtonElement" Grid.Column="2" IsTabStop="False" Margin="5,0,0,0" Visibility="Collapsed" VerticalAlignment="Center">
<telerik:StyleManager.Theme>
<telerik:Office_BlackTheme/>
</telerik:StyleManager.Theme>
</RadioButton>
<Image x:Name="Image" Grid.Column="3" HorizontalAlignment="Center" MaxWidth="16" MaxHeight="16" Margin="2" VerticalAlignment="Center" Visibility="Collapsed"/>
<Rectangle x:Name="FocusVisual" Grid.ColumnSpan="6" Grid.Column="2" IsHitTestVisible="False" RadiusY="3" RadiusX="3" Stroke="Black" StrokeThickness="1" StrokeDashArray="1 2" Visibility="Collapsed"/>
<Grid x:Name="grid" Grid.ColumnSpan="2" Grid.Column="4">
<ContentPresenter x:Name="Header" ContentTemplate="{TemplateBinding HeaderTemplate}" Content="{TemplateBinding Header}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
<ContentPresenter x:Name="EditHeaderElement" ContentTemplate="{TemplateBinding HeaderEditTemplate}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" Visibility="Collapsed" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
</Grid>
</Grid>
<ItemsPresenter x:Name="ItemsHost" Grid.Row="1" Visibility="Collapsed"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="ItemsPanel">
<Setter.Value>
<ItemsPanelTemplate>
<telerik:TreeViewPanel IsItemsHost="True" IsVisualCacheEnabled="False" VerticalAlignment="Bottom"/>
</ItemsPanelTemplate>
</Setter.Value>
</Setter>
</Style>

<DataTemplate DataType="{x:Type ani:Animal}">
<Grid x:Name="grid" Width="{Binding ActualWidth, ElementName=image}" Height="Auto" Margin="0,1">
<StackPanel VerticalAlignment="Center">
<Rectangle Width="Auto" Height="1" StrokeThickness="2" Fill="#FFCDCDCD"/>
<TextBlock x:Name="textBlock" Text="{Binding Name}" FontWeight="Bold" Margin="8" VerticalAlignment="Center"/>
</StackPanel>
</Grid>
</DataTemplate>

<HierarchicalDataTemplate DataType="{x:Type vm:SubEspecie}" ItemsSource="{Binding Animales}">
<HierarchicalDataTemplate.Resources>
<Storyboard x:Key="OnMouseEnter1">
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)" Storyboard.TargetName="grid">
<EasingColorKeyFrame KeyTime="0" Value="#FFE1E1E1"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Key="OnMouseLeave1">
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)" Storyboard.TargetName="grid">
<EasingColorKeyFrame KeyTime="0" Value="#FFF4F4F4"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
</HierarchicalDataTemplate.Resources>
<Grid x:Name="grid" Width="{Binding ActualWidth, ElementName=image}" Background="#FFF4F4F4" Height="Auto" Margin="0,1">
<StackPanel VerticalAlignment="Center">
<Rectangle Width="Auto" Height="1" StrokeThickness="2" Fill="#FFCDCDCD"/>
<TextBlock x:Name="textBlock" Text="{Binding Name}" FontWeight="Bold" Margin="8" VerticalAlignment="Center"/>
</StackPanel>
</Grid>
<HierarchicalDataTemplate.Triggers>
<EventTrigger RoutedEvent="UIElement.MouseEnter">
<BeginStoryboard Storyboard="{StaticResource OnMouseEnter1}"/>
</EventTrigger>
<EventTrigger RoutedEvent="UIElement.MouseLeave">
<BeginStoryboard x:Name="OnMouseLeave1_BeginStoryboard" Storyboard="{StaticResource OnMouseLeave1}"/>
</EventTrigger>
</HierarchicalDataTemplate.Triggers>
</HierarchicalDataTemplate>

<HierarchicalDataTemplate DataType="{x:Type vm:Especie}" ItemsSource="{Binding EspeciesAnimales}">
<HierarchicalDataTemplate.Resources>
<Storyboard x:Key="OnMouseEnter1">
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)" Storyboard.TargetName="grid">
<EasingColorKeyFrame KeyTime="0" Value="#FFCDCDCD"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Key="OnMouseLeave1">
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)" Storyboard.TargetName="grid">
<EasingColorKeyFrame KeyTime="0" Value="#FFE2E2E2"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
</HierarchicalDataTemplate.Resources>
<Grid x:Name="grid" Width="{Binding ActualWidth, ElementName=image}" Background="#FFE2E2E2" Height="Auto" Margin="0,1">
<StackPanel VerticalAlignment="Center">
<Rectangle Width="Auto" Height="1" StrokeThickness="2" Fill="#FFCDCDCD"/>
<TextBlock x:Name="textBlock" Text="{Binding Name}" FontWeight="Bold" Margin="8" VerticalAlignment="Center"/>
</StackPanel>
</Grid>
<HierarchicalDataTemplate.Triggers>
<EventTrigger RoutedEvent="UIElement.MouseEnter">
<BeginStoryboard Storyboard="{StaticResource OnMouseEnter1}"/>
</EventTrigger>
<EventTrigger RoutedEvent="UIElement.MouseLeave">
<BeginStoryboard x:Name="OnMouseLeave1_BeginStoryboard" Storyboard="{StaticResource OnMouseLeave1}"/>
</EventTrigger>
</HierarchicalDataTemplate.Triggers>
</HierarchicalDataTemplate>

<Style x:Key="ItemContainerStyle" TargetType="{x:Type telerik:RadTreeViewItem}">
<Setter Property="IsSelected" Value="{Binding Path=Selected, Mode=TwoWay}"/>
<Setter Property="IsExpanded" Value="{Binding Path=Expanded, Mode=TwoWay}"/>
</Style>

</Window.Resources>
<StackPanel HorizontalAlignment="Left">
<Image x:Name="image" Source="logoA3.png" Stretch="Fill" Height="81" HorizontalAlignment="Left" Width="220"/>
<telerik:RadTreeView
Margin="8"
SelectionMode="Multiple"
HorizontalAlignment="Left"
ItemsSource="{Binding Source={StaticResource TreeViewDataSource}}"
ItemContainerStyle="{StaticResource RadTreeViewItemStyle}"
IsExpandOnSingleClickEnabled="True" />
</StackPanel>
</Window>

Anyone knows how to do it?

Regards!! :)

TreeView

answered on 05 Mar 2015