Telerik Forums / UI for Silverlight
This is a migrated thread and some comments may be shown as answers.

TileView Refresh/Min/max button

8 Answers 124 Views
TileView
This is a migrated thread and some comments may be shown as answers.
Aditya
Top achievements
Rank 1
Aditya asked on 17 Jun 2011, 02:02 PM
Untitled.png
Hi,
  I want Refresh ,minimize ,Maximize button in tilewiew control  so this button may be Images also So How i can put that....

I attach image also.

Please someone  give the idea abt that.

8 Answers, 1 is accepted

Sort by
0
Trude
Top achievements
Rank 2
answered on 18 Jun 2011, 12:00 AM
0
Aditya
Top achievements
Rank 1
answered on 13 Jul 2011, 09:50 AM
sorry friend please see the image I need that type only.
0
Zarko
Telerik team
answered on 18 Jul 2011, 11:10 AM
SilverlightApplication1.zip
Hi Aditya,
As Jorn said you'll have to edit the default control template and add some buttons. I've attached a sample project with an edited template so could you please examine it and if you have more questions feel free to ask.

All the best,
Zarko
the Telerik team

Register for the Q2 2011 What's New Webinar Week. Mark your calendar for the week starting July 18th and book your seat for a walk through of all the exciting stuff we will ship with the new release!

0
Laxman
Top achievements
Rank 1
answered on 28 Jul 2011, 10:59 AM
Hi Friends,
I have two pages
1) UserControl.xaml
2) ContentControl.xaml.


My UserControl.xaml page haveing TileView only.
and
ContentControl.xaml. page  contains TileViewItem ie. Silverlight childcontrol

I am Calling ContentControl.xaml page by creating object from user UserControl page


Now, I want Refresh,Min/Max,Close button to tile view 

I am creating Resourece,style also in design time it show style is applied but runtime it is not working

Whats wrong in code?  

Plz Can u help me.

My Code is ...

<

 

 

UserControl x:Class="HISUserDashboard.UserDashboard"

 

 

 

 

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:telerikTheme="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls"

 

 

 

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

 

 

 

 

mc:Ignorable="d"

 

 

 

d:DesignHeight="300" d:DesignWidth="400" xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk">

 

 

 

 

 

<Grid x:Name="LayoutRoot" Background="White" >

 

 

 

 

 


<telerik:RadTileView x:Name="radTileView" ScrollBarVisibility="Auto" MinimizedItemsPosition="Right" MinimizedColumnWidth="250" BorderBrush="LightBlue" Width="Auto" >

 

 

 

 

 

</telerik:RadTileView>

 

 

 

 

 

</Grid>

 

</

 

 

UserControl>

 


Code on  ContentControl.xaml  is

<

 

 

telerik:RadTileViewItem xmlns:toolkit="http://schemas.microsoft.com/winfx/2006/xaml/presentation/toolkit" x:Class="HISUserDashboard.ContentCtrlView"

 

 

 

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:System="clr-namespace:System;assembly=mscorlib"

 

 

 

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

 

 

 

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

 

 

 

xmlns:controlsToolkit="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Toolkit"

 

 

 

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

 

 

 

xmlns:chartingToolkit="clr-namespace:System.Windows.Controls.DataVisualization.Charting;assembly=System.Windows.Controls.DataVisualization.Toolkit"

 

 

 

mc:Ignorable="d"

 

 

 

xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"

 

 

 

xmlns:xsd="http://www.w3.org/2001/XMLSchema"

 

 

 

xmlns:telerikTheme="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls"

 

 

 

d:DesignHeight="300" d:DesignWidth="400" xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk">

 

 

 

 

<telerik:RadTileViewItem.Resources>

 

 

 

 

<DataTemplate x:Key="DashletViewTemplate">

 

 

 

 

<Grid>

 

 

 

 

<Grid Style="{StaticResource ContentContainerGridStyle}" />

 

 

 

 

</Grid>

 

 

 

 

</DataTemplate>

 

 

 

 

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

 

 

 

 

<GradientStop Color="White" />

 

 

 

 

<GradientStop Offset="2" Color="#FF4A6AA7" />

 

 

 

 

