This is a migrated thread and some comments may be shown as answers.

Custom style problem after upgrade from 2012 release to 2013

4 Answers 117 Views

TreeView

This is a migrated thread and some comments may be shown as answers.

Adam asked on 24 May 2013, 10:31 PM

I am attempting to update our application to the latest release, and I am having serious trouble tracking down the compatibility issue that is causing this style which functioned normally in 2011 and 2012, but jacks up our view using the 2013 release. Advice from anyone who can take a look with knowing eyes would be greatly appreciated.

<Style x:Key="MyStyle" TargetType="TelerikNavigation:RadTreeViewItem">

<Setter Property="HorizontalContentAlignment" Value="Stretch" />

<Setter Property="VerticalContentAlignment" Value="Center" />

<Setter Property="CheckState" Value="Off" />

<Setter Property="BorderThickness" Value="0.0" />

<Setter Property="Padding" Value="1 0 5 0" />

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

<Setter Property="IsDropAllowed" Value="True" />

<Setter Property="ItemsOptionListType" Value="Default" />

<Setter Property="IsEnabled" Value="True" />

<Setter Property="MinHeight" Value="24" />

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

<Setter Property="ItemsPanel">

<Setter.Value>

<ItemsPanelTemplate>

<TelerikTreeView:TreeViewPanel VerticalAlignment="Bottom" />

</ItemsPanelTemplate>

</Setter.Value>

</Setter>

<Setter Property="Template">

<Setter.Value>

<ControlTemplate TargetType="TelerikNavigation:RadTreeViewItem">

<Grid x:Name="RootElement" Background="Transparent">

<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" Value="Visible" />

</ObjectAnimationUsingKeyFrames>

<ObjectAnimationUsingKeyFrames Duration="0"

Storyboard.TargetProperty="Visibility"

Storyboard.TargetName="Header">

<DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed" />

</ObjectAnimationUsingKeyFrames>

</Storyboard>

</VisualState>

</VisualStateGroup>

<VisualStateGroup x:Name="CommonStates">

<VisualState x:Name="Normal" />

<VisualState x:Name="Disabled">

<Storyboard>

<DoubleAnimation Duration="0:0:0.0" To="0.35"

Storyboard.TargetProperty="Opacity"

Storyboard.TargetName="Header" />

<DoubleAnimation Duration="0:0:0.0" To="0.35"

Storyboard.TargetProperty="Opacity"

Storyboard.TargetName="Image" />

<DoubleAnimation Duration="0:0:0.0" To="0.35"

Storyboard.TargetProperty="Opacity"

Storyboard.TargetName="Expander" />

</Storyboard>

</VisualState>

<VisualState x:Name="MouseOver" />

</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" Value="Visible" />

</ObjectAnimationUsingKeyFrames>

</Storyboard>

</VisualState>

<VisualState x:Name="SelectedUnfocused">

<Storyboard>

<ObjectAnimationUsingKeyFrames Duration="0"

Storyboard.TargetProperty="Visibility"

Storyboard.TargetName="SelectionUnfocusedVisual">

<DiscreteObjectKeyFrame KeyTime="0" Value="Visible" />

</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" Value="Visible" />

</ObjectAnimationUsingKeyFrames>

<ObjectAnimationUsingKeyFrames Duration="0"

Storyboard.TargetProperty="Visibility"

Storyboard.TargetName="Expander">

<DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed" />

</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">

<Storyboard>

<ObjectAnimationUsingKeyFrames Duration="0"

Storyboard.TargetProperty="Visibility"

Storyboard.TargetName="FocusVisual">

<DiscreteObjectKeyFrame KeyTime="0" Value="Visible" />

</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}">

<Grid.ColumnDefinitions>

<ColumnDefinition Width="Auto" />

<ColumnDefinition Width="*" />

</Grid.ColumnDefinitions>

<Border BorderBrush="{StaticResource TransparentBrush}"

BorderThickness="{TemplateBinding BorderThickness}"

Background="{StaticResource TransparentBrush}" Grid.ColumnSpan="6" Grid.Column="2"

CornerRadius="2" />

<Border x:Name="MouseOverVisual" BorderBrush="{StaticResource TransparentBrush}"

BorderThickness="{StaticResource NoThickness}" Grid.ColumnSpan="6" Grid.Column="2"

CornerRadius="{StaticResource NoRadius}" Opacity="0">

<Border BorderBrush="{StaticResource TransparentBrush}"

BorderThickness="{StaticResource NoThickness}"

Background="{StaticResource TransparentBrush}"

CornerRadius="{StaticResource NoRadius}" />

</Border>

