hide buttons on tileviewitem

9 posts, 3 answers
  1. Jonam
    Jonam avatar
    19 posts
    Member since:
    Aug 2010

    Posted 10 Jun 2012 Link to this post

    Hello,

    i would like the use the tileview as a style container because it looks nice. Is it possible to disable the resize buttons on the tileviewitems?

    kind regards,

    Jonam
  2. Answer
    Lancelot
    Lancelot avatar
    251 posts
    Member since:
    Jul 2012

    Posted 11 Jun 2012 Link to this post

    Hi Jonam,

    Yes it is possible to hide that button. Since the RadTileView was not designed for such an action (the core functionality of RadTileView is the ability to collapse, restore and maximize), we have to dig into the template. I've created a video for you to follow. You will need to use Expression Blend Preview for Silverlight 5 because Expression Blend 4 doesn't support Silverlight 5 controls.

    Before you click on the link below, open your project in Blend and locate the RadTileItem you want to remove the button from. You will be creating a template that you can apply to all your other tiles, so you only have to do this once.

    Video http://screencast.com/t/KK8Ng1hd

    If you do not have Blend, you can copy and paste the custom Style below in manually and then assign the style to your tile items manually.

    <!-- Below is the new style that hides the Maximize button. Notice that I manually assign the style to each RadTileItem that I want to hide the button on.-->
    <UserControl.Resources>
        <SolidColorBrush x:Key="TileView_Background" Color="#FFFFFFFF"/>
        <SolidColorBrush x:Key="TileView_OuterBorder" Color="#FF848484"/>
        <SolidColorBrush x:Key="TileView_InneBorder" Color="#FFFFFFFF"/>
        <Thickness x:Key="TileView_InneBorder_Thickness">1</Thickness>
        <SolidColorBrush x:Key="DisabledBrush" Color="#99FFFFFF"/>
        <CornerRadius x:Key="TileView_InneBorder_CornerRadius">1</CornerRadius>
        <CornerRadius x:Key="TileView_OuterBorder_CornerRadius">2</CornerRadius>
        <SolidColorBrush x:Key="ControlOuterBorder_Selected" Color="#FFFFC92B"/>
        <SolidColorBrush x:Key="TileView_MaximizeArea_BorderBrush" Color="#B2FFCD27"/>
        <Thickness x:Key="TileView_MaximizeArea_BorderThickness">2</Thickness>
        <SolidColorBrush x:Key="TileView_MaximizeArea_Background" Color="#66FFF62D"/>
        <LinearGradientBrush x:Key="TileView_HeaderBackground" EndPoint="0.5,1" StartPoint="0.5,0">
            <GradientStop Color="#FFF6F6F6"/>
            <GradientStop Color="#FFD2D2D2" Offset="1"/>
        </LinearGradientBrush>
        <SolidColorBrush x:Key="TileView_HeaderBorder" Color="#FFFFFFFF"/>
        <Thickness x:Key="TileView_HeaderBorder_Thickness">0 0 0 1</Thickness>
        <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_ButtonBackground_MouseOver" 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>
        <LinearGradientBrush x:Key="TileView_ButtonBackground_Pressed" EndPoint="0.5,1" StartPoint="0.5,0">
            <GradientStop Color="#FFFECE95" Offset="0"/>
            <GradientStop Color="#FFFEB407" Offset="1"/>
            <GradientStop Color="#FFFEBB6E" Offset="0.517"/>
            <GradientStop Color="#FFE78318" Offset="0.539"/>
        </LinearGradientBrush>
        <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 Background="Transparent">
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="FocusStates">
                                    <VisualState x:Name="Focused"/>
                                    <VisualState x:Name="Unfocused"/>
                                </VisualStateGroup>
                                <VisualStateGroup x:Name="CommonStates">
                                    <VisualState x:Name="Disabled"/>
                                    <VisualState x:Name="Normal"/>
                                    <VisualState x:Name="MouseOver">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="RestoreIcon">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource TileView_ButtonBackground_MouseOver}"/>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="CollapseIcon">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource TileView_ButtonBackground_MouseOver}"/>
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="Pressed">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="RestoreIcon">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource TileView_ButtonBackground_Pressed}"/>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="CollapseIcon">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource TileView_ButtonBackground_Pressed}"/>
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                                <VisualStateGroup x:Name="CheckStates">
                                    <VisualState x:Name="Checked">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="Restore">
                                                <DiscreteObjectKeyFrame KeyTime="0">
                                                    <DiscreteObjectKeyFrame.Value>
                                                        <Visibility>Collapsed</Visibility>
                                                    </DiscreteObjectKeyFrame.Value>
                                                </DiscreteObjectKeyFrame>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="Collapse">
                                                <DiscreteObjectKeyFrame KeyTime="0">
                                                    <DiscreteObjectKeyFrame.Value>
                                                        <Visibility>Visible</Visibility>
                                                    </DiscreteObjectKeyFrame.Value>
                                                </DiscreteObjectKeyFrame>
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="Unchecked">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="Restore">
                                                <DiscreteObjectKeyFrame KeyTime="0">
                                                    <DiscreteObjectKeyFrame.Value>
                                                        <Visibility>Visible</Visibility>
                                                    </DiscreteObjectKeyFrame.Value>
                                                </DiscreteObjectKeyFrame>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="Collapse">
                                                <DiscreteObjectKeyFrame KeyTime="0">
                                                    <DiscreteObjectKeyFrame.Value>
                                                        <Visibility>Collapsed</Visibility>
                                                    </DiscreteObjectKeyFrame.Value>
                                                </DiscreteObjectKeyFrame>
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="Indeterminate"/>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                            <Grid x:Name="Restore" Background="Transparent" Height="13" Width="13">
                                <ToolTipService.ToolTip>
                                    <ToolTip telerik:LocalizationManager.ResourceKey="TileViewItemMaximizeText"/>
                                </ToolTipService.ToolTip>
                                <Path x:Name="RestoreIcon" Data="M2,5 L2,8.9999999 6,8.9999999 6,5 z M0,3 L8,3 8,5 8,8.9999999 8,11 0,11 0,8.9999999 0,5 z M3,0 L11,0 11,2 11,8.9999999 9,8.9999999 9,2 3,2 z" Fill="{StaticResource TileView_ButtonBackground}" Margin="1" Stretch="Fill" Stroke="{x:Null}" StrokeThickness="0.5"/>
                                <Path Data="M1,12 L9,12 9,13 1,13 z M3.9999999,7 L3.9999999,9 6,9 6,7 z M3,6 L7,6 7,7 7,9 7,10 3,10 3,9 3,7 z M0,4 L1,4 1,12 0,12 z M12,1 L13,1 13,10 12,10 z M3,1 L3.9999999,1 3.9999999,3 10,3 10,4 10,10 12,10 12,11 10,11 10,12 9,12 9,4 1,4 1,3 3,3 z M3.9999999,0 L12,0 12,1 3.9999999,1 z" Fill="{StaticResource TileView_ButtonOuterBorder}" Stretch="Fill" Stroke="{x:Null}" StrokeThickness="0.5"/>
                            </Grid>
                            <Grid x:Name="Collapse" Background="Transparent" Height="5" Visibility="Collapsed" Width="12">
                                <ToolTipService.ToolTip>
                                    <ToolTip telerik:LocalizationManager.ResourceKey="TileViewItemMinimizeText"/>
                                </ToolTipService.ToolTip>
                                <Rectangle Fill="{StaticResource TileView_ButtonOuterBorder}" Stroke="{x:Null}" StrokeThickness="0.5"/>
                                <Rectangle x:Name="CollapseIcon" Fill="{StaticResource TileView_ButtonBackground}" Margin="1" Stroke="{x:Null}" StrokeThickness="0.5"/>
                            </Grid>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
        <CornerRadius x:Key="TileView_HeaderBorder_CornerRadius">1</CornerRadius>
        <SolidColorBrush x:Key="TileView_HeaderBorder_HorizontalSplitterBackground" Color="#FFBFBFBF"/>
        <LinearGradientBrush x:Key="TileView_HeaderBorder_HorizontalSplitterOpacityMask" EndPoint="0.5,1" StartPoint="0.5,0">
            <GradientStop Color="Black" Offset="0"/>
            <GradientStop Offset="1"/>
        </LinearGradientBrush>
        <Style x:Key="TileViewItemHeaderStyle1" 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 Duration="0" Storyboard.TargetProperty="IsChecked" Storyboard.TargetName="MaximizeToggleButton">
                                                <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.TargetProperty="IsChecked" Storyboard.TargetName="MaximizeToggleButton">
                                                <DiscreteObjectKeyFrame KeyTime="0">
                                                    <DiscreteObjectKeyFrame.Value>
                                                        <System:Boolean>False</System:Boolean>
                                                    </DiscreteObjectKeyFrame.Value>
                                                </DiscreteObjectKeyFrame>
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                            <StackPanel>
                                <Border BorderBrush="{StaticResource TileView_HeaderBorder}" BorderThickness="{StaticResource TileView_HeaderBorder_Thickness}" Background="{TemplateBinding Background}" CornerRadius="{StaticResource TileView_HeaderBorder_CornerRadius}" Padding="10 0 7 0">
                                    <Grid MinHeight="28">
                                        <Border x:Name="GripBarElement" Background="Transparent">
                                            <ContentPresenter x:Name="HeaderElement" ContentTemplate="{TemplateBinding HeaderTemplate}" HorizontalAlignment="Left" Margin="0,0,10,0" VerticalAlignment="Center"/>
                                        </Border>
                                        <telerik:RadToggleButton x:Name="MaximizeToggleButton" Command="Telerik_Windows_Controls_TileView:TileViewCommands.ToggleTileState" Style="{StaticResource maximizeToggleStyle}" Visibility="Collapsed"/>
                                    </Grid>
                                </Border>
                                <Border x:Name="Splitter" BorderThickness="0" Background="{StaticResource TileView_HeaderBorder_HorizontalSplitterBackground}" Height="4" OpacityMask="{StaticResource TileView_HeaderBorder_HorizontalSplitterOpacityMask}"/>
                            </StackPanel>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
        <Style x:Key="RadTileViewItemStyle1" TargetType="telerik:RadTileViewItem">
            <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
            <Setter Property="VerticalContentAlignment" Value="Stretch"/>
            <Setter Property="Background" Value="{StaticResource TileView_Background}"/>
            <Setter Property="BorderBrush" Value="{StaticResource TileView_OuterBorder}"/>
            <Setter Property="BorderThickness" Value="1"/>
            <Setter Property="Padding" Value="7"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="telerik:RadTileViewItem">
                        <Grid>
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="CommonStates">
                                    <VisualState x:Name="Normal"/>
                                    <VisualState x:Name="Disabled">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="DisabledVisual">
                                                <DiscreteObjectKeyFrame KeyTime="0">
                                                    <DiscreteObjectKeyFrame.Value>
                                                        <Visibility>Visible</Visibility>
                                                    </DiscreteObjectKeyFrame.Value>
                                                </DiscreteObjectKeyFrame>
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="MouseOver"/>
                                </VisualStateGroup>
                                <VisualStateGroup x:Name="SelectionStates">
                                    <VisualState x:Name="Selected">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="SelectedItem">
                                                <DiscreteObjectKeyFrame KeyTime="0">
                                                    <DiscreteObjectKeyFrame.Value>
                                                        <Visibility>Visible</Visibility>
                                                    </DiscreteObjectKeyFrame.Value>
                                                </DiscreteObjectKeyFrame>
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="Unselected"/>
                                </VisualStateGroup>
                                <VisualStateGroup x:Name="MouseOverDraggingStates">
                                    <VisualState x:Name="MouseOverDragging">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="MouseOverBorder">
                                                <DiscreteObjectKeyFrame KeyTime="0">
                                                    <DiscreteObjectKeyFrame.Value>
                                                        <Visibility>Visible</Visibility>
                                                    </DiscreteObjectKeyFrame.Value>
                                                </DiscreteObjectKeyFrame>
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="MouseNotOverDragging"/>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                            <Border x:Name="outerBorder" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" CornerRadius="{StaticResource TileView_OuterBorder_CornerRadius}" Margin="{TemplateBinding Padding}">
                                <Border x:Name="outerContainer" BorderBrush="{StaticResource TileView_InneBorder}" BorderThickness="{StaticResource TileView_InneBorder_Thickness}" Background="Transparent" CornerRadius="{StaticResource TileView_InneBorder_CornerRadius}">
                                    <Grid>
                                        <Grid.RowDefinitions>
                                            <RowDefinition Height="Auto"/>
                                            <RowDefinition Height="*"/>
                                        </Grid.RowDefinitions>
                                        <Telerik_Windows_Controls_TileView:TileViewItemHeader x:Name="HeaderPart" HeaderTemplate="{TemplateBinding HeaderTemplate}" Style="{StaticResource TileViewItemHeaderStyle1}"/>
                                        <Grid Background="Transparent" Grid.Row="1">
                                            <ContentPresenter x:Name="ContentElement" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Grid.Row="1" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                                        </Grid>
                                        <Rectangle x:Name="DisabledVisual" Fill="{StaticResource DisabledBrush}" RadiusY="4" RadiusX="4" Grid.RowSpan="2" Visibility="Collapsed"/>
                                    </Grid>
                                </Border>
                            </Border>
                            <Grid x:Name="SelectedItem" Margin="-1" Visibility="Collapsed">
                                <Border BorderBrush="{StaticResource ControlOuterBorder_Selected}" BorderThickness="2" CornerRadius="{StaticResource TileView_OuterBorder_CornerRadius}" Margin="{TemplateBinding Padding}"/>
                            </Grid>
                            <Border x:Name="MouseOverBorder" BorderBrush="{StaticResource TileView_MaximizeArea_BorderBrush}" BorderThickness="{StaticResource TileView_MaximizeArea_BorderThickness}" Background="{StaticResource TileView_MaximizeArea_Background}" Opacity="0.5" Visibility="Collapsed"/>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </UserControl.Resources>
     
    <Grid x:Name="LayoutRoot">
     
        <telerik:RadTileView MinimizedItemsPosition="Bottom">
            <!-- This TileItem is the one that uses the new Style-->
            <telerik:RadTileViewItem  TileState="Maximized" Header="Item1" Style="{StaticResource RadTileViewItemStyle1}">
                <TextBlock Text="Item1 Content"/>
            </telerik:RadTileViewItem>
             
            <!-- You will need to use the new style in each of your TileItems that you want to hide the button-->
            <telerik:RadTileViewItem IsEnabled="False" Header="Item2">
                <TextBlock Text="Item2 Content"/>
            </telerik:RadTileViewItem>
            <telerik:RadTileViewItem Header="Item3" >
                <TextBlock Text="Item3 Content"/>
            </telerik:RadTileViewItem>
        </telerik:RadTileView>
     
    </Grid>


    I hope this gives you what you are looking for, Good Luck!
    Lancelot
  3. DevCraft banner
  4. Jonam
    Jonam avatar
    19 posts
    Member since:
    Aug 2010

    Posted 12 Jun 2012 Link to this post

    Hallo Lancelot,

    thank you for replyen. The solution is corrects and works only when i use your style i lose the metro interface style. I don't have access to blend. Could you give me the same style as above only then in the metro interface style.

    thank you ver much!
  5. Answer
    Lancelot
    Lancelot avatar
    251 posts
    Member since:
    Jul 2012

    Posted 12 Jun 2012 Link to this post

    Hi Jonam,

    Your request is just in time, because telerik released a new version of the RadControls a couple days ago that allows implicit styling. Implicit styles let you use the Metro theme in your buttonless style and give you the effect that you want!

    If we were to set the theme to Metro in the RadTileView, it would automatically override the style we created that hides the button. So up until now, you had to choose between the default theme with the hidden button OR the Metro theme with a visible button.

    This link will bring you to the documentation on how to use implicit styling. Take an little time to learn how it works, it will prove to be very useful for you in the future since you plan on integrating your own styles with telerik themes. I can't just write you a block of code that you can plug in, because as you'll see in the documentation, you need to merge the dictionaries to get your own custom theme.

    Good Luck and let me know how it goes!
    Lancelot
  6. Jonam
    Jonam avatar
    19 posts
    Member since:
    Aug 2010

    Posted 15 Jun 2012 Link to this post

    Hello Lancelot,

    thank you for your reply. the implicit styling is a nice feature. I am almost there. I now have the tileview in metro style with the toggle button invisible. But now when i double click on the header the radtileitem still switches state. How can i disable this behaviour without totally disabling the content on the radtileviewitem?

    I am looking forward to your reply!

    kind regards

    Jonam
  7. Answer
    Lancelot
    Lancelot avatar
    251 posts
    Member since:
    Jul 2012

    Posted 15 Jun 2012 Link to this post

    Hi Jonam,

    If you want to disable the tile's ability to dock or maximize, you can just set the MaximizeMode property. This link will bring you to the documentation to learn more. Basically, by setting that property to Zero, you force the tile to stay in the "Restored" state.

    In your case try this...

    <telerik:RadTileView x:Name="JonamTile1" MaximizeMode="Zero" >  
          <tile items here>
          <tile items here>
          <tile items here>
    </telerik:RadTileView>


    I hope this helps, if it does, please mark the post as "Answer" so that other community members can see you've found a solution. If it doesnt work, let me know and I'll find another way to make it happen.

    Good Luck!
    Lancelot
  8. Jonam
    Jonam avatar
    19 posts
    Member since:
    Aug 2010

    Posted 15 Jun 2012 Link to this post

    Mission accomplished! thank you for your help and patience!
  9. Andrew
    Andrew avatar
    104 posts
    Member since:
    May 2008

    Posted 09 Oct 2012 Link to this post

    I'm trying to use implicit styles to hide the maximize button as well. I have the following code in my App.xaml file:

    <Style x:Key="CustomStyle" TargetType="telerikNavigation:RadTileViewItem" BasedOn="{StaticResource RadTileViewItemStyle}">
        <Setter Property="?????????" Value="?????????" />
    </Style>

    What exactly do I need to set Property and Value to in order to hide that button.

    Thanks.
  10. Zarko
    Admin
    Zarko avatar
    755 posts

    Posted 12 Oct 2012 Link to this post

    Hello Andrew,
    Unfortunately there's no property to hide the maximize button and that's why you'll have to edit the HeaderStyle of the RadTileViewItems with something like this:
    <LinearGradientBrush x:Key="TileView_HeaderBackground" EndPoint="0.5,1" StartPoint="0.5,0">
        <GradientStop Color="#FFF6F6F6" />
        <GradientStop Color="#FFD2D2D2" Offset="1" />
    </LinearGradientBrush>
    <SolidColorBrush x:Key="TileView_HeaderBorder" Color="#FFFFFFFF" />
    <Thickness x:Key="TileView_HeaderBorder_Thickness">0 0 0 1</Thickness>
    <CornerRadius x:Key="TileView_HeaderBorder_CornerRadius">2</CornerRadius>
    <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" />
    ....
    <Style TargetType="telerik:RadTileViewItem">
        <Setter Property="HeaderStyle">
            <Setter.Value>
                <Style TargetType="tileView:TileViewItemHeader">
                    <Setter Property="Background" Value="{StaticResource TileView_HeaderBackground}" />
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="tileView:TileViewItemHeader">
                                <Grid>
                                    <StackPanel>
                                        <Border Background="{TemplateBinding Background}"
                                BorderBrush="{StaticResource TileView_HeaderBorder}"
                                BorderThickness="{StaticResource TileView_HeaderBorder_Thickness}"
                                CornerRadius="{StaticResource TileView_HeaderBorder_CornerRadius}"
                                Padding="10 0 7 0">
                                            <Grid MinHeight="28">
                                                <Border x:Name="GripBarElement" Background="Transparent">
                                                    <ContentPresenter x:Name="HeaderElement"
                                                        Margin="0,0,10,0"
                                                        HorizontalAlignment="Left"
                                                        VerticalAlignment="Center"
                                                        ContentTemplate="{TemplateBinding HeaderTemplate}" />
                                                </Border>
                                            </Grid>
                                    </Border>
                                        <Border x:Name="Splitter"
                                                Height="4"
                                                Background="{StaticResource TileView_HeaderBorder_HorizontalSplitterBackground}"
                                                BorderThickness="0"
                                                OpacityMask="{StaticResource TileView_HeaderBorder_HorizontalSplitterOpacityMask}" />
                                    </StackPanel>
                                </Grid>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>
            </Setter.Value>
        </Setter>
    </Style>
    If you have further questions please feel free to ask.

    Greetings,
    Zarko
    the Telerik team

    Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

Back to Top
DevCraft banner