Replace Image on Tileview Header

[Erik Damgaard]

Hi,

Please suggest how to replace the image of Toggle button when Tileview item get maximize and want to show different image on toggle button. So click on that image it change states accordingly as currently it is working on default toggle button image like rectangular box. Please find out the attached file to better understand

Thanks,.

[Zarko]

Hello Erik,
The best way to do this is to edit the HeaderStyle of your RadTileViewItems. You can do this by setting the HeaderStyle property of the RadTileView. In the headerStyle there's a toggle button with custom style and in this custom style there are two grids - one for the Normal/Minimized icon and one for the Maximized. In order to change the icons you'll have to change the contents of this grids.
I've attached a sample project in which you'll find a style with name "maximizeToggleStyle" and in it you'll find a grid with name "Collapse". The content of this grid is the icon that you see when you maximize an item.
Could you please examine the project and if you have further questions feel free to ask.

All the best,
Zarko
the Telerik team

[Erik Damgaard]

Hi,

Thanks for solution. But it is not working properly. As I am using different version(2011.2.920.1040) of tileview control. I also need to changed the tooltip on minimize and maximize that should pick up the value from localization file. I am not able to attached the theme file in which I need to modified and implement it. So I paste the xaml theme here. Please suggest.

<!-- Here is Tileview Theme Start -->

<LinearGradientBrush x:Key="TileView_ButtonBackground_MouseOver" EndPoint="0.5,1" StartPoint="0.5,0">
        <GradientStop Color="#FF282828"/>
        <GradientStop Color="#FF7C7C7C" Offset="1"/>
    </LinearGradientBrush>
    <LinearGradientBrush x:Key="TileView_ButtonBackground_Pressed" EndPoint="0.5,1" StartPoint="0.5,0">
        <GradientStop Color="#FF282828"/>
        <GradientStop Color="#FF7C7C7C" Offset="1"/>
    </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_HeaderBackground" EndPoint="0.5,1" StartPoint="0.5,0">
        <GradientStop Color="#E5FFFFFF"/>
        <GradientStop Color="#66FFFFFF" Offset="1"/>
        <GradientStop Color="#B2FFFFFF" Offset="0.5"/>
        <GradientStop Color="#B2FFFFFF" Offset="0.51"/>
    </LinearGradientBrush>
    <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_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" />
    <LinearGradientBrush x:Key="TileView_Background" EndPoint="0.5,1" StartPoint="0.5,0">
        <GradientStop Color="#B2FFFFFF" Offset="1"/>
        <GradientStop Color="#33FFFFFF"/>
        <GradientStop Color="#7FFFFFFF" Offset="0.5"/>
    </LinearGradientBrush>
    <SolidColorBrush x:Key="TileView_OuterBorder" Color="#7F616161" />
    <CornerRadius x:Key="TileView_OuterBorder_CornerRadius">2</CornerRadius>
    <SolidColorBrush x:Key="TileView_InneBorder" Color="#CCFFFFFF" />
    <CornerRadius x:Key="TileView_InneBorder_CornerRadius">1</CornerRadius>
    <Thickness x:Key="TileView_InneBorder_Thickness">1</Thickness>
    <SolidColorBrush x:Key="DisabledBrush" Color="#99FFFFFF"></SolidColorBrush>
    <!--<LinearGradientBrush x:Key="ControlOuterBorder_Selected" EndPoint="0.5,1" StartPoint="0.5,0">
        <GradientStop Color="#B2000000"/>
        <GradientStop Color="#7F000000" Offset="1"/>
    </LinearGradientBrush>-->
    <Thickness x:Key="TileView_MaximizeArea_BorderThickness">2</Thickness>
    <SolidColorBrush x:Key="TileView_MaximizeArea_BorderBrush" Color="#66FFFFFF" />
    <SolidColorBrush x:Key="TileView_MaximizeArea_Background" Color="#66000000" />
   






    <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 TargetType="Telerik_Windows_Controls_TileView:TileViewItemHeader"
>
        <Setter Property="Background" Value="{StaticResource TileView_HeaderBackground}" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Telerik_Windows_Controls_TileView:TileViewItemHeader">
                    <Grid>


                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="TileStates">
                                <VisualState x:Name="Maximized">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="MaximizeToggleButton"
Storyboard.TargetProperty="IsChecked" Duration="0">
                                            <DiscreteObjectKeyFrame KeyTime="0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <sys:Boolean>True</sys:Boolean>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Restored">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="MaximizeToggleButton"
Storyboard.TargetProperty="IsChecked" Duration="0">
                                            <DiscreteObjectKeyFrame KeyTime="0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <sys:Boolean>False</sys:Boolean>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>


                        <StackPanel>
                            <Border CornerRadius="{StaticResource TileView_HeaderBorder_CornerRadius}"
