TileView Refresh/Min/max button

9 posts, 0 answers
  1. Aditya
    Aditya avatar
    16 posts
    Member since:
    Jun 2011

    Posted 17 Jun 2011 Link to this post

    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.
  2. Jorn
    Jorn avatar
    222 posts
    Member since:
    Jun 2009
  3. DevCraft banner
  4. Aditya
    Aditya avatar
    16 posts
    Member since:
    Jun 2011

    Posted 13 Jul 2011 Link to this post

    sorry friend please see the image I need that type only.
  5. Zarko
    Admin
    Zarko avatar
    755 posts

    Posted 18 Jul 2011 Link to this post

    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!

  6. Laxman
    Laxman avatar
    6 posts
    Member since:
    Jul 2011

    Posted 28 Jul 2011 Link to this post

    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>

     





  7. Tina Stancheva
    Admin
    Tina Stancheva avatar
    3298 posts

    Posted 02 Aug 2011 Link to this post

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

  8. Laxman
    Laxman avatar
    6 posts
    Member since:
    Jul 2011

    Posted 05 Aug 2011 Link to this post

    Hi Friend,
    It really work thanks a lot
  9. Laxman
    Laxman avatar
    6 posts
    Member since:
    Jul 2011

    Posted 17 Aug 2011 Link to this post


    Hi ,
         I am unable to refresh and close tileview  can  you write some code how to close the tileview in above solution.
  10. Petar Mladenov
    Admin
    Petar Mladenov avatar
    2891 posts

    Posted 19 Aug 2011 Link to this post

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

Back to Top
DevCraft banner