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

Custom the HeaderTemplate and the Max/Min Button is not working fine

4 Answers 87 Views

TileView

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

4 Answers, 1 is accepted

answered on 12 May 2011, 04:26 PM

TileViewToggleButtonTemplate.zip

Hi Kelley Wong,
Could you please give us some code snippets or a project that reproduces the issue, because at the moment I don't know what may have gone wron ( there may be some Visual States missing, wrong x:Name etc.) ? I've attached a sample project with a custom header template so you could examine it.

All the best,
Zarko
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items

answered on 19 May 2011, 09:33 AM

Hi ,
i create a simple project which contains only one MainPage.xaml
the following is the mainpage.xaml code

<UserControl x:Class="RadControlsSilverlightApp1.MainPage"

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

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

xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"

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

mc:Ignorable="d"

d:DesignWidth="640"

d:DesignHeight="480">

<UserControl.Resources>

<DataTemplate x:Key="PortalScoreCardStatusHeaderTemplate">

<Grid Height="55">

<Grid.ColumnDefinitions>

<ColumnDefinition Width="*" />

<ColumnDefinition Width="Auto" />

</Grid.ColumnDefinitions>

<Grid HorizontalAlignment="Left">

<Grid.ColumnDefinitions>

<ColumnDefinition />

</Grid.ColumnDefinitions>

<Grid>

<Rectangle Fill="#FFF4D056"

Stroke="#FFAF9022"

Margin="-2"

StrokeThickness="0.5"

RadiusX="2"

RadiusY="2"

x:Name="rectangle"

Opacity="0" />

<Grid Height="14"

Width="14"

VerticalAlignment="Center"

HorizontalAlignment="Center">

<Ellipse Stroke="#54000000" />

<Ellipse Margin="1,1,1,1"

Stroke="#FFFFFFFF"

StrokeThickness="0.5"

Fill="Red" />

<Ellipse Height="5.438"

HorizontalAlignment="Stretch"

Margin="2.84400010108948,1.90600001811981,3,0"

VerticalAlignment="Top">

<Ellipse.Fill>

<LinearGradientBrush EndPoint="0.5,1"

StartPoint="0.5,0">

<GradientStop Color="#99FFFFFF" />

<GradientStop Color="#33FFFFFF"

Offset="1" />

</LinearGradientBrush>

</Ellipse.Fill>

</Ellipse>

</Grid>

<TextBlock Grid.Column="1"

Margin="8,0"

HorizontalAlignment="Left"

FontWeight="Bold"

VerticalAlignment="Center"

Text="{Binding NAME}" />

</Grid>

<Image Grid.Column="1"

IsHitTestVisible="False"

HorizontalAlignment="Right"

Width="120"

Margin="20,5,8,5"

Source="{Binding LOGO_PATH}"

Stretch="Fill">

<!--<Image.OpacityMask>

<LinearGradientBrush StartPoint="0.08,0.5"

EndPoint="0.92,0.5">

<GradientStop Color="#00000000" />

<GradientStop Color="#00FFFFFF"

Offset="1" />

<GradientStop Color="#FF404040"

Offset="0.3" />

<GradientStop Color="#FFC1C1C1"

Offset="0.7" />

</LinearGradientBrush>

</Image.OpacityMask>-->

</Image>

</Grid>

</DataTemplate>

<SolidColorBrush x:Key="TileView_Background"

Color="#FFFFFFFF" />

<SolidColorBrush x:Key="TileView_OuterBorder"

Color="#FF848484" />

<CornerRadius x:Key="TileView_OuterBorder_CornerRadius">2</CornerRadius>

<SolidColorBrush x:Key="TileView_InneBorder"

Color="#FFFFFFFF" />

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

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

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

<SolidColorBrush x:Key="TileView_HeaderBorder"

Color="#FFFFFFFF" />

<Thickness x:Key="TileView_HeaderBorder_Thickness">0 0 0 1</Thickness>

<LinearGradientBrush x:Key="TileView_HeaderBackground"

EndPoint="0.5,1"

StartPoint="0.5,0">

<GradientStop Color="#FFF6F6F6" />

<GradientStop Color="#FFD2D2D2"

Offset="1" />