<Border x:Name="SelectionUnfocusedVisual" BorderBrush="{StaticResource TransparentBrush}"

BorderThickness="{StaticResource NoThickness}" Grid.ColumnSpan="6" Grid.Column="2"

CornerRadius="{StaticResource ControlSubItem_OuterCornerRadius}"

Visibility="Collapsed">

<Border BorderBrush="{StaticResource ControlSubItem_InnerBorder_UnFocus}"

BorderThickness="{StaticResource NoThickness}"

Background="{StaticResource ControlSubItem_Background_UnFocus}"

CornerRadius="{StaticResource NoRadius}" />

</Border>

<Border x:Name="SelectionVisual" BorderBrush="{StaticResource TransparentBrush}"

BorderThickness="{StaticResource NoThickness}" Grid.ColumnSpan="6" Grid.Column="2"

CornerRadius="{StaticResource NoRadius}" Visibility="Collapsed">

<Border BorderBrush="{StaticResource TransparentBrush}"

BorderThickness="{StaticResource NoThickness}"

Background="{StaticResource TransparentBrush}"

CornerRadius="{StaticResource NoRadius}" />

</Border>

<StackPanel x:Name="IndentContainer" Orientation="Horizontal">

<Rectangle x:Name="IndentFirstVerticalLine" Stroke="{StaticResource TransparentBrush}"

Visibility="Visible" VerticalAlignment="Top" Width="20">

<Rectangle.Clip>

<RectangleGeometry Rect="0,0,1,10000" />

</Rectangle.Clip>

</Rectangle>

</StackPanel>

<Border x:Name="HeaderToggle" Grid.Column="1" Grid.ColumnSpan="5"

HorizontalAlignment="Stretch" Background="Transparent" BorderThickness="0,1,0,0"

CornerRadius="2" BorderBrush="Gray">

<Grid x:Name="ListRootContainer" HorizontalAlignment="Stretch" MinWidth="20">

<ToggleButton x:Name="Expander" IsEnabled="{TemplateBinding IsEnabled}"

Template="{StaticResource ToggleButtonGlassTemplate}"

Background="Transparent" Content="{TemplateBinding Header}"

ContentTemplate="{TemplateBinding HeaderTemplate}" />

<Grid x:Name="LoadingVisual" HorizontalAlignment="Center"

RenderTransformOrigin="0.5,0.5" Visibility="Collapsed"

VerticalAlignment="Center">

<Grid.RenderTransform>

<TransformGroup>

<RotateTransform x:Name="LoadingVisualAngleTransform" Angle="0"

CenterY="0.5" CenterX="0.5" />

</TransformGroup>

</Grid.RenderTransform>

<Path Data="M1,0 A1,1,90,1,1,0,-1" Height="10" StrokeStartLineCap="Round"

Stretch="Fill" Stroke="{TemplateBinding Foreground}" StrokeThickness="1"

Width="10" />

<Path Data="M0,-1.1 L0.1,-1 L0,-0.9" Fill="{TemplateBinding Foreground}"

HorizontalAlignment="Left" Height="4" Margin="5,-1.5,0,0" Stretch="Fill"

StrokeThickness="1" VerticalAlignment="Top" Width="4" />

</Grid>

</Border>

<Image x:Name="Image" Grid.Column="3" HorizontalAlignment="Center" MaxWidth="16"

MaxHeight="16" Margin="2" VerticalAlignment="Center" />

<Rectangle x:Name="FocusVisual" Grid.ColumnSpan="6" Grid.Column="0"

IsHitTestVisible="False" RadiusY="3" RadiusX="3"

Stroke="{StaticResource FocusBrushBlack}" StrokeThickness="1"

StrokeDashArray="1 2" Visibility="Collapsed" />

<Grid Visibility="Collapsed" Grid.ColumnSpan="2" Grid.Column="4" Background="Transparent">

<ContentPresenter x:Name="Header"

HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"

Margin="{TemplateBinding Padding}"

VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />

<ContentPresenter x:Name="EditHeaderElement"

HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"

Margin="{TemplateBinding Padding}" Visibility="Collapsed"

VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />

</Grid>

<ItemsPresenter x:Name="ItemsHost" Grid.Row="1" Visibility="Collapsed" />

</Grid>

</ControlTemplate>

</Setter.Value>

</Setter>

</Style>

Gah, sorry for the messed up edits.

4 Answers, 1 is accepted

answered on 29 May 2013, 08:45 AM

SilverlightApplication3.zip

Hello Adam,