</LinearGradientBrush>

 

 

 

 

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

 

 

 

 

<GradientStop Color="White" />

 

 

 

 

<GradientStop Offset="1.5" Color="#FF4A6AA7" />

 

 

 

 

</LinearGradientBrush>

 

 

 

 

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

 

 

 

 

<GradientStop Color="White" />

 

 

 

 

<GradientStop Offset="2" Color="#FF4A6AA7" />

 

 

 

 

</LinearGradientBrush>

 

 

 

 

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

 

 

 

 

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

 

 

 

 

<!-- brushes which we used in the style of the button -->

 

 

 

 

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

 

 

 

 

<GradientStop Offset="0.004" Color="#FF1E395B" />

 

 

 

 

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

 

 

 

 

</LinearGradientBrush>

 

 

 

 

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

 

 

 

 

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

 

 

 

 

<GradientStop Offset="0" Color="#FFFEEDB7" />

 

 

 

 

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

 

 

 

 

<GradientStop Offset="0.526" Color="#FFFFC94A" />

 

 

 

 

<GradientStop Offset="0.509" Color="#FFFEEDB7" />

 

 

 

 

</LinearGradientBrush>

 

 

 

 

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

 

 

 

 

<GradientStop Offset="0" Color="#FFFECE95" />

 

 

 

 

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

 

 

 

 

<GradientStop Offset="0.517" Color="#FFFEBB6E" />

 

 

 

 

<GradientStop Offset="0.539" Color="#FFE78318" />

 

 

 

 

</LinearGradientBrush>

 

 

 

 

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

 

 

 

 

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

 

 

 

 

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

 

 

 

 

<GradientStop Offset="0" Color="Black" />

 

 

 

 

<GradientStop Offset="1" />

 

 

 

 

</LinearGradientBrush>

 

 

 

 

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

 

 

 

 

<SolidColorBrush x:Key="DisabledBrush" Color="#99FFFFFF" />

 

 

 

 

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

 

 

 

 

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

 

 

 

 

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

 

 

 

 

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

 

 

 

 

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

 

 

 

 

<SolidColorBrush x:Key="TileView_OuterBorder_Focused" Color="#FF83A5D2" />

 

 

 

 

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

 

 

 

 

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

 

 

 

 

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

 

 

 

 

<Thickness x:Key="TileView_InneBorder_Thickness_Focused">2</Thickness>

 

 

 

 

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

 

 

 

 

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

 

 

 

 

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

 

 

 

 

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

 

 

 

 

<GradientStop Offset="0" Color="#FFFEEDB7" />

 

 

 

 

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

 

 

 

 

<GradientStop Offset="0.526" Color="#FFFFC94A" />

 

 

 

 

<GradientStop Offset="0.509" Color="#FFFEEDB7" />

 

 

 

 

</LinearGradientBrush>

 

 

 

 

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

 

 

 

 

<GradientStop Offset="0" Color="#FFFECE95" />

 

 

 

 

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

 

 

 

 

<GradientStop Offset="0.517" Color="#FFFEBB6E" />

 

 

 

 

<GradientStop Offset="0.539" Color="#FFE78318" />

 

 

 

 

</LinearGradientBrush>

 

 

 

 

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

 

 

 

 

<GradientStop Offset="0" Color="#FF3C6AA3" />

 

 

 

 

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

 

 

 

 

</LinearGradientBrush>

 

 

 

 

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

 

 

 

 

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

 

 

 

 

<GradientStop Offset="0" Color="Black" />

 

 

 

 

<GradientStop Offset="1" />

 

 

 

 

</LinearGradientBrush>

 

 

 

 

<SolidColorBrush x:Key="TileView_HeaderBorder_HorizontalSplitterBackground_Focused" Color="#FF9BB4D4" />

 

 

 

 

<!-- Button style -->

 

 

 

 

<!-- Refresh button style -->

 

 

 

 

<Style x:Key="Refresh_ButtonStyle" TargetType="Button">

 

 

 

 

<Setter Property="Background" Value="Transparent" />

 

 

 

 

<Setter Property="Foreground" Value="#FF000000" />

 

 

 

 

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

 

 

 

 

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

 

 

 

 

