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

Setting different tileview header colors

4 Answers 191 Views

TileView

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

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

answered on 23 Jun 2010, 02:40 PM

wpfapplication1.zip

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

answered on 11 Nov 2010, 11:15 AM

tele2.png

tile1.png

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

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

answered on 13 Jan 2012, 10:22 AM

</LinearGradientBrush>

</LinearGradientBrush>

</LinearGradientBrush>

</LinearGradientBrush>

</LinearGradientBrush>

</LinearGradientBrush>

</LinearGradientBrush>

<Setter.Value>

<Grid>

<VisualStateManager.VisualStateGroups>

</ObjectAnimationUsingKeyFrames>

</Storyboard>

</VisualState>

</VisualStateGroup>

</VisualStateManager.VisualStateGroups>

<Grid>

<Grid.RowDefinitions>

</Grid.RowDefinitions>

</Border>

<ToggleButton.Template>

<Grid>

<VisualStateManager.VisualStateGroups>

</VisualStateGroup>

</ObjectAnimationUsingKeyFrames>

</ObjectAnimationUsingKeyFrames>

</ObjectAnimationUsingKeyFrames>

</ObjectAnimationUsingKeyFrames>

</ObjectAnimationUsingKeyFrames>

</ObjectAnimationUsingKeyFrames>

</Storyboard>

</VisualState>

</ObjectAnimationUsingKeyFrames>

</ObjectAnimationUsingKeyFrames>

</ObjectAnimationUsingKeyFrames>

</ObjectAnimationUsingKeyFrames>

</ObjectAnimationUsingKeyFrames>

</ObjectAnimationUsingKeyFrames>

</Storyboard>

</VisualState>

</VisualStateGroup>

</ObjectAnimationUsingKeyFrames>

</ObjectAnimationUsingKeyFrames>

</Storyboard>

</VisualState>

</VisualStateGroup>

</VisualStateManager.VisualStateGroups>

</Grid>

</Grid>

</ControlTemplate>

</ToggleButton.Template>

</ToggleButton>

</Grid>

</Border>

</Grid>

</Border>

</Grid>

</ControlTemplate>

</Setter.Value>

</Setter>

</Style>