I tried your snippet out and it seems that some resources are missing. Also, the template called "ToggleButtonGlassTemplate" will be needed in order to see the issue that you report. Can you please change the attached project so that I will be able to run it (and see the issue that you report) on our side and send it over. Also, it will be great if you make a picture of your layout and clarify which alignments are not desired.

Thank you for your cooperation. I am looking forward to hearing from you.

Regards,
Pavel R. Pavlov
Telerik

Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

answered on 29 May 2013, 06:08 PM

telerikBeforeAndAfter.png

<ResourceDictionary

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

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

<SolidColorBrush x:Key="ToggleButtonHiliteBorder" Color="#ffc92b" />

<LinearGradientBrush x:Key="ToggleButtonHilightBrush" StartPoint="0.5, 0" EndPoint="0.5,1">

<GradientStop Offset="0.00" Color="#FEF3C7" />

<GradientStop Offset="0.49" Color="#FEF3C7" />

<GradientStop Offset="0.50" Color="#FEE57C" />

<GradientStop Offset="1.00" Color="#FEE57C" />

</LinearGradientBrush>

<LinearGradientBrush x:Key="ToggleButtonPressedBrush" StartPoint="0.5, 0" EndPoint="0.5,1">

<GradientStop Offset="0" Color="#FEF3C7" />

<GradientStop Offset="0.75" Color="#fedb31" />

</LinearGradientBrush>

<LinearGradientBrush x:Key="ToggleButtonNormalBrush" StartPoint="0.5, 0.0" EndPoint="0.5, 1.0">

<GradientStop Offset="0.15" Color="#E8E8E8" />

<GradientStop Offset="0.49" Color="#E8E8E8" />

<GradientStop Offset="0.55" Color="#BABABA" />

<GradientStop Offset="0.84" Color="#BABABA" />

</LinearGradientBrush>

<ControlTemplate TargetType="ToggleButton" x:Key="ToggleButtonGlassTemplate">

<Grid Background="{TemplateBinding Background}">

<VisualStateManager.VisualStateGroups>

<VisualStateGroup x:Name="CommonStates">

<VisualState x:Name="Normal" />

<VisualState x:Name="MouseOver" />

<!--

<Storyboard>

<ObjectAnimationUsingKeyFrames Storyboard.TargetName="buttonCircle" Storyboard.TargetProperty="Fill" Duration="0">

<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ToggleButtonHilightBrush}" />

</ObjectAnimationUsingKeyFrames>

<ObjectAnimationUsingKeyFrames Storyboard.TargetName="buttonCircle" Storyboard.TargetProperty="Stroke" Duration="0">

<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ToggleButtonHiliteBorder}" />

</ObjectAnimationUsingKeyFrames>

</Storyboard>

</VisualState>

-->

<VisualState x:Name="Pressed">

<!--

<Storyboard>

<ObjectAnimationUsingKeyFrames Storyboard.TargetName="buttonCircle" Storyboard.TargetProperty="Fill" Duration="0">

<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ToggleButtonPressedBrush}" />

</ObjectAnimationUsingKeyFrames>

</Storyboard>

-->

</VisualState>

</VisualStateGroup>

<VisualStateGroup x:Name="CheckStates">

<VisualState x:Name="Checked">

<Storyboard>

<DoubleAnimation Storyboard.TargetName="arrowRotate" Duration="0:0:0.15"

Storyboard.TargetProperty="Angle" To="180" />

</Storyboard>

</VisualState>

<VisualState x:Name="Unchecked">

<Storyboard>

<DoubleAnimation Storyboard.TargetName="arrowRotate" Duration="0:0:0.15"

Storyboard.TargetProperty="Angle" To="0" />

</Storyboard>

</VisualState>

</VisualStateGroup>

</VisualStateManager.VisualStateGroups>

<Grid x:Name="HeaderGrid" Background="Transparent">

<Grid.ColumnDefinitions>

<ColumnDefinition Width="Auto" />

<ColumnDefinition />

</Grid.ColumnDefinitions>

<Grid Width="20" Height="20" Grid.Column="0" Margin="3, 0, 0, 0">

<Ellipse x:Name="buttonCircle" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"

StrokeThickness="1" Stroke="#898989" Fill="{StaticResource ToggleButtonNormalBrush}" />

<Ellipse x:Name="outlineCircle" Margin="1" HorizontalAlignment="Stretch"

VerticalAlignment="Stretch" StrokeThickness="1" Stroke="White" Fill="Transparent" />

<Path x:Name="arrow" HorizontalAlignment="Center" VerticalAlignment="Center" StrokeThickness="1"

Data="M 0,0 L 4,3 L 8,0">

<Path.RenderTransform>

<RotateTransform x:Name="arrowRotate" Angle="0" CenterX="4" CenterY="1.5" />

