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

Upgraded To Latest and tileviewitemheader not appearing

1 Answer 37 Views
TileView
This is a migrated thread and some comments may be shown as answers.
Civbaron
Top achievements
Rank 1
Civbaron asked on 24 Oct 2013, 04:08 PM
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:

1 Answer, 1 is accepted

Sort by
0
Pavel R. Pavlov
Telerik team
answered on 29 Oct 2013, 02:24 PM
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 >>
Tags
TileView
Asked by
Civbaron
Top achievements
Rank 1
Answers by
Pavel R. Pavlov
Telerik team
Share this question
or