
Kelley Wong
Top achievements
Rank 1
Kelley Wong
asked on 11 May 2011, 03:46 AM
I Custom the HeaderTemplate,the max/min BUTTON is not working fine
when u click the button ,it works fine
but when u double-click the header,the button has not changed
when u click the button ,it works fine
but when u double-click the header,the button has not changed
4 Answers, 1 is accepted
0
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
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
0

Kelley Wong
Top achievements
Rank 1
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: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 />
<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>
</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>
</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 with white background -->
<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>
<!-- Content presenter
for
hosting the content -->
<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"
>
<!--IsHitTestVisible=
"{TemplateBinding DraggingEnabled}"
-->
<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>
</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>
0
Accepted
Hello Kelley Wong,
You are missing two VisualStateGroups in the RadTileViewItem template:
That's why the toggle button was not acting correctly. You should also add the tileView and system namespaces:
For further refferences please examine the attached project and if you have more questions feel free to ask.
Kind regards,
Zarko
the Telerik team
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
>
xmlns:tileView="clr-namespace:Telerik.Windows.Controls.TileView;assembly=Telerik.Windows.Controls.Navigation"
xmlns:sys="clr-namespace:System;assembly=mscorlib"
Kind regards,
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
0

Kelley Wong
Top achievements
Rank 1
answered on 25 May 2011, 06:56 AM
Thanks!
i missed sth!
i missed sth!