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

Clicking "Maximize" icon in RadTileViewItem header does nothing.

1 Answer 134 Views

TileView

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

Deepak asked on 20 Aug 2014, 08:32 AM

Hello,

I am trying to customize my RadTileViewItem header using one of your ResourceDictionary, I downloaded from one of your examples in the forums. It worked nicely and I am able to change the color and effects in the header.

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

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

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

<SolidColorBrush x:Key="TileView_Background" Color="#FFFFFFFF"/>

<SolidColorBrush x:Key="TileView_OuterBorder" Color="#FF848484"/>

<SolidColorBrush x:Key="TileView_InneBorder" Color="#FFFFFFFF"/>

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

<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="#78C3B8"/>

<GradientStop Color="#96C4BE" Offset="1"/>

</LinearGradientBrush>

<LinearGradientBrush x:Key="TileView_ButtonBackground" EndPoint="0.5,1" StartPoint="0.5,0">

<GradientStop Color="#000000"/>

<GradientStop Color="#000000" Offset="1"/>

</LinearGradientBrush>

<SolidColorBrush x:Key="TileView_ButtonOuterBorder" Color="White"/>

<LinearGradientBrush x:Key="TileView_ButtonBackground_MouseOver" EndPoint="0.5,1" StartPoint="0.5,0">

<GradientStop Color="#78C3B8" Offset="0"/>

<GradientStop Color="#78C3B8" Offset="1"/>

<GradientStop Color="#96C4BE" Offset="0.526"/>

<GradientStop Color="#96C4BE" 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>

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

<SolidColorBrush x:Key="TileView_HeaderBorder_HorizontalSplitterBackground" Color="#47B5A3"/>

<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="DisabledBrush" Color="#99FFFFFF"/>

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

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

<Style TargetType="telerik:RadTileViewItem">

<Setter Property="HorizontalContentAlignment" Value="Stretch"/>

<Setter Property="VerticalContentAlignment" Value="Stretch"/>

<Setter Property="Background" Value="{StaticResource TileView_Background}"/>

<Setter Property="BorderBrush" Value="{StaticResource TileView_OuterBorder}"/>

<Setter Property="BorderThickness" Value="1"/>

<Setter Property="Padding" Value="7"/>

<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 Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="DisabledVisual">

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

</ObjectAnimationUsingKeyFrames>

</Storyboard>

</VisualState>

<VisualState x:Name="MouseOver"/>

</VisualStateGroup>

</VisualStateManager.VisualStateGroups>

<Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" CornerRadius="{StaticResource TileView_OuterBorder_CornerRadius}" Margin="{TemplateBinding Padding}">

<Border BorderBrush="{StaticResource TileView_InneBorder}" BorderThickness="{StaticResource TileView_InneBorder_Thickness}" CornerRadius="{StaticResource TileView_InneBorder_CornerRadius}">

<Grid>

<Grid.RowDefinitions>

<RowDefinition Height="Auto"/>

<RowDefinition Height="*"/>

</Grid.RowDefinitions>

<ContentPresenter x:Name="ContentElement" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Grid.Row="1" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>

<Grid x:Name="ContentCacheHost" Grid.Row="1"/>

<StackPanel>

<Border BorderBrush="{StaticResource TileView_HeaderBorder}" BorderThickness="{StaticResource TileView_HeaderBorder_Thickness}" CornerRadius="{StaticResource TileView_HeaderBorder_CornerRadius}" Padding="10 0 7 0">

<Border.Background>

<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">

<GradientStop Color="#69AEA4"/>

<GradientStop Color="#96C4BE" Offset="1"/>

</LinearGradientBrush>

</Border.Background>

<Grid MinHeight="28">

<Border x:Name="GripBarElement" Background="Transparent">

<ContentPresenter x:Name="HeaderElement" ContentTemplate="{TemplateBinding HeaderTemplate}" HorizontalAlignment="Left" Margin="0,0,10,0" VerticalAlignment="Center"/>

</Border>

<ToggleButton x:Name="MaximizeToggleButton" HorizontalAlignment="Right" Height="17" VerticalAlignment="Center" Width="17">

<ToggleButton.Template>

<ControlTemplate TargetType="ToggleButton">

<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.TargetProperty="Fill" Storyboard.TargetName="RestoreIcon">

<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource TileView_ButtonBackground_MouseOver}"/>

</ObjectAnimationUsingKeyFrames>

<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="CollapseIcon">

<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource TileView_ButtonBackground_MouseOver}"/>

</ObjectAnimationUsingKeyFrames>

</Storyboard>

</VisualState>

<VisualState x:Name="Pressed">

<Storyboard>

<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="RestoreIcon">

<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource TileView_ButtonBackground_Pressed}"/>

</ObjectAnimationUsingKeyFrames>

<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="CollapseIcon">

<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource TileView_ButtonBackground_Pressed}"/>