<Setter Property="BorderBrush" Value="Transparent" />

 

 

 

 

<Setter Property="Template">

 

 

 

 

<Setter.Value>

 

 

 

 

<ControlTemplate TargetType="Button">

 

 

 

 

<Grid>

 

 

 

 

<VisualStateManager.VisualStateGroups>

 

 

 

 

<VisualStateGroup x:Name="CommonStates">

 

 

 

 

<VisualState x:Name="Normal" />

 

 

 

 

<VisualState x:Name="MouseOver">

 

 

 

 

<Storyboard>

 

 

 

 

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

 

 

 

 

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

 

 

 

 

</ObjectAnimationUsingKeyFrames>

 

 

 

 

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

 

 

 

 

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

 

 

 

 

</ObjectAnimationUsingKeyFrames>

 

 

 

 

</Storyboard>

 

 

 

 

</VisualState>

 

 

 

 

<VisualState x:Name="Pressed">

 

 

 

 

<Storyboard>

 

 

 

 

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

 

 

 

 

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

 

 

 

 

</ObjectAnimationUsingKeyFrames>

 

 

 

 

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

 

 

 

 

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

 

 

 

 

</ObjectAnimationUsingKeyFrames>

 

 

 

 

</Storyboard>

 

 

 

 

</VisualState>

 

 

 

 

<VisualState x:Name="Disabled">

 

 

 

 

<Storyboard>

 

 

 

 

<DoubleAnimationUsingKeyFrames Storyboard.TargetName="DisabledVisualElement" Storyboard.TargetProperty="Opacity">

 

 

 

 

<SplineDoubleKeyFrame KeyTime="0" Value=".55" />

 

 

 

 

</DoubleAnimationUsingKeyFrames>

 

 

 

 

</Storyboard>

 

 

 

 

</VisualState>

 

 

 

 

</VisualStateGroup>

 

 

 

 

<VisualStateGroup x:Name="FocusStates">

 

 

 

 

<VisualState x:Name="Focused">

 

 

 

 

<Storyboard>

 

 

 

 

<DoubleAnimationUsingKeyFrames Storyboard.TargetName="FocusVisualElement" Storyboard.TargetProperty="Opacity">

 

 

 

 

<SplineDoubleKeyFrame KeyTime="0" Value="1" />

 

 

 

 

</DoubleAnimationUsingKeyFrames>

 

 

 

 

</Storyboard>

 

 

 

 

</VisualState>

 

 

 

 

<VisualState x:Name="Unfocused" />

 

 

 

 

</VisualStateGroup>

 

 

 

 

</VisualStateManager.VisualStateGroups>

 

 

 

 

<Border x:Name="Background"

 

 

 

Background="{TemplateBinding Background}"

 

 

 

BorderBrush="{TemplateBinding BorderBrush}"

 

 

 

BorderThickness="{TemplateBinding BorderThickness}"

 

 

 

CornerRadius="3" />

 

 

 

 

<Path x:Name="Path"

 

 

 

Margin="0.5"

 

 

 

Data="M6.2500362,0.25 L9.7500362,0.25 L9.7500362,6.2500501 L15.75,6.2500501 L15.75,9.7500496 L9.7500362,9.7500496 L9.7500362,15.75 L6.2500362,15.75 L6.2500362,9.7500496 L0.25,9.7500496 L0.25,6.2500501 L6.2500362,6.2500501 z"

 

 

 

Fill="{StaticResource TileView_ButtonBackground}"

 

 

 

RenderTransformOrigin="0.500002264976501,0.5"

 

 

 

Stretch="Fill"

 

 

 

Stroke="{StaticResource TileView_ButtonOuterBorder}"

 

 

 

ToolTipService.ToolTip="Refresh"

 

 

 

UseLayoutRounding="False">

 

 

 

 

<Path.RenderTransform>

 

 

 

 

<TransformGroup>

 

 

 

 

<ScaleTransform />

 

 

 

 

<SkewTransform />

 

 

 

 

<RotateTransform Angle="90" />

 

 

 

 

<TranslateTransform />

 

 

 

 

</TransformGroup>

 

 

 

 

</Path.RenderTransform>

 

 

 

 

</Path>

 

 

 

 