Padding="10 0 7 0"
BorderBrush="{StaticResource TileView_HeaderBorder}"
BorderThickness="{StaticResource TileView_HeaderBorder_Thickness}"
Background="{TemplateBinding Background}">
                                <Grid MinHeight="28">
                                    <Border x:Name="GripBarElement"
Background="Transparent">
                                        <ContentPresenter x:Name="HeaderElement"
 HorizontalAlignment="Left"
 VerticalAlignment="Center"
 Margin="0,0,10,0"
 


ContentTemplate="{TemplateBinding HeaderTemplate}" />
                                    </Border>
                                    <telerik:RadToggleButton x:Name="MaximizeToggleButton"
 


Command="Telerik_Windows_Controls_TileView:TileViewCommands.ToggleTileState"
Style="{StaticResource 


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


                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>


    <Style TargetType="telerikNavigation: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="Template">
            <Setter.Value>
                <ControlTemplate TargetType="telerikNavigation: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>
                            <VisualStateGroup x:Name="SelectionStates">
                                <VisualState x:Name="Selected">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="SelectedItem"
Storyboard.TargetProperty="Visibility" Duration="0">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="Visible" />
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Unselected" />
                            </VisualStateGroup>
                            <VisualStateGroup x:Name="MouseOverDraggingStates">
                                <VisualState x:Name="MouseOverDragging">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="MouseOverBorder"
  


Storyboard.TargetProperty="Visibility"
  


Duration="0">
                                            <DiscreteObjectKeyFrame KeyTime="0"



Value="Visible" />
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="MouseNotOverDragging" />
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>


                        <Border x:Name="outerBorder" CornerRadius="{StaticResource TileView_OuterBorder_CornerRadius}"
Margin="{TemplateBinding Padding}" Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}">
                            <Border x:Name="outerContainer"
Background="Transparent"
BorderBrush="{StaticResource  TileView_InneBorder}" 
CornerRadius="{StaticResource TileView_InneBorder_CornerRadius}"
BorderThickness="{StaticResource TileView_InneBorder_Thickness}">
                                <Grid>
                                    <Grid.RowDefinitions>
                                        <RowDefinition Height="Auto" />
                                        <RowDefinition Height="*" />
                                    </Grid.RowDefinitions>
                                    <Telerik_Windows_Controls_TileView:TileViewItemHeader x:Name="HeaderPart"
 


HeaderTemplate="{TemplateBinding HeaderTemplate}"
Style="{Binding 


RelativeSource={RelativeSource TemplatedParent}, Path=HeaderStyle, Mode=TwoWay}">
                                    </Telerik_Windows_Controls_TileView:TileViewItemHeader>


                                    <Grid Grid.Row="1" Background="Transparent">
                                        <ContentPresenter x:Name="ContentElement" Grid.Row="1"
Content="{TemplateBinding Content}"
ContentTemplate="{TemplateBinding 


ContentTemplate}"

HorizontalAlignment="{TemplateBinding 


HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding 


VerticalContentAlignment}"/>
                                    </Grid>


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


                        <!-- Selectrion state -->
                        <Grid x:Name="SelectedItem" Visibility="Collapsed" Margin="-1">
                            <Border  CornerRadius="{StaticResource TileView_OuterBorder_CornerRadius}"
Margin="{TemplateBinding Padding}" BorderBrush="{StaticResource ControlOuterBorder_Selected}" 


BorderThickness="2" />
                        </Grid>
                        <!-- MouseOver dragging state -->
                        <Border x:Name="MouseOverBorder"
Visibility="Collapsed"
Opacity="0.5"
BorderThickness="{StaticResource TileView_MaximizeArea_BorderThickness}"
BorderBrush="{StaticResource TileView_MaximizeArea_BorderBrush}"
Background="{StaticResource TileView_MaximizeArea_Background}" />
                    </Grid>


                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>


    <Style TargetType="telerikNavigation:RadTileView" 
            >
        <Setter Property="Background" Value="Transparent" />
        <Setter Property="ScrollBarVisibility" Value="Auto" />
        <Setter Property="IsAnimationOptimized" Value="False" />


        <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto" />
        <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto" />
        <Setter Property="Padding" Value="7" />
        <Setter Property="ItemsPanel">
            <Setter.Value>
                <ItemsPanelTemplate>
                    <telerikNavigation:TileViewPanel />
                </ItemsPanelTemplate>
            </Setter.Value>
        </Setter>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="telerikNavigation:RadTileView">
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*"></ColumnDefinition>
                            <ColumnDefinition Width="*"></ColumnDefinition>
                        </Grid.ColumnDefinitions>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="*"></RowDefinition>
                            <RowDefinition Height="*"></RowDefinition>
                        </Grid.RowDefinitions>


                        <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>
                            <VisualStateGroup x:Name="Docking">
                                <VisualState x:Name="DockTop">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="MaximizeAreaTop"