</LinearGradientBrush>

<LinearGradientBrush x:Key="TileView_ButtonBackground_MouseOver"

EndPoint="0.5,1"

StartPoint="0.5,0">

<GradientStop Color="#FFFEEDB7"

Offset="0" />

<GradientStop Color="#FFFACA6A"

Offset="1" />

<GradientStop Color="#FFFFC94A"

Offset="0.526" />

<GradientStop Color="#FFFEEDB7"

Offset="0.509" />

</LinearGradientBrush>

<LinearGradientBrush x:Key="TileView_ButtonBackground_Pressed"

EndPoint="0.5,1"

StartPoint="0.5,0">

<GradientStop Color="#FFFECE95"

Offset="0" />

<GradientStop Color="#FFFEB407"

Offset="1" />

<GradientStop Color="#FFFEBB6E"

Offset="0.517" />

<GradientStop Color="#FFE78318"

Offset="0.539" />

</LinearGradientBrush>

<LinearGradientBrush x:Key="TileView_ButtonBackground"

EndPoint="0.5,1"

StartPoint="0.5,0">

<GradientStop Color="#FF282828" />

<GradientStop Color="#FF7C7C7C"

Offset="1" />

</LinearGradientBrush>

<SolidColorBrush x:Key="TileView_ButtonOuterBorder"

Color="#FFFFFFFF" />

<LinearGradientBrush x:Key="TileView_HeaderBorder_HorizontalSplitterOpacityMask"

EndPoint="0.5,1"

StartPoint="0.5,0">

<GradientStop Color="Black"

Offset="0" />

<GradientStop Offset="1" />

</LinearGradientBrush>

<SolidColorBrush x:Key="TileView_HeaderBorder_HorizontalSplitterBackground"

Color="#FFBFBFBF" />

<SolidColorBrush x:Key="DisabledBrush"

Color="#99FFFFFF"></SolidColorBrush>

<Style x:Key="maximizeToggleStyle"

TargetType="telerik:RadToggleButton">

<Setter Property="VerticalAlignment"

Value="Center" />

<Setter Property="HorizontalAlignment"

Value="Right" />

<Setter Property="Width"

Value="17" />

<Setter Property="Height"

Value="17" />

<Setter Property="Template">

<Setter.Value>

<ControlTemplate TargetType="telerik:RadToggleButton">

<Grid>

<VisualStateManager.VisualStateGroups>

<VisualStateGroup x:Name="FocusStates">

<VisualState x:Name="Focused" />

<VisualState x:Name="Unfocused" />

</VisualStateGroup>

<VisualStateGroup x:Name="CommonStates">

<VisualState x:Name="Disabled" />

<VisualState x:Name="Normal" />

<VisualState x:Name="MouseOver">

<Storyboard>

<ObjectAnimationUsingKeyFrames Storyboard.TargetName="RestoreIcon"

Storyboard.TargetProperty="Fill">

<DiscreteObjectKeyFrame KeyTime="0"

Value="{StaticResource TileView_ButtonBackground_MouseOver}" />

</ObjectAnimationUsingKeyFrames>

<ObjectAnimationUsingKeyFrames Storyboard.TargetName="CollapseIcon"

Storyboard.TargetProperty="Fill">

<DiscreteObjectKeyFrame KeyTime="0"

Value="{StaticResource TileView_ButtonBackground_MouseOver}" />

</ObjectAnimationUsingKeyFrames>

</Storyboard>

</VisualState>

<VisualState x:Name="Pressed">

<Storyboard>

<ObjectAnimationUsingKeyFrames Storyboard.TargetName="RestoreIcon"

Storyboard.TargetProperty="Fill">

<DiscreteObjectKeyFrame KeyTime="0"

Value="{StaticResource TileView_ButtonBackground_Pressed}" />

</ObjectAnimationUsingKeyFrames>

<ObjectAnimationUsingKeyFrames Storyboard.TargetName="CollapseIcon"

Storyboard.TargetProperty="Fill">

<DiscreteObjectKeyFrame KeyTime="0"

Value="{StaticResource TileView_ButtonBackground_Pressed}" />

</ObjectAnimationUsingKeyFrames>

</Storyboard>