<Path x:Name="Path2"

 

 

 

Margin="0.5"

 

 

 

Data="M6.2500362,0.25 L9.7500362,0.25 L9.7500362,6.2500501 L15.75,6.2500501 L15.75,9.7500496 L9.7500362,9.7500496 L9.7500362,15.75 L6.2500362,15.75 L6.2500362,9.7500496 L0.25,9.7500496 L0.25,6.2500501 L6.2500362,6.2500501 z"

 

 

 

Fill="{StaticResource TileView_ButtonBackground}"

 

 

 

Opacity=".5"

 

 

 

RenderTransformOrigin="0.500002264976501,0.5"

 

 

 

Stretch="Fill"

 

 

 

Stroke="{StaticResource TileView_ButtonOuterBorder}"

 

 

 

ToolTipService.ToolTip="Refresh"

 

 

 

UseLayoutRounding="False">

 

 

 

 

<Path.RenderTransform>

 

 

 

 

<TransformGroup>

 

 

 

 

<ScaleTransform />

 

 

 

 

<SkewTransform />

 

 

 

 

<RotateTransform Angle="45" />

 

 

 

 

<TranslateTransform />

 

 

 

 

</TransformGroup>

 

 

 

 

</Path.RenderTransform>

 

 

 

 

</Path>

 

 

 

 

<ContentPresenter x:Name="contentPresenter"

 

 

 

Margin="{TemplateBinding Padding}"

 

 

 

HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"

 

 

 

VerticalAlignment="{TemplateBinding VerticalContentAlignment}"

 

 

 

Content="{TemplateBinding Content}"

 

 

 

ContentTemplate="{TemplateBinding ContentTemplate}" />

 

 

 

 

<Rectangle x:Name="DisabledVisualElement"

 

 

 

Fill="#FFFFFFFF"

 

 

 

IsHitTestVisible="false"

 

 

 

Opacity="0"

 

 

 

RadiusX="3"

 

 

 

RadiusY="3" />

 

 

 

 

<Rectangle x:Name="FocusVisualElement"

 

 

 

Margin="1"

 

 

 

IsHitTestVisible="false"

 

 

 

Opacity="0"

 

 

 

RadiusX="2"

 

 

 

RadiusY="2"

 

 

 

Stroke="#00FFFFFF"

 

 

 

StrokeThickness="1" />

 

 

 

 

</Grid>

 

 

 

 

</ControlTemplate>

 

 

 

 

</Setter.Value>

 

 

 

 

</Setter>

 

 

 

 

</Style>

 

 

 

 

<!-- Close button style -->

 

 

 

 

<Style x:Key="Close_ButtonStyle" TargetType="Button">

 

 

 

 

<Setter Property="Background" Value="Transparent" />

 

 

 

 

<Setter Property="Foreground" Value="#FF000000" />

 

 

 

 

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

 

 

 

 

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

 

 

 

 

<Setter Property="BorderBrush" Value="Transparent" />

 

 

 

 

<Setter Property="Template">

 

 

 

 

<Setter.Value>

 

 

 

 

<ControlTemplate TargetType="Button">

 

 

 

 

<Grid>

 

 

 

 

<VisualStateManager.VisualStateGroups>

 

 

 

 

<VisualStateGroup x:Name="CommonStates">

 

 

 

 

<VisualState x:Name="Normal" />

 

 

 

 

<VisualState x:Name="MouseOver">

 

 

 

 

<Storyboard>

 

 

 

 

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

 

 

 

 

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

 

 

 

 

</ObjectAnimationUsingKeyFrames>

 

 

 

 

</Storyboard>

 

 

 

 

</VisualState>

 

 

 

 

<VisualState x:Name="Pressed">

 

 

 

 

<Storyboard>

 

 

 

 

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

 

 

 

 

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

 

 

 

 

</ObjectAnimationUsingKeyFrames>

 

 

 

 

</Storyboard>

 

 

 

 

</VisualState>

 

 

 

 

<VisualState x:Name="Disabled">

 

 

 

 

<Storyboard>

 

 

 

 

<DoubleAnimationUsingKeyFrames Storyboard.TargetName="DisabledVisualElement" Storyboard.TargetProperty="Opacity">

 

 

 

 