</Path.RenderTransform>

<Path.Stroke>

<SolidColorBrush x:Name="arrowStroke" Color="Black" />

</Path.Stroke>

</Path>

</Grid>

<ContentPresenter Grid.Column="1" Margin="5,0,5,0" VerticalAlignment="Center"

Content="{TemplateBinding Content}" />

</Grid>

</ControlTemplate>

</ResourceDictionary>

<ResourceDictionary

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

xmlns:Telerik="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls"

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

<LinearGradientBrush x:Key="HeaderNormalBrush" StartPoint="0.5, 0" EndPoint="0.5,1">

<GradientStop Color="#FDFDFD" Offset="0.25" />

<GradientStop Color="#F1F1F1" Offset="0.75" />

</LinearGradientBrush>

<LinearGradientBrush x:Key="HeaderLockedBrush" StartPoint="0.5, 0" EndPoint="0.5,1">

<GradientStop Color="#FEF2B9" Offset="0.25" />

<GradientStop Color="#FED309" Offset="0.75" />

</LinearGradientBrush>

<SolidColorBrush x:Key="ControlSubItem_OuterBorder_MouseOver" Color="#FFFFC92B" />

<Thickness x:Key="ControlSubItem_OuterBorderThickness">1</Thickness>

<SolidColorBrush x:Key="ControlSubItem_InnerBorder_MouseOver" Color="#FFFFFFFF" />

<Thickness x:Key="ControlSubItem_InnerBorderThickness">1</Thickness>

<LinearGradientBrush x:Key="ControlSubItem_Background_MouseOver" EndPoint="0.5,1" StartPoint="0.5,0">

<GradientStop Color="#FFFFFBA3" Offset="1" />

<GradientStop Color="#FFFFFBDA" Offset="0" />

</LinearGradientBrush>

<CornerRadius x:Key="ControlSubItem_InnerCornerRadius">0</CornerRadius>

<CornerRadius x:Key="ControlSubItem_OuterCornerRadius">1</CornerRadius>

<SolidColorBrush x:Key="ControlSubItem_OuterBorder_UnFocus" Color="#FFdbdbdb" />

<SolidColorBrush x:Key="ControlSubItem_InnerBorder_UnFocus" Color="Transparent" />

<LinearGradientBrush x:Key="ControlSubItem_Background_UnFocus" EndPoint="0,1">

<GradientStop Color="#FFf8f6f9" Offset="0" />

<GradientStop Color="#FFf0f0f0" Offset="1" />

</LinearGradientBrush>

<SolidColorBrush x:Key="ControlSubItem_OuterBorder_Selected" Color="#FFFFC92B" />

<SolidColorBrush x:Key="ControlSubItem_InnerBorder_Selected" Color="#FFFFFFFF" />

<LinearGradientBrush x:Key="ControlSubItem_Background_Selected" EndPoint="0.5,1" StartPoint="0.5,0">

<GradientStop Color="#FFFCE79F" Offset="1" />

<GradientStop Color="#FFFDD3A8" />

</LinearGradientBrush>

<SolidColorBrush x:Key="TreeView_LineColor" Color="#FFCCCCCC" />

<Telerik:Office_BlackTheme x:Key="Theme" />

<SolidColorBrush x:Key="FocusBrushBlack" Color="#FF000000" />

<SolidColorBrush x:Key="TransparentBrush" Color="Transparent" />

<Thickness x:Key="NoThickness">0</Thickness>

<CornerRadius x:Key="NoRadius">0</CornerRadius>

</ResourceDictionary>

The first block is the ToggleButtonGlassTemplate.xaml you asked for and the second is our Brushes.xaml. Strangely, I was hoping it was just something obvious I was missing. I have also attached a picture of what the control looked like using both releases. I modified your project but I didn't realize I wouldn't be able to attach a zip here. Thanks for your help, I really appreciate it!

Accepted

answered on 30 May 2013, 08:39 AM

TreeViewItem-CustomStyle.zip

Hello Adam,

Thank you for providing me with more information. As I can see in your code, you applied a custom style to the ToggleButton which expands/collapses the RadTreeViewItem and you have wrapped it in a Border element. This is why I decided to extract the latest template of the RadTreeViewItem and apply your custom style to that button. Visually the second level item looks like the item from your picture. Furthermore, you can use ItemTemplateSelector to apply different styles to items from different levels (e.g. the root item).

Please take a look at the attached project and let me know if it works for you.

Regards,
Pavel R. Pavlov
Telerik

Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Custom style problem after upgrade from 2012 release to 2013

4 Answers, 1 is accepted