Upgraded To Latest and tileviewitemheader not appearing

2 posts, 0 answers
  1. Civbaron
    Civbaron avatar
    20 posts
    Member since:
    Jan 2010

    Posted 24 Oct 2013 Link to this post

    The company I work for recently updated our telerik controls library to the latest release. We were using the 2012.3.1129.40 release previously.

    We have been using the tileview control with a datatemplate assigned to the itemtemplate property and another datatemplate assigned to the contenttemplate. We also modified the the style of the tileview.

    Before the upgrade the header of the tileviewitem was displaying properly now it is not displaying anything. The datatemplate is not being applied and the styling is not being applied. 

    What changes have been done between the two release that could of caused this to work in the previous release but not work in the current release? 
     
    This is the style we are applying: The templates are applied in code behind to the tileview itself.
        <Style x:Key="TileViewItemHeaderStyle" TargetType="{x:Type telerikNavigation:TileViewItemHeader}">
            <Setter Property="Background" Value="Transparent"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type telerikNavigation:TileViewItemHeader}">
                        <Grid Margin="0 0 0 -2">
                            <Border x:Name="GripBarElement" Background="Transparent">
                                <ContentPresenter x:Name="HeaderElement" HorizontalAlignment="Stretch" VerticalAlignment="Center" Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding HeaderTemplate}" />
                            </Border>
                            <telerik:RadToggleButton x:Name="MaximizeToggleButton" Command="telerikNavigation:TileViewCommands.ToggleTileState" InnerCornerRadius="0">
                                <telerik:RadToggleButton.Style>
                                    <Style TargetType="{x:Type telerik:RadToggleButton}">
                                        <Setter Property="VerticalAlignment" Value="Center" />
                                        <Setter Property="HorizontalAlignment" Value="Right" />
                                        <Setter Property="Height" Value="16" />
                                        <Setter Property="Template">
                                            <Setter.Value>
                                                <ControlTemplate TargetType="{x:Type telerik:RadToggleButton}">
                                                    <Grid>
                                                        <Image x:Name="RestoreIcon" Source="pack://application:,,,/PulseInc.Resource;component/Icon_16/MaximizeWindow_02.png" Width="16" Height="16" ToolTip="Maximize" telerik:LocalizationManager.ResourceKey="TileViewItemMaximizeText" HorizontalAlignment="Right" VerticalAlignment="Top" Opacity="0.6"/>
                                                        <Image x:Name="BackIcon" Source="pack://application:,,,/PulseInc.Resource;component/Icon_16/MinimizeWindow_02.png" Width="16" Height="16" ToolTip="Restore" telerik:LocalizationManager.ResourceKey="TileViewItemMinimizeText" HorizontalAlignment="Right" VerticalAlignment="Top" Opacity="0.6" Visibility="Collapsed"/>
                                                    </Grid>
                                                    <ControlTemplate.Triggers>
                                                        <Trigger Property="IsMouseOver" Value="True">
                                                            <Setter TargetName="RestoreIcon" Property="Opacity" Value="1" />
                                                            <Setter TargetName="BackIcon" Property="Opacity" Value="1" />
                                                        </Trigger>
                                                        <Trigger Property="IsPressed" Value="True" />
                                                        <Trigger Property="IsChecked" Value="True">
                                                            <Setter TargetName="RestoreIcon" Property="Visibility" Value="Collapsed" />
                                                            <Setter TargetName="BackIcon" Property="Visibility" Value="Visible" />                                                        
                                                        </Trigger>
                                                        <DataTrigger Binding="{Binding Path=MaximizeMode, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type telerik:RadTileView}}}" Value="Zero">
                                                            <Setter TargetName="RestoreIcon" Property="Visibility" Value="Hidden"/>
                                                            <Setter TargetName="BackIcon" Property="Visibility" Value="Hidden"/>
                                                        </DataTrigger>
                                                    </ControlTemplate.Triggers>
                                                </ControlTemplate>
                                            </Setter.Value>
                                        </Setter>
                                    </Style>
                                </telerik:RadToggleButton.Style>
                            </telerik:RadToggleButton>
                        </Grid>
                        <ControlTemplate.Triggers>
                            <Trigger Property="TileState" Value="Maximized">
                                <Trigger.EnterActions>
                                    <BeginStoryboard>
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="MaximizeToggleButton" Storyboard.TargetProperty="IsChecked">
                                                <DiscreteObjectKeyFrame KeyTime="0">
                                                    <DiscreteObjectKeyFrame.Value>
                                                        <System:Boolean>True</System:Boolean>
                                                    </DiscreteObjectKeyFrame.Value>
                                                </DiscreteObjectKeyFrame>
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </BeginStoryboard>
                                </Trigger.EnterActions>
                                <Trigger.ExitActions>
                                    <BeginStoryboard>
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="MaximizeToggleButton" Storyboard.TargetProperty="IsChecked">
                                                <DiscreteObjectKeyFrame KeyTime="0">
                                                    <DiscreteObjectKeyFrame.Value>
                                                        <System:Boolean>False</System:Boolean>
                                                    </DiscreteObjectKeyFrame.Value>
                                                </DiscreteObjectKeyFrame>
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </BeginStoryboard>
                                </Trigger.ExitActions>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
     
        <!--RadTileViewItem style defined as implicit style to avoid warning at runtime (output window) -->
        <Style TargetType="{x:Type telerik:RadTileViewItem}">
            <Setter Property="HorizontalContentAlignment" Value="Stretch" />
            <Setter Property="VerticalContentAlignment" Value="Stretch" />
            <Setter Property="FocusVisualStyle" Value="{x:Null}" />
            <Setter Property="BorderBrush" Value="#FFB0B1B0" />
            <Setter Property="BorderThickness" Value="1" />
            <Setter Property="Padding" Value="5" />
            <Setter Property="SnapsToDevicePixels" Value="True" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type telerik:RadTileViewItem}">
                        <Grid>
                            <Border x:Name="outerBorder" Margin="{TemplateBinding Padding}" BorderBrush="LightGray" BorderThickness="1" CornerRadius="0">
                                <Border.Style>
                                    <Style>
                                        <Style.Triggers>
                                            <Trigger Property="Border.IsMouseOver" Value="true">
                                                <Setter Property="Border.Background" >
                                                    <Setter.Value>                                                   
                                                            <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                                                <GradientStop Color="#FFFFFFFF" Offset="0"/>
                                                                <GradientStop Color="#FFC4D0EB" Offset="1"/>
                                                            </LinearGradientBrush>                                                   
                                                    </Setter.Value>
                                                </Setter>
                                            </Trigger>
                                        </Style.Triggers>
                                    </Style>
                                </Border.Style>
                                <Border x:Name="outerContainer" BorderBrush="White" BorderThickness="1"  Background="Transparent" CornerRadius="0">
                                    <Grid>
                                        <Grid.RowDefinitions>
                                            <RowDefinition Height="Auto" />
                                            <RowDefinition Height="*" />
                                        </Grid.RowDefinitions>
                                        <telerikNavigation:TileViewItemHeader x:Name="HeaderPart" HeaderTemplate="{TemplateBinding HeaderTemplate}" Style="{DynamicResource TileViewItemHeaderStyle}" />
                                        <Grid Grid.Row="1" Margin="5 0 5 2">
                                            <ContentPresenter x:Name="ContentElement" Grid.Row="1" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}" />
                                        </Grid>
                                        <Rectangle x:Name="DisabledVisual" Grid.RowSpan="2" Fill="#99FFFFFF" RadiusX="4" RadiusY="4" Visibility="Collapsed" />
                                    </Grid>
                                </Border>
                            </Border>
                        </Grid>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsSelected" Value="True">
                                   <Setter TargetName="outerBorder" Property="BorderBrush" Value="#273B8B" />
                                    <Setter TargetName="outerBorder" Property="Border.Background" >
                                        <Setter.Value>
                                            <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                                <GradientStop Color="#FFFFFFFF" Offset="0"/>
                                                <GradientStop Color="#FFC4D0EB" Offset="1"/>
                                            </LinearGradientBrush>
                                        </Setter.Value>
                                    </Setter>                            
                            </Trigger>
                            <Trigger Property="IsMouseOver" Value="True">
                                <Setter TargetName="outerBorder" Property="BorderBrush" Value="#273B8B" />
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

    This is the style we are applying:

  2. Pavel R. Pavlov
    Admin
    Pavel R. Pavlov avatar
    1183 posts

    Posted 29 Oct 2013 Link to this post

    Hello Civbaron,

    Thank you for contacting us on that matter. We indeed made some changes to the Style of the RadTileViewItem control. You can find information about upgrading your controls in this forum post.

    Please try the suggested approach and let us know if you need any further assistance. Please accept our apology for the inconvenience caused.

    Regards,
    Pavel R. Pavlov
    Telerik
    TRY TELERIK'S NEWEST PRODUCT - EQATEC APPLICATION ANALYTICS for WPF.
    Learn what features your users use (or don't use) in your application. Know your audience. Target it better. Develop wisely.
    Sign up for Free application insights >>
  3. UI for WPF is Visual Studio 2017 Ready
Back to Top