</VisualState>

</VisualStateGroup>

<VisualStateGroup x:Name="CheckStates">

<VisualState x:Name="Checked">

<Storyboard>

<ObjectAnimationUsingKeyFrames Storyboard.TargetName="Restore"

Storyboard.TargetProperty="Visibility">

<DiscreteObjectKeyFrame KeyTime="0">

<DiscreteObjectKeyFrame.Value>

<Visibility>Collapsed</Visibility>

</DiscreteObjectKeyFrame.Value>

</DiscreteObjectKeyFrame>

</ObjectAnimationUsingKeyFrames>

<ObjectAnimationUsingKeyFrames Storyboard.TargetName="Collapse"

Storyboard.TargetProperty="Visibility">

<DiscreteObjectKeyFrame KeyTime="0">

<DiscreteObjectKeyFrame.Value>

<Visibility>Visible</Visibility>

</DiscreteObjectKeyFrame.Value>

</DiscreteObjectKeyFrame>

</ObjectAnimationUsingKeyFrames>

</Storyboard>

</VisualState>

<VisualState x:Name="Unchecked">

<Storyboard>

<ObjectAnimationUsingKeyFrames Storyboard.TargetName="Restore"

Storyboard.TargetProperty="Visibility">

<DiscreteObjectKeyFrame KeyTime="0">

<DiscreteObjectKeyFrame.Value>

<Visibility>Visible</Visibility>

</DiscreteObjectKeyFrame.Value>

</DiscreteObjectKeyFrame>

</ObjectAnimationUsingKeyFrames>

<ObjectAnimationUsingKeyFrames Storyboard.TargetName="Collapse"

Storyboard.TargetProperty="Visibility">

<DiscreteObjectKeyFrame KeyTime="0">

<DiscreteObjectKeyFrame.Value>

<Visibility>Collapsed</Visibility>

</DiscreteObjectKeyFrame.Value>

</DiscreteObjectKeyFrame>

</ObjectAnimationUsingKeyFrames>

</Storyboard>

</VisualState>

<VisualState x:Name="Indeterminate" />

</VisualStateGroup>

</VisualStateManager.VisualStateGroups>

<Grid Width="13"

Height="13"

x:Name="Restore"

Background="Transparent">

<ToolTipService.ToolTip>

<ToolTip telerik:LocalizationManager.ResourceKey="TileViewItemMaximizeText" />

</ToolTipService.ToolTip>

<Path x:Name="RestoreIcon"

Fill="{StaticResource TileView_ButtonBackground}"

Stretch="Fill"

Stroke="{x:Null}"

Margin="1"

Data=

"M2,5 L2,8.9999999 6,8.9999999 6,5 z M0,3 L8,3 8,5 8,8.9999999 8,11 0,11 0,8.9999999 0,5 z M3,0 L11,0 11,2 11,8.9999999 9,8.9999999 9,2 3,2 z"

StrokeThickness="0.5" />

<Path Fill="{StaticResource TileView_ButtonOuterBorder}"

Stretch="Fill"

Stroke="{x:Null}"

StrokeThickness="0.5"

Data=

"M1,12 L9,12 9,13 1,13 z M3.9999999,7 L3.9999999,9 6,9 6,7 z M3,6 L7,6 7,7 7,9 7,10 3,10 3,9 3,7 z M0,4 L1,4 1,12 0,12 z M12,1 L13,1 13,10 12,10 z M3,1 L3.9999999,1 3.9999999,3 10,3 10,4 10,10 12,10 12,11 10,11 10,12 9,12 9,4 1,4 1,3 3,3 z M3.9999999,0 L12,0 12,1 3.9999999,1 z"

/>

</Grid>

<Grid Width="12"

Height="5"

x:Name="Collapse"

Visibility="Collapsed"

Background="Transparent">

<ToolTipService.ToolTip>

<ToolTip telerik:LocalizationManager.ResourceKey="TileViewItemMinimizeText" />

</ToolTipService.ToolTip>

<Rectangle Stroke="{x:Null}"

StrokeThickness="0.5"

Fill="{StaticResource TileView_ButtonOuterBorder}" />

<Rectangle x:Name="CollapseIcon"