<SplineDoubleKeyFrame KeyTime="0" Value=".55" />

 

 

 

 

</DoubleAnimationUsingKeyFrames>

 

 

 

 

</Storyboard>

 

 

 

 

</VisualState>

 

 

 

 

</VisualStateGroup>

 

 

 

 

<VisualStateGroup x:Name="FocusStates">

 

 

 

 

<VisualState x:Name="Focused">

 

 

 

 

<Storyboard>

 

 

 

 

<DoubleAnimationUsingKeyFrames Storyboard.TargetName="FocusVisualElement" Storyboard.TargetProperty="Opacity">

 

 

 

 

<SplineDoubleKeyFrame KeyTime="0" Value="1" />

 

 

 

 

</DoubleAnimationUsingKeyFrames>

 

 

 

 

</Storyboard>

 

 

 

 

</VisualState>

 

 

 

 

<VisualState x:Name="Unfocused" />

 

 

 

 

</VisualStateGroup>

 

 

 

 

</VisualStateManager.VisualStateGroups>

 

 

 

 

<Border x:Name="Background"

 

 

 

Background="{TemplateBinding Background}"

 

 

 

BorderBrush="{TemplateBinding BorderBrush}"

 

 

 

BorderThickness="{TemplateBinding BorderThickness}"

 

 

 

CornerRadius="3" />

 

 

 

 

<Path x:Name="Path"

 

 

 

Margin="0.5"

 

 

 

Data="M6.2500362,0.25 L9.7500362,0.25 L9.7500362,6.2500501 L15.75,6.2500501 L15.75,9.7500496 L9.7500362,9.7500496 L9.7500362,15.75 L6.2500362,15.75 L6.2500362,9.7500496 L0.25,9.7500496 L0.25,6.2500501 L6.2500362,6.2500501 z"

 

 

 

Fill="{StaticResource TileView_ButtonBackground}"

 

 

 

RenderTransformOrigin="0.500002264976501,0.5"

 

 

 

Stretch="Fill"

 

 

 

Stroke="{StaticResource TileView_ButtonOuterBorder}"

 

 

 

ToolTipService.ToolTip="Close"

 

 

 

UseLayoutRounding="False">

 

 

 

 

<Path.RenderTransform>

 

 

 

 

<TransformGroup>

 

 

 

 

<ScaleTransform />

 

 

 

 

<SkewTransform />

 

 

 

 

<RotateTransform Angle="45" />

 

 

 

 

<TranslateTransform />

 

 

 

 

</TransformGroup>

 

 

 

 

</Path.RenderTransform>

 

 

 

 

</Path>

 

 

 

 

<ContentPresenter x:Name="contentPresenter"

 

 

 

Margin="{TemplateBinding Padding}"

 

 

 

HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"

 

 

 

VerticalAlignment="{TemplateBinding VerticalContentAlignment}"

 

 

 

Content="{TemplateBinding Content}"

 

 

 

ContentTemplate="{TemplateBinding ContentTemplate}" />

 

 

 

 

<Rectangle x:Name="DisabledVisualElement"

 

 

 

Fill="#FFFFFFFF"

 

 

 

IsHitTestVisible="false"

 

 

 

Opacity="0"

 

 

 

RadiusX="3"

 

 

 

RadiusY="3" />

 

 

 

 

<Rectangle x:Name="FocusVisualElement"

 

 

 

Margin="1"

 

 

 

IsHitTestVisible="false"

 

 

 

Opacity="0"

 

 

 

RadiusX="2"

 

 

 

RadiusY="2"

 

 

 

Stroke="#00FFFFFF"

 

 

 

StrokeThickness="1" />

 

 

 

 

</Grid>

 

 

 

 

</ControlTemplate>

 

 

 

 

</Setter.Value>

 

 

 

 

</Setter>

 

 

 

 

</Style>

 

 

 

 

<!-- RadToggleButton(Maximize/Minimize button) Style and Template -->

 

 

 

 

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

 

 

 

Width="13"

 

 

 

Height="13"

 

 

 

Background="Transparent">

 

 

 

 

<ToolTipService.ToolTip>

 

 

 

 

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

 

 

 

 