</ObjectAnimationUsingKeyFrames>

</Storyboard>

</VisualState>

</VisualStateGroup>

<VisualStateGroup x:Name="CheckStates">

<VisualState x:Name="Checked">

<Storyboard>

<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="Restore">

<DiscreteObjectKeyFrame KeyTime="0">

<DiscreteObjectKeyFrame.Value>

<Visibility>Collapsed</Visibility>

</DiscreteObjectKeyFrame.Value>

</DiscreteObjectKeyFrame>

</ObjectAnimationUsingKeyFrames>

<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="Collapse">

<DiscreteObjectKeyFrame KeyTime="0">

<DiscreteObjectKeyFrame.Value>

<Visibility>Visible</Visibility>

</DiscreteObjectKeyFrame.Value>

</DiscreteObjectKeyFrame>

</ObjectAnimationUsingKeyFrames>

</Storyboard>

</VisualState>

<VisualState x:Name="Unchecked">

<Storyboard>

<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="Restore">

<DiscreteObjectKeyFrame KeyTime="0">

<DiscreteObjectKeyFrame.Value>

<Visibility>Visible</Visibility>

</DiscreteObjectKeyFrame.Value>

</DiscreteObjectKeyFrame>

</ObjectAnimationUsingKeyFrames>

<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="Collapse">

<DiscreteObjectKeyFrame KeyTime="0">

<DiscreteObjectKeyFrame.Value>

<Visibility>Collapsed</Visibility>

</DiscreteObjectKeyFrame.Value>

</DiscreteObjectKeyFrame>

</ObjectAnimationUsingKeyFrames>

</Storyboard>

</VisualState>

<VisualState x:Name="Indeterminate"/>

</VisualStateGroup>

</VisualStateManager.VisualStateGroups>

<Grid x:Name="Restore" Background="Transparent" Height="13" Width="13">

<ToolTipService.ToolTip>

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

</ToolTipService.ToolTip>

<Path x:Name="RestoreIcon" 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"

Fill="{StaticResource TileView_ButtonBackground}" Margin="1" Stretch="Fill" Stroke="{x:Null}" StrokeThickness="0.5"/>

<Path 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"

Fill="{StaticResource TileView_ButtonOuterBorder}" Stretch="Fill" Stroke="{x:Null}" StrokeThickness="0.5"/>

</Grid>

<Grid x:Name="Collapse" Background="Transparent" Height="5" Visibility="Collapsed" Width="12">

<ToolTipService.ToolTip>

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

</ToolTipService.ToolTip>

<Rectangle Fill="{StaticResource TileView_ButtonOuterBorder}" Stroke="{x:Null}" StrokeThickness="0.5"/>

<Rectangle x:Name="CollapseIcon" Fill="{StaticResource TileView_ButtonBackground}" Margin="1" Stroke="{x:Null}" StrokeThickness="0.5"/>

</Grid>

</ControlTemplate>

</ToggleButton.Template>

</ToggleButton>

</Grid>

</Border>

<Border x:Name="Splitter" BorderThickness="0" Background="{StaticResource TileView_HeaderBorder_HorizontalSplitterBackground}" Height="4" OpacityMask="{StaticResource TileView_HeaderBorder_HorizontalSplitterOpacityMask}"/>

</StackPanel>

<Rectangle x:Name="DisabledVisual" Fill="{StaticResource DisabledBrush}" RadiusY="4" RadiusX="4" Grid.RowSpan="2" Visibility="Collapsed"/>

</Grid>

</Border>

</Grid>

</ControlTemplate>

</Setter.Value>

</Setter>

</Style>

</ResourceDictionary>

But the issue is, on clicking the maximize button in header it does nothing except changing the icon to minimize. I was expecting it to actually maximize the item. I am guessing that I need to stick some code to make that happen but where to write that code is my confusion.

Can you please suggest anything,

Thanks,
Deepak

P.S: Apologies for sticking a long code but it doesn't allow me to attach a XAML/zip file.

1 Answer, 1 is accepted

answered on 22 Aug 2014, 03:50 PM

Hello Deepak,

Please make sure that you keep the Command property of the Maximize ToggleButton when copy-paste the default control template as it does the logic for maximization of TileView Items in code:

<telerik:RadToggleButton x:Name="MaximizeToggleButton"

HorizontalAlignment="Right"

VerticalAlignment="Center"

Style="{StaticResource maximizeToggleStyle}"

Command="{x:Static Telerik_Windows_Controls_TileView:TileViewCommands.ToggleTileState}"/>

The same is applicable if you customize the Minimize Button as well, just the Command x:Static property is different (you may see the original one under the control template that we ship).

Regards,
Evgenia
Telerik

Check out Telerik Analytics, the service which allows developers to discover app usage patterns, analyze user data, log exceptions, solve problems and profile application performance at run time. Watch the videos and start improving your app based on facts, not hunches.