Fill="{StaticResource TileView_ButtonBackground}"

Stroke="{x:Null}"

StrokeThickness="0.5"

Margin="1" />

</Grid>

</ControlTemplate>

</Setter.Value>

</Setter>

</Style>

<Style x:Key="PortalTileViewItemStyle"

TargetType="telerik:RadTileViewItem">

<Setter Property="TileState"

Value="Restored" />

<Setter Property="Template">

<Setter.Value>

<ControlTemplate TargetType="telerik:RadTileViewItem">

<Grid>

<VisualStateManager.VisualStateGroups>

<VisualStateGroup x:Name="CommonStates">

<VisualState x:Name="Normal" />

<VisualState x:Name="Disabled">

<Storyboard>

<ObjectAnimationUsingKeyFrames Storyboard.TargetName="DisabledVisual"

Storyboard.TargetProperty="Visibility"

Duration="0">

<DiscreteObjectKeyFrame KeyTime="0"

Value="Visible" />

</ObjectAnimationUsingKeyFrames>

</Storyboard>

</VisualState>

<VisualState x:Name="MouseOver" />

</VisualStateGroup>

</VisualStateManager.VisualStateGroups>

<Border CornerRadius="{StaticResource TileView_OuterBorder_CornerRadius}"

Margin="{TemplateBinding Padding}"

Background="{TemplateBinding Background}"

BorderBrush="{TemplateBinding BorderBrush}"

BorderThickness="{TemplateBinding BorderThickness}">

<Border BorderBrush="{StaticResource TileView_InneBorder}"

CornerRadius="{StaticResource TileView_InneBorder_CornerRadius}"

BorderThickness="{StaticResource TileView_InneBorder_Thickness}">

<Grid>

<Grid.RowDefinitions>

<RowDefinition Height="Auto" />

<RowDefinition Height="*" />

</Grid.RowDefinitions>

<ContentPresenter x:Name="ContentElement"

Grid.Row="1"

Content="{TemplateBinding Content}"

ContentTemplate="{TemplateBinding ContentTemplate}"

HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"

VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />

<Grid x:Name="ContentCacheHost"

Grid.Row="1" />

<!--

Element named PART_GripBar for

handling the dragging of the panel

-->

<Grid>

<Border CornerRadius="{StaticResource TileView_HeaderBorder_CornerRadius}"

Padding="10 0 7 0"

BorderBrush="{StaticResource TileView_HeaderBorder}"

BorderThickness="{StaticResource TileView_HeaderBorder_Thickness}"

Background="{TemplateBinding BorderBrush}">

<Grid MinHeight="28">

<Grid.ColumnDefinitions>

<ColumnDefinition Width="*" />

<ColumnDefinition Width="Auto" />

</Grid.ColumnDefinitions>

<Border x:Name="GripBarElement"

Background="Transparent">

<ContentPresenter x:Name="HeaderElement"

VerticalAlignment="Center"

Margin="0,0,10,0"

ContentTemplate="{TemplateBinding HeaderTemplate}" />

</Border>

<telerik:RadToggleButton x:Name="MaximizeToggleButton"

Command="tileView:TileViewCommands.ToggleTileState"

Style="{StaticResource maximizeToggleStyle}" />

</Grid>

</Border>

</Grid>

<Rectangle x:Name="DisabledVisual"

Grid.RowSpan="2"

RadiusX="4"

RadiusY="4"

Fill="#99FFFFFF"

Visibility="Collapsed" />

</Grid>

</Border>

</Grid>

</ControlTemplate>

</Setter.Value>

</Setter>

</Style>

</UserControl.Resources>

<Grid x:Name="LayoutRoot">

<telerik:RadTileView MinimizedColumnWidth="165">

<telerik:RadTileViewItem x:Name="StrataMapTileView"

Style="{StaticResource PortalTileViewItemStyle}">

<telerik:RadTileViewItem.HeaderTemplate>

<DataTemplate>

<TextBlock Text="Map"

FontWeight="Bold" />

</DataTemplate>

</telerik:RadTileViewItem.HeaderTemplate>

<ScrollViewer x:Name="StrataMapContentScorllViewer"

BorderBrush="Transparent"

Margin="2"

