Hello,
I am on my way to trying to solve my issues that I posted here
One problem that I have noticed so far is that it seems that I can not have both ItemTemplateSelector and ItemContainerStyle for a TreeView. Is this a bug? If not, how would I go about using a custom TreeViewItemStyle?
Thanks
Ryan
<Window.Resources> |
<!-- List Item Selected --> |
<LinearGradientBrush x:Key="GotFocusStyle" EndPoint="0.5,1" StartPoint="0.5,0"> |
<LinearGradientBrush.GradientStops> |
<GradientStop Color="Black" Offset="0.501"/> |
<GradientStop Color="#FF091F34"/> |
<GradientStop Color="#FF002F5C" Offset="0.5"/> |
</LinearGradientBrush.GradientStops> |
</LinearGradientBrush> |
<!-- List Item Hover --> |
<LinearGradientBrush x:Key="MouseOverFocusStyle" StartPoint="0,0" EndPoint="0,1"> |
<LinearGradientBrush.GradientStops> |
<GradientStop Color="#FF013B73" Offset="0.501"/> |
<GradientStop Color="#FF091F34"/> |
<GradientStop Color="#FF014A8F" Offset="0.5"/> |
<GradientStop Color="#FF003363" Offset="1"/> |
</LinearGradientBrush.GradientStops> |
</LinearGradientBrush> |
<!-- List Item UnSelected --> |
<LinearGradientBrush x:Key="LostFocusStyle" EndPoint="0.5,1" StartPoint="0.5,0"> |
<LinearGradientBrush.RelativeTransform> |
<TransformGroup> |
<ScaleTransform CenterX="0.5" CenterY="0.5"/> |
<SkewTransform CenterX="0.5" CenterY="0.5"/> |
<RotateTransform CenterX="0.5" CenterY="0.5"/> |
<TranslateTransform/> |
</TransformGroup> |
</LinearGradientBrush.RelativeTransform> |
<GradientStop Color="#FF091F34" Offset="1"/> |
<GradientStop Color="#FF002F5C" Offset="0.4"/> |
</LinearGradientBrush> |
<!-- List Item Highlight --> |
<SolidColorBrush x:Key="ListItemHighlight" Color="#FFE38E27" /> |
<!-- List Item UnHighlight --> |
<SolidColorBrush x:Key="ListItemUnHighlight" Color="#FF6FB8FD" /> |
<!-- Button Gradient --> |
<LinearGradientBrush x:Key="ButtonGradient" EndPoint="0.5,1" StartPoint="0.5,0"> |
<GradientStop Color="#FF0E3D70"/> |
<GradientStop Color="#FF001832" Offset="1"/> |
</LinearGradientBrush> |
</Window.Resources> |
<Grid> |
<Grid.Resources> |
<ControlTemplate TargetType="Telerik:RadTreeViewItem" x:Key="TreeViewItemDefaultTemplate"> |
<ControlTemplate.Triggers> |
<Trigger Property="IsSelected" Value="True"> |
</Trigger> |
<Trigger Property="IsSelected" Value="True"> |
<Trigger.EnterActions> |
<BeginStoryboard> |
<Storyboard> |
<ObjectAnimationUsingKeyFrames |
Storyboard.TargetName="SelectionVisual" |
Storyboard.TargetProperty="Visibility" Duration="0"> |
<DiscreteObjectKeyFrame KeyTime="0"> |
<DiscreteObjectKeyFrame.Value> |
<Visibility>Visible</Visibility> |
</DiscreteObjectKeyFrame.Value> |
</DiscreteObjectKeyFrame> |
</ObjectAnimationUsingKeyFrames> |
</Storyboard> |
</BeginStoryboard> |
</Trigger.EnterActions> |
</Trigger> |
<Trigger Property="IsFocused" Value="True"> |
<Trigger.EnterActions> |
<BeginStoryboard> |
<Storyboard> |
<ObjectAnimationUsingKeyFrames |
Storyboard.TargetName="FocusVisual" |
Storyboard.TargetProperty="Visibility" Duration="0"> |
<DiscreteObjectKeyFrame KeyTime="0"> |
<DiscreteObjectKeyFrame.Value> |
<Visibility>Visible</Visibility> |
</DiscreteObjectKeyFrame.Value> |
</DiscreteObjectKeyFrame> |
</ObjectAnimationUsingKeyFrames> |
</Storyboard> |
</BeginStoryboard> |
</Trigger.EnterActions> |
</Trigger> |
<Trigger Property="IsExpanded" Value="True"> |
<Trigger.EnterActions> |
<BeginStoryboard> |
<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> |
</BeginStoryboard> |
</Trigger.EnterActions> |
<Trigger.ExitActions> |
<BeginStoryboard> |
<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> |
</BeginStoryboard> |
</Trigger.ExitActions> |
</Trigger> |
</ControlTemplate.Triggers> |
<Grid Margin="2" Height="Auto" VerticalAlignment="Top"> |
<Grid.RowDefinitions> |
<RowDefinition Height="Auto" /> |
<RowDefinition Height="Auto" /> |
</Grid.RowDefinitions> |
<Grid.ColumnDefinitions> |
<ColumnDefinition Width="Auto" /> |
<ColumnDefinition Width="Auto" /> |
</Grid.ColumnDefinitions> |
<Grid Grid.Row="0" Grid.Column="0" x:Name="HeaderRow" Height="Auto" VerticalAlignment="Bottom"> |
<!-- 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"> |
<ContentControl Name="Header" |
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="Telerik:RadTreeViewItem" x:Key="TreeViewItemStyle"> |
<Setter Property="Template" Value="{StaticResource TreeViewItemDefaultTemplate}" /> |
</Style> |
<Style TargetType="ToggleButton" x:Key="Expander"> |
<Setter Property="IsEnabled" Value="True" /> |
<Setter Property="IsTabStop" Value="False" /> |
<Setter Property="Cursor" Value="Hand" /> |
<Setter Property="Template"> |
<Setter.Value> |
<ControlTemplate TargetType="ToggleButton"> |
<ControlTemplate.Triggers> |
<Trigger Property="IsChecked" Value="True"> |
<Trigger.EnterActions> |
<BeginStoryboard> |
<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> |
</BeginStoryboard> |
</Trigger.EnterActions> |
<Trigger.ExitActions> |
<BeginStoryboard> |
<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> |
</BeginStoryboard> |
</Trigger.ExitActions> |
</Trigger> |
<Trigger Property="IsEnabled" Value="False"> |
<Trigger.EnterActions> |
<BeginStoryboard> |
<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> |
</BeginStoryboard> |
</Trigger.EnterActions> |
</Trigger> |
</ControlTemplate.Triggers> |
</ControlTemplate> |
</Setter.Value> |
</Setter> |
</Style> |
<XmlDataProvider x:Key="MyList" Source="XML/Scenes.xml" /> |
<HierarchicalDataTemplate x:Key="Procedures" ItemsSource="{Binding XPath=Procedures/Procedure}"> |
<Grid> |
<Grid.ColumnDefinitions> |
<ColumnDefinition Width="300" /> |
</Grid.ColumnDefinitions> |
<Label |
VerticalContentAlignment="Center" BorderThickness="0" BorderBrush="Transparent" |
Foreground="Aqua" |
FontSize="18" |
Tag="{Binding XPath=@name}" |
MinHeight="55" |
Cursor="Hand" |
FontFamily="Arial" |
FocusVisualStyle="{x:Null}" |
KeyboardNavigation.TabNavigation="None" |
Background="{StaticResource LostFocusStyle}" |
Name="SubItem" |
> |
<Label.ContextMenu> |
<ContextMenu Name="editMenu"> |
<MenuItem Header="Edit"/> |
</ContextMenu> |
</Label.ContextMenu> |
<TextBlock Text="{Binding XPath=@name}" Margin="15,0,40,0" TextWrapping="Wrap"></TextBlock> |
</Label> |
</Grid> |
</HierarchicalDataTemplate> |
<HierarchicalDataTemplate x:Key="Scenes" ItemsSource="{Binding XPath=Procedures/Procedure}"> |
<Grid> |
<Grid.ColumnDefinitions> |
<ColumnDefinition Width="300" /> |
</Grid.ColumnDefinitions> |
<Label |
VerticalContentAlignment="Center" BorderThickness="0" BorderBrush="Transparent" |
Foreground="White" |
FontSize="18" |
Tag="{Binding XPath=@name}" |
MinHeight="55" |
Cursor="Hand" |
FontFamily="Arial" |
FocusVisualStyle="{x:Null}" |
KeyboardNavigation.TabNavigation="None" |
Background="{StaticResource LostFocusStyle}" |
Name="SubItem" |
> |
<Label.ContextMenu> |
<ContextMenu Name="editMenu"> |
<MenuItem Header="Edit"/> |
</ContextMenu> |
</Label.ContextMenu> |
<TextBlock Text="{Binding XPath=@name}" Margin="15,0,40,0" TextWrapping="Wrap"></TextBlock> |
</Label> |
</Grid> |
</HierarchicalDataTemplate> |
<local:LeagueDataTemplateSelector x:Key="SceneSelector" ScenesTemplate="{StaticResource Scenes}" ProceduresTemplate="{StaticResource Procedures}" /> |
</Grid.Resources> |
<Grid Width="300" Height="320" HorizontalAlignment="Center" VerticalAlignment="Center"> |
<Border BorderBrush="#FF000000" CornerRadius="5" BorderThickness="5" Background="#FFFFFFFF"> |
<Telerik:RadTreeView |
ExpanderStyle="{StaticResource Expander}" |
ItemsSource="{Binding Source={StaticResource MyList}, XPath=/Scenes/Scene}" |
ItemTemplateSelector="{StaticResource SceneSelector}" |
ItemContainerStyle="{StaticResource TreeViewItemStyle}" |
/> |
</Border> |
</Grid> |
</Grid> |
Code Behind
public partial class Window1 : Window |
{ |
public Window1() |
{ |
InitializeComponent(); |
} |
} |
public class LeagueDataTemplateSelector : DataTemplateSelector |
{ |
private HierarchicalDataTemplate scenes; |
private HierarchicalDataTemplate procedures; |
public LeagueDataTemplateSelector() |
{ |
} |
public HierarchicalDataTemplate ScenesTemplate |
{ |
get |
{ |
return this.scenes; |
} |
set |
{ |
this.scenes = value; |
} |
} |
public HierarchicalDataTemplate ProceduresTemplate |
{ |
get |
{ |
return this.procedures; |
} |
set |
{ |
this.procedures = value; |
} |
} |
public override DataTemplate SelectTemplate(object item, DependencyObject container) |
{ |
string itemName = ((System.Xml.XmlElement)item).Name; |
if (itemName == "Procedure") |
{ |
return this.procedures; |
} |
else if (itemName == "Scene") |
{ |
return this.scenes; |
} |
return null; |
} |
} |