</ToolTipService.ToolTip>

 

 

 

 

<Path x:Name="RestoreIcon"

 

 

 

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"

 

 

 

Fill="{StaticResource TileView_ButtonBackground}"

 

 

 

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"

 

 

 

Width="12"

 

 

 

Height="5"

 

 

 

Background="Transparent"

 

 

 

Visibility="Collapsed">

 

 

 

 

<ToolTipService.ToolTip>

 

 

 

 

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

 

 

 

 

</ToolTipService.ToolTip>

 

 

 

 

<Rectangle Fill="{StaticResource TileView_ButtonOuterBorder}"

 

 

 

Stroke="{x:Null}"

 

 

 

StrokeThickness="0.5" />

 

 

 

 

<Rectangle x:Name="CollapseIcon"

 

 

 

Margin="1"

 

 

 

Fill="{StaticResource TileView_ButtonBackground}"

 

 

 

Stroke="{x:Null}"

 

 

 

StrokeThickness="0.5" />

 

 

 

 

</Grid>

 

 

 

 

</Grid>

 

 

 

 

</ControlTemplate>

 

 

 

 

</Setter.Value>

 

 

 

 

</Setter>

 

 

 

 

</Style>

 

 

 

 

<!-- End Button style -->

 

 

 

 

</telerik:RadTileViewItem.Resources>

 

 

 

 

<telerik:RadTileViewItem.Style >

 

 

 

 

<!-- Item style -->

  

 

<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="2" />

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

 <Setter Property="Template">

 <Setter.Value>

 <ControlTemplate x:Name="ct" >

 <Grid>

<VisualStateManager.VisualStateGroups>

 <VisualStateGroup x:Name="CommonStates">

 <VisualState x:Name="Normal" />

 <VisualState x:Name="Disabled">

 <Storyboard>

 <ObjectAnimationUsingKeyFrames Duration="0"

 Storyboard.TargetName="DisabledVisual"

 Storyboard.TargetProperty="Visibility">

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

 </ObjectAnimationUsingKeyFrames>

 </Storyboard>

 </VisualState>

 <VisualState x:Name="MouseOver" />

 </VisualStateGroup>

 <VisualStateGroup x:Name="TileStates">

 <VisualState x:Name="Maximized">

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

 </VisualState>

 <VisualState x:Name="Restored">

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

 </VisualState>

 </VisualStateGroup>

 </VisualStateManager.VisualStateGroups>

 <Border Margin="{TemplateBinding Padding}"

 Background="{TemplateBinding Background}"

 BorderBrush="{TemplateBinding BorderBrush}"

 BorderThickness="{TemplateBinding BorderThickness}"

 CornerRadius="{StaticResource TileView_OuterBorder_CornerRadius}">

 <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 Grid.Row="1"

 HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"

 VerticalAlignment="{TemplateBinding VerticalContentAlignment}"

 Content="{TemplateBinding Content}"

 ContentTemplate="{TemplateBinding ContentTemplate}" />

 <StackPanel>

 <Border x:Name="HeaderBar"

 Background="{StaticResource TileView_HeaderBackground}"

 BorderBrush="{StaticResource TileView_HeaderBorder}"

 BorderThickness="{StaticResource TileView_HeaderBorder_Thickness}"

CornerRadius="{StaticResource TileView_HeaderBorder_CornerRadius}"

Padding="10 0 7 0">

<Grid MinHeight="25">

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

<ContentPresenter x:Name="HeaderElement"

Margin="0,0,5,0"

 HorizontalAlignment="Left"

 VerticalAlignment="Center"

Content="{TemplateBinding Header}"

ContentTemplate="{TemplateBinding HeaderTemplate}" />

</Border>

<StackPanel HorizontalAlignment="Right"

VerticalAlignment="Center"

Orientation="Horizontal">

<!-- button close -->

 <Button x:Name="RefreshButton"

Width="17"

Height="17"

Margin="0,0,5,0"

HorizontalAlignment="Right"

 Click="RefreshButton_Click"

Style="{StaticResource Refresh_ButtonStyle}"

ToolTipService.ToolTip="Refresh" />

<!--Command="tileView:TileViewCommands.ToggleTileState"-->

