Setting different tileview header colors

5 posts, 0 answers
  1. Ben Larson
    Ben Larson avatar
    1 posts
    Member since:
    Jan 2008

    Posted 22 Jun 2010 Link to this post

    I saw a different thread on this about a year ago, and there was discussion that this functionality may be coming in future releases.  Is this available now?  If not, how can I implement this in my wpf application?  I found an example in the forums, but when I try to use it, I get the following error:

    Cannot animate the 'Visibility' property on a 'System.Windows.Controls.Grid' using a 'System.Windows.Media.Animation.ObjectAnimationUsingKeyFrames'.

    It shows the header in a different color when it first comes up, but I get the error when I try to expand one of the tiles.

    Here's the style I tried to use:

            <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> 
            <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"/> 
            <Style x:Key="RadTileViewItemStyle1" TargetType="telerik: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="telerik: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="{StaticResource RadTileView_HeaderBackground}" BorderBrush="{StaticResource RadTileView_HeaderBorder}" 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"
                                                    <ToggleButton.Template> 
                                                        <ControlTemplate 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> 
                                                    </ToggleButton.Template> 
                                                </ToggleButton> 
                                            </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> 




  2. Dimitrina
    Admin
    Dimitrina avatar
    442 posts

    Posted 23 Jun 2010 Link to this post

    Hi Ben,

    I reviewed your code and I noticed that the custom style for the RadTileView control  which you used is for SilverLight application. Please find attached a project with a custom style for the RadTileView for WPF aplication.

    If you have further questions please do not hesitate to ask us.
    I hope this will help you.


    Best wishes,
    Dimitrina
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  3. UI for WPF is Visual Studio 2017 Ready
  4. phuoc tran ngoc
    phuoc tran ngoc avatar
    9 posts
    Member since:
    Nov 2009

    Posted 11 Nov 2010 Link to this post

    Hi guy

    I have two problems that drive me crazy:
    1   I'm trying to customize the header color of each tileview_Item.
    for example: I have 4 items, every item header has a color.
    2 When items are minimized, all items are same size. Now I want there is a item that is alway bigger than orther.
    you can see 2 screenshot below. I'm very appreciate

  5. Kiril Stanoev
    Admin
    Kiril Stanoev avatar
    1512 posts

    Posted 11 Nov 2010 Link to this post

    Hi phuoc tran ngoc,

    1. If you want to apply different colors to the TileViewItem headers, you will have to create 4 different styles for each TileViewItem. More information on how to edit the style of a Telerik control you can find here.

    2. Are you talking about this feature request? If so, then this scenario is not yet supported. You can track and vote for the PITS item to increase its priority. This feature will be implemented by the end of Q1 2011.

    Let me know if you need further assistance.

    Kind regards,
    Kiril Stanoev
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  6. Akber
    Akber avatar
    1 posts
    Member since:
    Jan 2012

    Posted 13 Jan 2012 Link to this post

     <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> 
            <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"/> 
            <Style x:Key="RadTileViewItemStyle1" TargetType="telerik: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="telerik: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="{StaticResource RadTileView_HeaderBackground}" BorderBrush="{StaticResource RadTileView_HeaderBorder}" 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"
                                                    <ToggleButton.Template> 
                                                        <ControlTemplate 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> 
                                                    </ToggleButton.Template> 
                                                </ToggleButton> 
                                            </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> 
Back to Top
UI for WPF is Visual Studio 2017 Ready