Custom style problem after upgrade from 2012 release to 2013

5 posts, 1 answers
  1. Adam
    Adam avatar
    4 posts
    Member since:
    Mar 2011

    Posted 24 May 2013 Link to this post

    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="Auto" />
                                    <ColumnDefinition Width="Auto" />
                                    <ColumnDefinition Width="Auto" />
                                    <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>
                                    </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>
                            </Grid>
                            <ItemsPresenter x:Name="ItemsHost" Grid.Row="1" Visibility="Collapsed" />
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

    Gah, sorry for the messed up edits.
  2. Pavel R. Pavlov
    Admin
    Pavel R. Pavlov avatar
    1182 posts

    Posted 29 May 2013 Link to this post

    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.

  3. DevCraft banner
  4. Adam
    Adam avatar
    4 posts
    Member since:
    Mar 2011

    Posted 29 May 2013 Link to this post

    <ResourceDictionary
     
        <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>
            </Grid>
        </ControlTemplate>
     
    </ResourceDictionary>
    <ResourceDictionary
        xmlns:Telerik="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls"
     
        <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!
  5. Answer
    Pavel R. Pavlov
    Admin
    Pavel R. Pavlov avatar
    1182 posts

    Posted 30 May 2013 Link to this post

    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.

  6. Adam
    Adam avatar
    4 posts
    Member since:
    Mar 2011

    Posted 31 May 2013 Link to this post

    Thank you very much for your guidance on this.  Your suggestions led me to the solution for this problem.
Back to Top
DevCraft banner