Storyboard.TargetProperty="Visibility" Duration="0">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="Visible" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="MaximizeAreaBottom"
Storyboard.TargetProperty="Visibility" Duration="0">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="MaximizeAreaLeft"
Storyboard.TargetProperty="Visibility" Duration="0">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="MaximizeAreaRight"
Storyboard.TargetProperty="Visibility" Duration="0">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed" />
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="DockLeft">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="MaximizeAreaTop"
Storyboard.TargetProperty="Visibility" Duration="0">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="MaximizeAreaBottom"
Storyboard.TargetProperty="Visibility" Duration="0">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="MaximizeAreaLeft"
Storyboard.TargetProperty="Visibility" Duration="0">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="Visible" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="MaximizeAreaRight"
Storyboard.TargetProperty="Visibility" Duration="0">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed" />
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="DockRight">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="MaximizeAreaTop"
Storyboard.TargetProperty="Visibility" Duration="0">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="MaximizeAreaBottom"
Storyboard.TargetProperty="Visibility" Duration="0">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="MaximizeAreaLeft"
Storyboard.TargetProperty="Visibility" Duration="0">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="MaximizeAreaRight"
Storyboard.TargetProperty="Visibility" Duration="0">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="Visible" />
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="DockBottom">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="MaximizeAreaTop"
Storyboard.TargetProperty="Visibility" Duration="0">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="MaximizeAreaBottom"
Storyboard.TargetProperty="Visibility" Duration="0">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="Visible" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="MaximizeAreaLeft"
Storyboard.TargetProperty="Visibility" Duration="0">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="MaximizeAreaRight"
Storyboard.TargetProperty="Visibility" Duration="0">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed" />
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="HideMaximizeArea">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="MaximizeAreaTop"
Storyboard.TargetProperty="Visibility" Duration="0">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="MaximizeAreaBottom"
Storyboard.TargetProperty="Visibility" Duration="0">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="MaximizeAreaLeft"
Storyboard.TargetProperty="Visibility" Duration="0">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="MaximizeAreaRight"
Storyboard.TargetProperty="Visibility" Duration="0">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed" />
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>


                        <Border Background="{TemplateBinding Background}" Grid.ColumnSpan="2" Grid.RowSpan="2"
BorderThickness="{TemplateBinding BorderThickness}"
BorderBrush="{TemplateBinding BorderBrush}">
                            <ScrollViewer x:Name="ScrollViewer" BorderThickness="0" Background="Transparent"
telerik:StyleManager.Theme="{StaticResource Theme}"
                                
HorizontalScrollBarVisibility="{Binding (ScrollViewer.HorizontalScrollBarVisibility), RelativeSource=


{RelativeSource TemplatedParent}}"
VerticalScrollBarVisibility="{Binding (ScrollViewer.VerticalScrollBarVisibility), RelativeSource=


{RelativeSource TemplatedParent}}">
                                <ItemsPresenter />
                            </ScrollViewer>
                        </Border>
                        <Rectangle x:Name="DisabledVisual" Fill="{StaticResource DisabledBrush}" Grid.ColumnSpan="2"
Grid.RowSpan="2" Visibility="Collapsed" />
                        <Border x:Name="MaximizeAreaTop" Visibility="Collapsed" Grid.ColumnSpan="2" Grid.Row="0"
BorderThickness="{StaticResource TileView_MaximizeArea_BorderThickness}"
BorderBrush="{StaticResource TileView_MaximizeArea_BorderBrush}"
Background="{StaticResource TileView_MaximizeArea_Background}" />
                        <Border x:Name="MaximizeAreaBottom" Visibility="Collapsed" Grid.ColumnSpan="2" Grid.Row="1"
BorderThickness="{StaticResource TileView_MaximizeArea_BorderThickness}"
BorderBrush="{StaticResource TileView_MaximizeArea_BorderBrush}"
Background="{StaticResource TileView_MaximizeArea_Background}" />
                        <Border x:Name="MaximizeAreaLeft" Visibility="Collapsed" Grid.RowSpan="2" Grid.Column="0"
BorderThickness="{StaticResource TileView_MaximizeArea_BorderThickness}"
BorderBrush="{StaticResource TileView_MaximizeArea_BorderBrush}"
Background="{StaticResource TileView_MaximizeArea_Background}" />
                        <Border x:Name="MaximizeAreaRight" Visibility="Collapsed" Grid.RowSpan="2" Grid.Column="1"
BorderThickness="{StaticResource TileView_MaximizeArea_BorderThickness}"
BorderBrush="{StaticResource TileView_MaximizeArea_BorderBrush}"
Background="{StaticResource TileView_MaximizeArea_Background}" />
                    </Grid>


                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>


<!-- Tileview Theme End -->
Thanks. 

[Erik Damgaard]

Hi,

I am able to replace image. Now only need to know how to show tooltip value from localization. 

Thanks,

[Zarko]

Hi Erik,
There are a couple of ways to change the tooltip depending on your culture. Here you can read one way to do it.
I've updated the attached project so could you please examine it and if you have further questions feel free to ask.

Greetings,
Zarko
the Telerik team