How do i get customized Header style for the TileViewItem?

15 posts, 0 answers
  1. James
    James avatar
    26 posts
    Member since:
    Oct 2008

    Posted 12 Nov 2009 Link to this post

    Hi There,

    Thank you for your continuing support with our questions.

    We are using TileView control, which is great control in Q3.

    However, in blend3 TileViewItem doesnt appear. and thats why i can not get customized style for it.

    I want to control the height(smaller than the default) of the TileViewItem.
    as well as, I want to get the Header Background brush to be like this:

     

     

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

     

     

     

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

     

     

     

    <GradientStop Color="#FF0A378C" Offset="0.379"/>

     

     

     

    <GradientStop Color="#FF053C79" Offset="0.393"/>

     

     

     

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

     

     

     

    </LinearGradientBrush>

    We are using FluidContentControl inside the TileViewItem.

    Hope to get some styling for header done.

    Thanks in advance,

    Cheers,
    Bhavin

     

  2. Dimitrina
    Admin
    Dimitrina avatar
    442 posts

    Posted 17 Nov 2009 Link to this post

    Hi James,

    You can apply  a custom theme to any of  the controls. For more information you can follow the link below:
    http://www.telerik.com/help/silverlight/radcontrols-for-silverlight-expression-blend-support.html 

    Please find attached an example.

    If you have any further question please do not hesitate to ask.

    I hope this will help you.

    Best wishes,

    Dimitrina
    the Telerik team

     


    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
  3. DevCraft banner
  4. Thendral Perumal
    Thendral Perumal avatar
    16 posts
    Member since:
    Nov 2009

    Posted 23 Nov 2009 Link to this post

    Hi Genius,

    We are developing a demo for a client using the Telerik RadControl - TileView. We are using a Nested TileView and we want to customise the TileView Items so that we get rid of the Frame and retain the Minimise & Maximise icons alone with our content....


    I have attached a Screenshot of what we have got & What we want to achieve .........

    Kindly send the detailed explanation of what we have to do........ It is very urgent, so would appreciate it if we get the reply ASAP.....

    Thanks a million  in advance.....


    Regards,
    Thendral
  5. Tihomir Petkov
    Admin
    Tihomir Petkov avatar
    576 posts

    Posted 23 Nov 2009 Link to this post

    Hi Thendral,

    It is not possible to remove the header of the minimized tiles only, with the maximized tile still having its header. Let me know if you want an example of making the headers of all tiles transparent.

    All the best,
    Tihomir Petkov
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
  6. James
    James avatar
    26 posts
    Member since:
    Oct 2008

    Posted 23 Nov 2009 Link to this post

    Hi Thendral,

    You can make header transperant in the style.. and when the TileViewItem is maximized, you apply text in the header from code behind (you can do this in the TileViewStateChanged event)

    Btw, I have attached the style of your desired.. you may need to tweak just a bit to get it as you want.
    Sorry, forum doesn't allow me to attach zip or xaml file..

    <

     

    UserControl x:Class="SilverlightCutomTheme.MainPage2"

     

     

    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

     

    :telerikNavigation="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Navigation"

     

    xmlns

     

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

     

    xmlns

     

    :telerikGridView="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.GridView"

     

    xmlns

     

    :telerikInput="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Input"

     

     

    >

     

     

     

    <UserControl.Resources>

     

     

     

    <telerik:Office_BlackTheme x:Key="Theme" IsApplicationTheme="True"/>

     

     

     

    <SolidColorBrush x:Key="RadTileView_Background" Color="#e9ecee"/>

     

     

     

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

     

     

     

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

     

     

     

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

     

     

     

    </LinearGradientBrush>

     

     

     

    <!--<LinearGradientBrush x:Key="RadTileView_HeaderBackground" EndPoint="0,1" StartPoint="0,0">

     

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

    <GradientStop Color="#e1e4e7" Offset="0.5"/>

    <GradientStop Color="#c9cdd2" Offset="0.51"/>

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

    </LinearGradientBrush>-->

     

     

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

     

     

     

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

     

     

     

    <GradientStop Color="Green" Offset="1"/>

     

     

     

    </LinearGradientBrush>

     

     

     

    <SolidColorBrush x:Key="RadTileView_HeaderBorder" Color="#caced3"/>

     

     

     

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

     

     

     

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

     

     

     

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

     

     

     

    </LinearGradientBrush>

     

     

     

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

     

     

     

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

     

     

     

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

     

     

     

    <GradientStop Color="#FFC9CDD2" Offset="0.53"/>

     

     

     

    <GradientStop Color="#FFF2F2F4" Offset="0.513"/>

     

     

     

    </LinearGradientBrush>

     

     

     

    <SolidColorBrush x:Key="RadTileView_ButtonInnerBorder" Color="#FF3A3C3D"/>

     

     

     

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

     

     

     

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

     

     

     

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

     

     

     

    <GradientStop Color="#FFF0F0F2" Offset="0.422"/>

     

     

     

    <GradientStop Color="#FFC8CDD2" Offset="0.44"/>

     

     

     

    </LinearGradientBrush>

     

     

     

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

     

     

     

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

     

     

     

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

     

     

     

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

     

     

     

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

     

     

     

    </LinearGradientBrush>

     

     

     

    <SolidColorBrush x:Key="RadTileView_ButtonInnerBorderOver" Color="#FF543E0C"/>

     

     

     

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

     

     

     

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

     

     

     

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

     

     

     

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

     

     

     

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

     

     

     

    </LinearGradientBrush>

     

     

     

    <SolidColorBrush x:Key="RadTileView_ButtonInnerBorderPressed" Color="#FF573510"/>

     

     

     

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

     

     

     

    <ControlTemplate x:Key="ToggleButtonControlTemplate" TargetType="ToggleButton">

     

     

     

    <Grid>

     

     

     

    <VisualStateManager.VisualStateGroups>

     

     

     

    <VisualStateGroup x:Name="FocusStates">

     

     

     

    <VisualState x:Name="Focused"/>

     

     

     

    <VisualState x:Name="Unfocused"/>

     

     

     

    </VisualStateGroup>

     

     

     

    <VisualStateGroup x:Name="CommonStates">

     

     

     

    <VisualState x:Name="Disabled"/>

     

     

     

    <VisualState x:Name="Normal"/>

     

     

     

    <VisualState x:Name="MouseOver">

     

     

     

    <Storyboard>

     

     

     

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

     

     

     

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

     

     

     

    </ObjectAnimationUsingKeyFrames>

     

     

     

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

     

     

     

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

     

     

     

    </ObjectAnimationUsingKeyFrames>

     

     

     

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

     

     

     

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

     

     

     

    </ObjectAnimationUsingKeyFrames>

     

     

     

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

     

     

     

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

     

     

     

    </ObjectAnimationUsingKeyFrames>

     

     

     

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

     

     

     

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

     

     

     

    </ObjectAnimationUsingKeyFrames>

     

     

     

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

     

     

     

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

     

     

     

    </ObjectAnimationUsingKeyFrames>

     

     

     

    </Storyboard>

     

     

     

    </VisualState>

     

     

     

    <VisualState x:Name="Pressed">

     

     

     

    <Storyboard>

     

     

     

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

     

     

     

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

     

     

     

    </ObjectAnimationUsingKeyFrames>

     

     

     

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

     

     

     

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

     

     

     

    </ObjectAnimationUsingKeyFrames>

     

     

     

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

     

     

     

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

     

     

     

    </ObjectAnimationUsingKeyFrames>

     

     

     

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

     

     

     

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

     

     

     

    </ObjectAnimationUsingKeyFrames>

     

     

     

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

     

     

     

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

     

     

     

    </ObjectAnimationUsingKeyFrames>

     

     

     

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

     

     

     

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

     

     

     

    </ObjectAnimationUsingKeyFrames>

     

     

     

    </Storyboard>

     

     

     

    </VisualState>

     

     

     

    </VisualStateGroup>

     

     

     

    <VisualStateGroup x:Name="CheckStates">

     

     

     

    <VisualState x:Name="Checked">

     

     

     

    <Storyboard>

     

     

     

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

     

     

     

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

     

     

     

    </ObjectAnimationUsingKeyFrames>

     

     

     

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

     

     

     

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

     

     

     

    </ObjectAnimationUsingKeyFrames>

     

     

     

    </Storyboard>

     

     

     

    </VisualState>

     

     

     

    <VisualState x:Name="Unchecked"/>

     

     

     

    <VisualState x:Name="Indeterminate"/>

     

     

     

    </VisualStateGroup>

     

     

     

    </VisualStateManager.VisualStateGroups>

     

     

     

    <Grid x:Name="uncheckedArrow" Height="13" Width="17" Visibility="Visible" Background="Transparent" ToolTipService.ToolTip="Maximize">

     

     

     

    <Path x:Name="Path1" Fill="{StaticResource RadTileView_ButtonBackground}" Stretch="Fill" Height="11" HorizontalAlignment="Center" VerticalAlignment="Center" Width="15" Data="M3,4 L3,8 L12,8 L12,4 z M1.4999999,1.4210855E-14 L13.5,1.4210855E-14 C14.328427,-1.0430811E-07 15,0.67157274 15,1.4999999 L15,9.5 C15,10.328427 14.328427,11 13.5,11 L1.4999999,11 C0.67157286,11 0,10.328427 0,9.5 L0,1.4999999 C0,0.67157274 0.67157286,-1.0430811E-07 1.4999999,1.4210855E-14 z"/>

     

     

     

    <Rectangle x:Name="Path4" Stroke="{StaticResource RadTileView_ButtonOuterBorder}" RadiusX="2" RadiusY="2" Height="13" HorizontalAlignment="Center" VerticalAlignment="Center" Width="17"/>

     

     

     

    <Path x:Name="Path5" Fill="{StaticResource RadTileView_ButtonInnerBorder}" Stretch="Fill" Height="10.914" HorizontalAlignment="Center" VerticalAlignment="Center" Width="14.913" Opacity="0.7" Data="M11.956482,4.9564972 L12.956482,4.9564972 L12.956482,8.9564972 L11.956482,8.9564972 L3.9564819,8.9564972 L3.9564819,7.9564972 L11.956482,7.9564972 z M1.5000182,0 L13.500164,0 C14.121492,3.0788389E-08 14.654589,0.37776613 14.882304,0.91614765 L14.912999,1.0000155 L1.0000072,1.0000155 L1.0000072,10.913 L0.91614342,10.882306 C0.37776428,10.65459 -5.9605348E-08,10.12149 7.0536E-15,9.5001593 L7.0536E-15,1.5000254 C-5.9605348E-08,0.67158419 0.67158097,3.0788389E-08 1.5000182,0 z"/>

     

     

     

    <Rectangle x:Name="Path6" Stroke="{StaticResource RadTileView_ButtonInnerBorderRectangle}" Height="4" HorizontalAlignment="Center" VerticalAlignment="Center" Width="9"/>

     

     

     

    </Grid>

     

     

     

    <Grid x:Name="checkedArrow" Height="17" Margin="0 1 0 0" Width="17" Visibility="Collapsed" Background="Transparent" ToolTipService.ToolTip="Minimize">

     

     

     

    <Path x:Name="PathCheck" Stretch="Fill" Stroke="{StaticResource RadTileView_ButtonOuterBorder}" Height="13" HorizontalAlignment="Right" VerticalAlignment="Top" Width="13" Data="M2.5,0.5 L10.5,0.5 C11.6,0.5 12.5,1.31 12.5,2.5 L12.5,10.5 C12.5,11.6 11.6,12.5 10.5,12.5 L6.5,12.5 L6.5,7.5 L0.5,7.5 L0.5,2.5 C0.5,1.4 1.4,0.5 2.5,0.5 z"/>

     

     

     

    <Path x:Name="Path1Check" Fill="{StaticResource RadTileView_ButtonBackground}" Stretch="Fill" Margin="1,5,5,1" Data="M3,4 L3,8 L8,8 L8,4 z M1.5,0 L9.5,0 C10.3,0 11,0.6 11,1.5 L11,9.5 C11,10.3 10.3,11 9.5,11 L1.5,11 C0.6,11 0,10.3 0,9.5 L0,1.5 C0,0.6 0.6,0 1.5,0 z"/>

     

     

     

    <Path x:Name="Path2Check" Fill="{StaticResource RadTileView_ButtonBackground}" Stretch="Fill" Margin="5.05,1,1,5" Data="M1.5,0 L9.5,0 C10.3,0 11,0.6 11,1.5 L11,3.5 L11,9.5 C11,10.3 10.3,11 9.5,11 L7,11 L7,8.5 L7,8 L7,4 L7,3.5 L0,3.5 L0,1.5 C0,0.6 0.6,0 1.5,0 z"/>

     

     

     

    <Path x:Name="Path3Check" Fill="{StaticResource RadTileView_ButtonInnerBorder}" Stretch="Fill" Margin="5.05,1,1.05,5" Opacity="0.7" Data="M7.9,4.25 L8.9,4.25 L8.9,11.25 L7.9,11.25 z M1.5,0 L9.5,0 C10.1,0 10.6,0.4 10.9,0.9 L10.914,0.9 L0.99,0.99 L0.99,2.5 L0,2.5 L0,1.5 C0,0.6 0.6,0 1.5,0 z"/>

     

     

     

    <Rectangle x:Name="Path4Check" Stroke="{StaticResource RadTileView_ButtonOuterBorder}" RadiusX="2" RadiusY="2" Height="13" HorizontalAlignment="Right" Margin="0,3.5,4,0" VerticalAlignment="Top" Width="13"/>

     

     

     

    <Path x:Name="Path5Check" Fill="{StaticResource RadTileView_ButtonInnerBorder}" Stretch="Fill" Margin="1,5,5.05,1.1" Opacity="0.7" Data="M7.99,5 L9,5 L9,8.99 L8,8.99 L4,9 L4,8 L7.99,8 z M1.4,0 L9.4,0 C10,0 10.69,0.4 10.9,0.98 L10.914,0.99 L0.99,0.99 L0.99,10.914 L0.98,10.90 C0.4,10.69 0,10.14 0,9.5 L0,1.5 C0,0.675 0.675,0 1.5,0 z"/>

     

     

     

    <Rectangle x:Name="Path6Check" Stroke="{StaticResource RadTileView_ButtonInnerBorderRectangle}" Height="4" Margin="4,0,8,4" VerticalAlignment="Bottom"/>

     

     

     

    </Grid>

     

     

     

    </Grid>

     

     

     

    </ControlTemplate>

     

     

     

    <Style x:Key="RadTileViewItemStyle1" TargetType="telerikNavigation:RadTileViewItem">

     

     

     

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

     

     

     

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

     

     

     

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

     

     

     

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

     

     

     

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

     

     

     

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

     

     

     

    </ObjectAnimationUsingKeyFrames>

     

     

     

    </Storyboard>

     

     

     

    </VisualState>

     

     

     

    <VisualState x:Name="MouseOver"/>

     

     

     

    </VisualStateGroup>

     

     

     

    </VisualStateManager.VisualStateGroups>

     

     

     

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

     

     

     

    <Grid>

     

     

     

    <Grid.RowDefinitions>

     

     

     

    <RowDefinition Height="Auto"/>

     

     

     

    <RowDefinition Height="*"/>

     

     

     

    </Grid.RowDefinitions>

     

     

     

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

     

     

     

    <Border Background="Transparent" BorderBrush="Transparent" BorderThickness="0 0 0 1" CornerRadius="4 4 0 0" Padding="10 0 7 0">

     

     

     

    <Grid MinHeight="28">

     

     

     

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

     

     

     

    <ContentPresenter HorizontalAlignment="Left" Margin="0,0,10,0" VerticalAlignment="Center" Content="{TemplateBinding Header}" ContentTemplate="{TemplateBinding HeaderTemplate}"/>

     

     

     

    </Border>

     

     

     

    <ToggleButton x:Name="MaximizeToggleButton" Height="17" HorizontalAlignment="Right" VerticalAlignment="Center" Width="17" Template="{StaticResource ToggleButtonControlTemplate}"/>

     

     

     

    </Grid>

     

     

     

    </Border>

     

     

     

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

     

     

     

    </Grid>

     

     

     

    </Border>

     

     

     

    </Grid>

     

     

     

    </ControlTemplate>

     

     

     

    </Setter.Value>

     

     

     

    </Setter>

     

     

     

    </Style>

     

     

     

     

    </UserControl.Resources>

     

     

     

    <Grid x:Name="LayoutRoot">

     

     

     

    <telerikNavigation:RadTileView>

     

     

     

    <telerikNavigation:RadTileViewItem Header="" Content="Content1" Style="{StaticResource RadTileViewItemStyle1}" />

     

     

     

    <telerikNavigation:RadTileViewItem Header="" Content="Content2" Style="{StaticResource RadTileViewItemStyle1}" />

     

     

     

    <telerikNavigation:RadTileViewItem Header="" Content="Content3" Style="{StaticResource RadTileViewItemStyle1}" />

     

     

     

    <telerikNavigation:RadTileViewItem Header="" Content="Content4" Style="{StaticResource RadTileViewItemStyle1}" />

     

     

     

    <telerikNavigation:RadTileViewItem Header="" Content="Content5" Style="{StaticResource RadTileViewItemStyle1}" />

     

     

     

    <telerikNavigation:RadTileViewItem Header="" Content="Content6" Style="{StaticResource RadTileViewItemStyle1}" />

     

     

     

    </telerikNavigation:RadTileView>

     

     

     

    </Grid>

     

    </

     

    UserControl>

     



    Cheers, Bhavin
  7. Thendral Perumal
    Thendral Perumal avatar
    16 posts
    Member since:
    Nov 2009

    Posted 23 Nov 2009 Link to this post

    Hi Genius,

    Wow!! Thanks Tihomir Petkov Telerik & Bhavin


    I will try your code ad tell you......... And I would like to know how to make the headers of all the nested tileviews alone transparent..... and any other possible customisations


    Regards & Thanks a million,

     Thendral    
  8. Thendral Perumal
    Thendral Perumal avatar
    16 posts
    Member since:
    Nov 2009

    Posted 24 Nov 2009 Link to this post

    Hi Genius,


    Thanks for the code.

    The TileView works in a way where the Maximised, Minimised & Small Tiles are controlled as such that their contents are stringed (they just shrink or expand bansed on the view). Can we have independent contents for the Maximised, Minimised & Small Tile, like the Maximised will have a Large Image (Left) & Text Description(right), while the Minimised & Small Content will have a Thumbnail image (centered) alone, and these two also should not be stringed...... together, need to be independent........


    Thanks again,

    Thendral



  9. Thendral Perumal
    Thendral Perumal avatar
    16 posts
    Member since:
    Nov 2009

    Posted 24 Nov 2009 Link to this post

    Hi Genius,

    Q1. On the Telerik RadControl Tile View ..... The Maximise works only when we click on the Maximise Icon or double click on the Header, Will it be possible to trigger Maximise action while clicking anywhere on the tile...

    Q2. In a Nested TileView Restored View all the Tiles are not visible, how can we make all visible...(Sample Image of what is happening is attached)

    Will appreciate a reply asap.........

    Thanks a million in advance


    Regards,

    Thendral
  10. James
    James avatar
    26 posts
    Member since:
    Oct 2008

    Posted 24 Nov 2009 Link to this post

    Hi Thendral,

    A1. You can attach "mouse down" or "Click" event on the tile. and when the event fires, you change the state of the corresponding tile to "Maximised".

    A2. Okay, here is something which is little bit out of control at the moment. I ran into the similar problem, but with a workaround.. I was able to overcome the situation. I was changing the size of "TileView" control as i add more "TileViewItems".
    In your case, you first set the size of the TileViewItem to maximum or wrap around the inner "TileViewItem" control with scrollbar.


    Thats what i could think of,

    Its a great control, you should worth looking at the KB articles, Documentation and also sample demo would help you in great deal.

    Cheers, Bhavin
  11. Thendral Perumal
    Thendral Perumal avatar
    16 posts
    Member since:
    Nov 2009

    Posted 24 Nov 2009 Link to this post

    Hi Genius,

    Thanks a million.......... really mean it............. this is the first time im working on Expression 3 & that too under lot of pressure........... that is why i had so many urgent clarifications...........

    Can you send me the worthy Knowledge Base Links ...if possible..........

    Thanks,

    Thendral
  12. Tihomir Petkov
    Admin
    Tihomir Petkov avatar
    576 posts

    Posted 27 Nov 2009 Link to this post

    Hello Thendral,

    Below are links to the online demos and help articles:
    http://www.telerik.com/help/silverlight/radtileview-overview.html
    http://demos.telerik.com/silverlight/#Home

    There are currently no KB articles for the TileView control, but we are working on adding such to our online resources.

    Regards,
    Tihomir Petkov
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
  13. Thendral Perumal
    Thendral Perumal avatar
    16 posts
    Member since:
    Nov 2009

    Posted 27 Nov 2009 Link to this post

    Hi Genius,

    Thanks for all the help and guidance........ We have completed the demo and the client is satisfied........

    Thanks & Regards,
    Thendral
  14. Thendral Perumal
    Thendral Perumal avatar
    16 posts
    Member since:
    Nov 2009

    Posted 27 Nov 2009 Link to this post

    Hi Genius,

    I am back with the next question.....

    Can we integrate the Telerik Tab menu with the Telerik TileView so that we can control what page the TileView opens through/from the TabItem....


    Thanks a million in advance.

    Thanks & Regards,
    Thendral
  15. Tihomir Petkov
    Admin
    Tihomir Petkov avatar
    576 posts

    Posted 01 Dec 2009 Link to this post

    Hi Thendral,

    Yes, it is possible to control the maximized tile of the TileView via the selected tab in the TabControl. However, the exact implementation of the scenario depends on whether you want the TileView to be part of the TabControl, or outside of it. Do you see any specific benefit of using a TabControl to control the maximized TileViewItem instead of a simple row of properly styled buttons?

    Greetings,
    Tihomir Petkov
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
  16. Thendral Perumal
    Thendral Perumal avatar
    16 posts
    Member since:
    Nov 2009

    Posted 02 Dec 2009 Link to this post

    Hi Genius,

    Yes we have finally resorted to using the simple row of buttons with the Tab Effect....

    Thanks a million for all the help...... Will be in touch when the next issue arises..... :-) :-) :-)

    Thanks & Regards,
    Thendral
Back to Top
DevCraft banner