This is a migrated thread and some comments may be shown as answers.

Setting different tileview header colors

4 Answers 94 Views
TileView
This is a migrated thread and some comments may be shown as answers.
Ben Larson
Top achievements
Rank 1
Ben Larson asked on 22 Jun 2010, 05:04 PM
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> 




4 Answers, 1 is accepted

Sort by
0
Dimitrina
Telerik team
answered on 23 Jun 2010, 02:40 PM
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
0
phuoc tran ngoc
Top achievements
Rank 1
answered on 11 Nov 2010, 11:15 AM
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

0
Kiril Stanoev
Telerik team
answered on 11 Nov 2010, 01:56 PM
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
0
Akber
Top achievements
Rank 1
answered on 13 Jan 2012, 10:22 AM
 <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> 
Tags
TileView
Asked by
Ben Larson
Top achievements
Rank 1
Answers by
Dimitrina
Telerik team
phuoc tran ngoc
Top achievements
Rank 1
Kiril Stanoev
Telerik team
Akber
Top achievements
Rank 1
Share this question
or