HorizontalScrollBarVisibility="Auto"

VerticalScrollBarVisibility="Auto">

</ScrollViewer>

</telerik:RadTileViewItem>

<telerik:RadTileViewItem x:Name="StatusStatisticTileView"

Style="{StaticResource PortalTileViewItemStyle}">

<telerik:RadTileViewItem.HeaderTemplate>

<DataTemplate>

<TextBlock Text="Statistic"

FontWeight="Bold" />

</DataTemplate>

</telerik:RadTileViewItem.HeaderTemplate>

<ScrollViewer x:Name="StatusStatisticContentScorllViewer"

BorderBrush="Transparent"

Margin="2"

HorizontalScrollBarVisibility="Disabled"

VerticalScrollBarVisibility="Auto">

</ScrollViewer>

</telerik:RadTileViewItem>

<telerik:RadTileViewItem x:Name="ScoreCardStatusTileView"

BorderBrush="Green"

Style="{StaticResource PortalTileViewItemStyle}"

Header="ScoreCard"

HeaderTemplate="{StaticResource PortalScoreCardStatusHeaderTemplate}">

<Grid>

<Grid.RowDefinitions>

<RowDefinition Height="30" />

<RowDefinition />

</Grid.RowDefinitions>

</Grid>

</telerik:RadTileViewItem>

<telerik:RadTileViewItem x:Name="EmployeeScoreCardTileView"

BorderBrush="BlanchedAlmond"

Style="{StaticResource PortalTileViewItemStyle}"

Header="Employee"

HeaderTemplate="{StaticResource PortalScoreCardStatusHeaderTemplate}">

<Grid>

<Grid.RowDefinitions>

<RowDefinition Height="30" />

<RowDefinition />

</Grid.RowDefinitions>

</Grid>

</telerik:RadTileViewItem>

</telerik:RadTileView>

</Grid>

</UserControl>

Accepted

answered on 24 May 2011, 11:45 AM

SilverlightApplication1.zip

Hello Kelley Wong,
You are missing two VisualStateGroups in the RadTileViewItem template:

<VisualStateGroup x:Name="TileStates">

<VisualState x:Name="Maximized">

<Storyboard>

<ObjectAnimationUsingKeyFrames Duration="0"

Storyboard.TargetName="MaximizeToggleButton"

Storyboard.TargetProperty="IsChecked">

<DiscreteObjectKeyFrame KeyTime="0">

<DiscreteObjectKeyFrame.Value>

<sys:Boolean>True</sys:Boolean>

</DiscreteObjectKeyFrame.Value>

</DiscreteObjectKeyFrame>

</ObjectAnimationUsingKeyFrames>

</Storyboard>

</VisualState>

<VisualState x:Name="Restored">

<Storyboard>

<ObjectAnimationUsingKeyFrames Duration="0"

Storyboard.TargetName="MaximizeToggleButton"

Storyboard.TargetProperty="IsChecked">

<DiscreteObjectKeyFrame KeyTime="0">

<DiscreteObjectKeyFrame.Value>

<sys:Boolean>False</sys:Boolean>

</DiscreteObjectKeyFrame.Value>

</DiscreteObjectKeyFrame>

</ObjectAnimationUsingKeyFrames>

</Storyboard>

</VisualState>

</VisualStateGroup>

<VisualStateGroup x:Name="SelectionStates">

<VisualState x:Name="Selected">

<Storyboard>

<ObjectAnimationUsingKeyFrames Duration="0"

Storyboard.TargetName="SelectedItem"

Storyboard.TargetProperty="Visibility">

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

</ObjectAnimationUsingKeyFrames>

</Storyboard>

</VisualState>

<VisualState x:Name="Unselected" />

</VisualStateGroup>

That's why the toggle button was not acting correctly. You should also add the tileView and system namespaces:

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

xmlns:sys="clr-namespace:System;assembly=mscorlib"

For further refferences please examine the attached project and if you have more questions feel free to ask.

Kind regards,
Zarko
the Telerik team

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Extended Reality

Free Tools

Support and Learning

Productivity and Design Tools

Custom the HeaderTemplate and the Max/Min Button is not working fine

4 Answers, 1 is accepted