<telerik:RadToggleButton x:Name="MaximizeToggleButton"

Style="{StaticResource maximizeToggleStyle}" />

<!-- button close -->

 <Button x:Name="CloseButton"

 Width="17"

 Height="17"

 HorizontalAlignment="Right"

 Click="CloseButton_Click"

 Style="{StaticResource Close_ButtonStyle}"

ToolTipService.ToolTip="Close" />

</StackPanel>

</Grid>

</Border>

<Border x:Name="Splitter" Height="2" Background="{StaticResource TileView_HeaderBorder_HorizontalSplitterBackground}"

 BorderThickness="0"

 OpacityMask="{StaticResource TileView_HeaderBorder_HorizontalSplitterOpacityMask}" />

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

 </Grid>

 </Border>

 </Border>

 </Grid>

 </ControlTemplate>

 </Setter.Value>

 </Setter>

 </Style>

 </telerik:RadTileViewItem.Style>

 <Grid>

 <Grid x:Name="LayoutRoot">

<telerik:RadFluidContentControl x:Name="radFluidControl" ContentChangeMode="Manual" State="Large" Grid.RowSpan="2" Grid.Row="2" Height="Auto" >

<telerik:RadFluidContentControl.SmallContent>

 <TextBlock Text="Small content"></TextBlock>

</telerik:RadFluidContentControl.SmallContent>

<telerik:RadFluidContentControl.Content>

 <TextBlock Text="Normal content"></TextBlock>

</telerik:RadFluidContentControl.Content>

<telerik:RadFluidContentControl.LargeContent>

<Grid x:Name="GridInside" VerticalAlignment="Top">

 

 

<telerik:RadGridView x:Name="radGrdView" ShowGroupPanel="False" RowIndicatorVisibility="Collapsed" Grid.Row="2" VerticalAlignment="Top" Margin="0,15,0,0" telerikTheme:Theming.Theme="Windows7" BorderThickness="1" BorderBrush="LightBlue">

 </telerik:RadGridView>

</Grid>

</telerik:RadFluidContentControl.LargeContent>

</telerik:RadFluidContentControl>

</Grid>

 </Grid>

 

</telerik:RadTileViewItem>

 





0
Tina Stancheva
Telerik team
answered on 02 Aug 2011, 05:17 PM
435420-CustomTileViewApp.zip
Hi Laxman,

You need to set a TargetType to the RadTileViewItem ControlTemplate:
<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="2" />
    <Setter Property="Padding" Value="2" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="telerik:RadTileViewItem">
        ...
        </ControlTemplate>
    </Setter.Value>
    </Setter>
</Style>

I attached the sample project I created from the code snippets you sent where the RadTileViewItem.ControlTemplate TargetType property is set.

All the best,
Tina Stancheva
the Telerik team

Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get now >>

0
Laxman
Top achievements
Rank 1
answered on 05 Aug 2011, 07:26 AM
Hi Friend,
It really work thanks a lot
0
Laxman
Top achievements
Rank 1
answered on 17 Aug 2011, 06:22 AM

Hi ,
     I am unable to refresh and close tileview  can  you write some code how to close the tileview in above solution.
0
Petar Mladenov
Telerik team
answered on 19 Aug 2011, 12:59 PM
Hello Laxman,

 The key when Clicking on these Buttons is to access the current RadTileViewItem and its parent RadTileView. You can do this like so:

private void CloseButton_Click(object sender, RoutedEventArgs e)
        {
            RadTileViewItem parentTileItem= (sender as Button).ParentOfType<RadTileViewItem>();
            RadTileView tileView = (sender as Button).ParentOfType<RadTileView>();
            tileView.Items.Remove(parentTileItem);
        }
This snipped shows how you can implement the close button logic. Having this as a starting point, you can implement your custom logic for the "refresh button". Regards,
Petar Mladenov
the Telerik team

Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get now >>

Tags
TileView
Asked by
Aditya
Top achievements
Rank 1
Answers by
Trude
Top achievements
Rank 2
Aditya
Top achievements
Rank 1
Zarko
Telerik team
Laxman
Top achievements
Rank 1
Tina Stancheva
Telerik team
Petar Mladenov
Telerik team
Share this question
or