Dynamically Setting Background Colour to RadTileViewItem Header

[Naren]

I am creating RadTileView at runtime...It have variable number of RadTileViewItems in it depending on the situation.....
I want to give green color to the header of each RadTileViewItem.


eg.  My scenario is like this :-
RadTileView MyTileView = new RadTileView();
for (int i = 0; i < Count; i++)
{
RadTileViewItem myTileViewItem = new RadTileViewItem();
myTileViewItem.Header="SomeDynamicText";
MyTileView.Items.Add(myTileViewItem);
}

I want to give color to headers as shown in attached Image
Can u provide the solution for this.....

[Naren]

CAn anyone reply for this.....
Also I want to change the background colour of tile view window to green .....and the header color to green as well.

[Miro Miroslavov]

Hello Naren,

Can you please find the attached example project. You can change the background colour of the tiles by simple changing the Background property. But for the Header background colour, you should edit the control template and change the colour there.
If you have further questions regarding TileView colours please ask us.

All the best,
Miro Miroslavov
the Telerik team

[Naren]

Hi Miro Miroslavov ,
The solution you provided show customization for static tile view(Tile view declared in Xaml).
I want customization for tile view created at runtime in code........

I am creating RadTileView at runtime as follows

public MainPage()
        {
            // Required to initialize variables
            InitializeComponent();
           
RadTileView myTView = new RadTileView();

           RadTileViewItem myTileViewItem = new RadTileViewItem();
            myTileViewItem.Header = "My Header";
myTView.Items.Add(myTileViewItem);
        }
How can i set header background color of myTileViewItem to Green in code .

can you  provide solution for above...
Thanks in advance

[Zarko]

Hi Naren,

 Please take a look at this forum post.
If you have further questions feel free to ask.

Greetings,

Zarko

the Telerik team

[ss]

how to make the radtileviewitem as bold from code behind

[Zarko]

Hello Kss,
Could you please explain us what exactly do you mean by "make the radtileviewitem as bold"? Do you want to bold the text in the header or want to "focus" the RadTileViewItem? If you want to "focus" an item you can try to use the RadTileView selection.
I've created a sample project with the RadTileView selection so could you please examine it and if you need further assistance please feel free to ask.

Kind regards,
Zarko
the Telerik team

[ss]

hi,

in atached project i am getting two error. one is tileview dont have selectedindex and another one is tileview dont have isselectionenabled properties.

and now my requirement is changed.now i need to make the header text asa bold from styles. the below style am using now.in that style in where i need to set the header text asa  bold.please help me on this

 

 

 

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

 

 

 

 

<GradientStop Color="#FF282828" />

 

 

 

 

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

 

 

 

 

</LinearGradientBrush>

 

 

 

 

<SolidColorBrush x:Key="TileView_OuterBorder" Color="#FF848484" />

 

 

 

 

<SolidColorBrush x:Key="TileView_InneBorder" Color="#FFFFFFFF" />

 

 

 

 

<Thickness x:Key="TileView_InneBorder_Thickness">1</Thickness>

 

 

 

 

<SolidColorBrush x:Key="TileView_HeaderBorder" Color="#FFFFFFFF" />

 

 

 

 

<Thickness x:Key="TileView_HeaderBorder_Thickness">0 0 0 1</Thickness>

 

 

 

 

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

 

 

 

 

<GradientStop Color="#FFF6F6F6" />

 

 

 

 

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

 

 

 

 

</LinearGradientBrush>

 

 

 

 

<SolidColorBrush x:Key="TileView_ButtonOuterBorder" Color="#FFFFFFFF" />

 

 

 

 

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

 

 

 

 

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

 

 

 

 

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

 

 

 

 

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

 

 

 

 

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

 

 

 

 

</LinearGradientBrush>

 

 

 

 

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

 

 

 

 

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

 

 

 

 

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

 

 

 

 

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

 

 

 

 

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

 

 

 

 

</LinearGradientBrush>

 

 

 

 

<CornerRadius x:Key="TileView_HeaderBorder_CornerRadius">5</CornerRadius>

 

 

 

 

<SolidColorBrush x:Key="TileView_HeaderBorder_HorizontalSplitterBackground" Color="White" />

 

 

 

 

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

 

 

 

 

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

 

 

 

 

<GradientStop Offset="1" />

 

 

 

 

</LinearGradientBrush>

 

 

 

 

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

 

 

 

 

<CornerRadius x:Key="TileView_InneBorder_CornerRadius">5</CornerRadius>

 

 

 

 

<CornerRadius x:Key="TileView_OuterBorder_CornerRadius">5</CornerRadius>

 

 

 

 

<SolidColorBrush x:Key="ControlOuterBorder_Selected" Color="#FFFFC92B" />

 

 

 

 

<Style x:Key="maximizeToggleStyle" TargetType="telerik:RadToggleButton">

 

 

 

 

<Setter Property="VerticalAlignment" Value="Center" />

 

 

 

 

<Setter Property="HorizontalAlignment" Value="Right" />

 

 

 

 

<Setter Property="Width" Value="17" />

 

 

 

 

<Setter Property="Height" Value="17" />

 

 

 

 

<Setter Property="Template">

 

 

 

 

<Setter.Value>

 

 

 

 

<ControlTemplate TargetType="telerik:RadToggleButton">

 

 

 

 

<Grid>

 

 

 

 

<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="RestoreIcon" Storyboard.TargetProperty="Stretch">

 

 

 

 

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

 

 

 

 

</ObjectAnimationUsingKeyFrames>

 

 

 

 

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

 

 

 

 

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

 

 

 

 

</ObjectAnimationUsingKeyFrames>

 

 

 

 

</Storyboard>

 

 

 

 

</VisualState>

 

 

 

 

<VisualState x:Name="Pressed">

 

 

 

 

<Storyboard>

 

 

 

 

<ObjectAnimationUsingKeyFrames Storyboard.TargetName="RestoreIcon" Storyboard.TargetProperty="Stretch">

 

 

 

 

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

 

 

 

 

</ObjectAnimationUsingKeyFrames>

 

 

 

 

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

 

 

 

 

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

 

 

 

 

</ObjectAnimationUsingKeyFrames>

 

 

 

 

</Storyboard>

 

 

 

 

</VisualState>

 

 

 

 

</VisualStateGroup>

 

 

 

 

<VisualStateGroup x:Name="CheckStates">

 

 

 

 

<VisualState x:Name="Checked">

 

 

 

 

<Storyboard>

 

 

 

 

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

 

 

 

 

<DiscreteObjectKeyFrame KeyTime="0">

 

 

 

 

<DiscreteObjectKeyFrame.Value>

 

 

 

 

<Visibility>Collapsed</Visibility>

 

 

 

 

</DiscreteObjectKeyFrame.Value>

 

 

 

 

</DiscreteObjectKeyFrame>

 

 

 

 

</ObjectAnimationUsingKeyFrames>

 

 

 

 

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

 

 

 

 

<DiscreteObjectKeyFrame KeyTime="0">

 

 

 

 

<DiscreteObjectKeyFrame.Value>

 

 

 

 

<Visibility>Visible</Visibility>

 

 

 

 

</DiscreteObjectKeyFrame.Value>

 

 

 

 

</DiscreteObjectKeyFrame>

 

 

 

 

</ObjectAnimationUsingKeyFrames>

 

 

 

 

</Storyboard>

 

 

 

 

</VisualState>

 

 

 

 

<VisualState x:Name="Unchecked">

 

 

 

 

<Storyboard>

 

 

 

 

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

 

 

 

 

<DiscreteObjectKeyFrame KeyTime="0">

 

 

 

 

<DiscreteObjectKeyFrame.Value>

 

 

 

 

<Visibility>Visible</Visibility>

 

 

 

 

</DiscreteObjectKeyFrame.Value>

 

 

 

 

</DiscreteObjectKeyFrame>

 

 

 

 

</ObjectAnimationUsingKeyFrames>

 

 

 

 

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

 

 

 

 

<DiscreteObjectKeyFrame KeyTime="0">

 

 

 

 

<DiscreteObjectKeyFrame.Value>

 

 

 

 

<Visibility>Collapsed</Visibility>

 

 

 

 

</DiscreteObjectKeyFrame.Value>

 

 

 

 

</DiscreteObjectKeyFrame>

 

 

 

 

</ObjectAnimationUsingKeyFrames>

 

 

 

 

</Storyboard>

 

 

 

 

</VisualState>

 

 

 

 

<VisualState x:Name="Indeterminate" />

 

 

 

 

</VisualStateGroup>

 

 

 

 

</VisualStateManager.VisualStateGroups>

 

 

 

 

<Grid x:Name="Restore" Background="Transparent" Height="13" Width="13">

 

 

 

 

<ToolTipService.ToolTip>

 

 

 

 

<ToolTip telerik:LocalizationManager.ResourceKey="TileViewItemMaximizeText" />

 

 

 

 

</ToolTipService.ToolTip>

 

 

 

 

<Path x:Name="RestoreIcon" Data="M2,5 L2,8.9999999 6,8.9999999 6,5 z M0,3 L8,3 8,5 8,8.9999999 8,11 0,11 0,8.9999999 0,5 z M3,0 L11,0 11,2 11,8.9999999 9,8.9999999 9,2 3,2 z"

 

 

 

Fill="{StaticResource TileView_ButtonBackground}" Margin="1" Stretch="Fill" Stroke="{x:Null}" StrokeThickness="0.5" />

 

 

 

 

<Path Data="M1,12 L9,12 9,13 1,13 z M3.9999999,7 L3.9999999,9 6,9 6,7 z M3,6 L7,6 7,7 7,9 7,10 3,10 3,9 3,7 z M0,4 L1,4 1,12 0,12 z M12,1 L13,1 13,10 12,10 z M3,1 L3.9999999,1 3.9999999,3 10,3 10,4 10,10 12,10 12,11 10,11 10,12 9,12 9,4 1,4 1,3 3,3 z M3.9999999,0 L12,0 12,1 3.9999999,1 z"

 

 

 

Fill="{StaticResource TileView_ButtonOuterBorder}" Stretch="Fill" Stroke="{x:Null}" StrokeThickness="0.5" />

 

 

 

 

</Grid>

 

 

 

 

<Grid x:Name="Collapse" Background="Transparent" Height="5" Visibility="Collapsed" Width="12">

 

 

 

 

<ToolTipService.ToolTip>

 

 

 

 

<ToolTip telerik:LocalizationManager.ResourceKey="TileViewItemMinimizeText" />

 

 

 

 

</ToolTipService.ToolTip>

 

 

 

 

<Rectangle Fill="{StaticResource TileView_ButtonOuterBorder}" Stroke="{x:Null}" StrokeThickness="0.5" />

 

 

 

 

<Rectangle x:Name="CollapseIcon" Fill="{StaticResource TileView_ButtonBackground}" Margin="1" Stroke="{x:Null}" StrokeThickness="0.5" />

 

 

 

 

</Grid>

 

 

 

 

</Grid>

 

 

 

 

</ControlTemplate>

 

 

 

 

</Setter.Value>

 

 

 

 

</Setter>

 

 

 

 

</Style>

 

 

 

 

<Style TargetType="telerik:RadTileViewItem" x:Name="RadTileViewItemStyle">

 

 

 

 

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

 

 

 

 

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

 

 

 

 

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

 

 

 

 

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

 

 

 

 

<Setter Property="BorderThickness" Value="1" />

 

 

 

 

<Setter Property="TileState" Value="Restored" />

 

 

 

 

<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>

 

 

 

 

<VisualStateGroup x:Name="TileStates">

 

 

 

 

<VisualState x:Name="Maximized">

 

 

 

 

<Storyboard>

 

 

 

 

<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="MaximizeToggleButton" Storyboard.TargetProperty="IsChecked">

 

 

 

 

<DiscreteObjectKeyFrame KeyTime="0">

 

 

 

 

<DiscreteObjectKeyFrame.Value>

 

 

 

 

<System:Boolean>True</System:Boolean>

 

 

 

 

</DiscreteObjectKeyFrame.Value>

 

 

 

 

</DiscreteObjectKeyFrame>

 

 

 

 

</ObjectAnimationUsingKeyFrames>

 

 

 

 

</Storyboard>

 

 

 

 

</VisualState>

 

 

 

 

<VisualState x:Name="Restored">

 

 

 

 

<Storyboard>

 

 

 

 

<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="MaximizeToggleButton" Storyboard.TargetProperty="IsChecked">

 

 

 

 

<DiscreteObjectKeyFrame KeyTime="0">

 

 

 

 

<DiscreteObjectKeyFrame.Value>

 

 

 

 

<System:Boolean>False</System:Boolean>

 

 

 

 

</DiscreteObjectKeyFrame.Value>

 

 

 

 

</DiscreteObjectKeyFrame>

 

 

 

 

</ObjectAnimationUsingKeyFrames>

 

 

 

 

</Storyboard>

 

 

 

 

</VisualState>

 

 

 

 

</VisualStateGroup>

 

 

 

 

<VisualStateGroup x:Name="SelectionStates">

 

 

 

 

<VisualState x:Name="Selected">

 

 

 

 

<Storyboard>

 

 

 

 

<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="SelectedItem" Storyboard.TargetProperty="Visibility">

 

 

 

 

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

 

 

 

 

</ObjectAnimationUsingKeyFrames>

 

 

 

 

</Storyboard>

 

 

 

 

</VisualState>

 

 

 

 

<VisualState x:Name="Unselected" />

 

 

 

 

</VisualStateGroup>

 

 

 

 

</VisualStateManager.VisualStateGroups>

 

 

 

 

<Border x:Name="outerBorder" Margin="{TemplateBinding Padding}" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}"

 

 

 

BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="{StaticResource TileView_OuterBorder_CornerRadius}">

 

 

 

 

<Border x:Name="outerContainer" Background="Transparent" BorderBrush="{StaticResource TileView_InneBorder}" BorderThickness="{StaticResource TileView_InneBorder_Thickness}"

 

 

 

CornerRadius="{StaticResource TileView_InneBorder_CornerRadius}">

 

 

 

 

<Grid>

 

 

 

 

<Grid.RowDefinitions>

 

 

 

 

<RowDefinition Height="Auto" />

 

 

 

 

<RowDefinition Height="*" />

 

 

 

 

</Grid.RowDefinitions>

 

 

 

 

<StackPanel Height="38" >

 

 

 

 

<Border Height="38" BorderBrush="{StaticResource TileView_HeaderBorder}" BorderThickness="{StaticResource TileView_HeaderBorder_Thickness}"

 

 

 

CornerRadius="{StaticResource TileView_HeaderBorder_CornerRadius}" Padding="10 0 7 0">

 

 

 

 

<Border.Background>

 

 

 

 

<LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">

 

 

 

 

<GradientStop Color="#FF3871B9" />

 

 

 

 

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

 

 

 

 

</LinearGradientBrush>

 

 

 

 

</Border.Background>

 

 

 

 

<Grid MinHeight="28">

 

 

 

 

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

 

 

 

 

<ContentPresenter x:Name="HeaderElement" Margin="0,0,10,0" HorizontalAlignment="Left" VerticalAlignment="Center" ContentTemplate="{TemplateBinding HeaderTemplate}">

 

 

 

 

<ContentPresenter.OpacityMask>

 

 

 

 

<LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">

 

 

 

 

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

 

 

 

 

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

 

 

 

 

</LinearGradientBrush>

 

 

 

 

</ContentPresenter.OpacityMask>

 

 

 

 

</ContentPresenter>

 

 

 

 

</Border>

 

 

 

 

<telerik:RadToggleButton x:Name="MaximizeToggleButton" Command="tileView:TileViewCommands.ToggleTileState" Style="{StaticResource maximizeToggleStyle}" />

 

 

 

 

</Grid>

 

 

 

 

</Border>

 

 

 

 

<Border x:Name="Splitter" Height="4" Background="{StaticResource TileView_HeaderBorder_HorizontalSplitterBackground}"

 

 

 

BorderThickness="0" OpacityMask="{StaticResource TileView_HeaderBorder_HorizontalSplitterOpacityMask}" />

 

 

 

 

</StackPanel>

 

 

 

 

<Grid Grid.Row="1" Background="Transparent">

 

 

 

 

<ContentPresenter x:Name="ContentElement" Grid.Row="1" Margin="4" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"

 

 

 

VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}" />

 

 

 

 

</Grid>

 

 

 

 

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

 

 

 

 

</Grid>

 

 

 

 

</Border>

 

 

 

 

</Border>

 

 

 

 

<Grid x:Name="SelectedItem" Margin="-1" Visibility="Collapsed">

 

 

 

 

<Border Margin="{TemplateBinding Padding}" BorderBrush="{StaticResource ControlOuterBorder_Selected}" BorderThickness="2" CornerRadius="{StaticResource TileView_OuterBorder_CornerRadius}" />

 

 

 

 

</Grid>

 

 

 

 

</Grid>

 

 

 

 

</ControlTemplate>

 

 

 

 

</Setter.Value>

 

 

 

 

</Setter>

 

 

 

 

</Style>

 

[Zarko]

Hi Kss,
If you are getting those errors I guess that you are using an older dll version? There are two ways to bold the text in the header - you can set the FontWeight to the whole RadTileViewItem style to bold ( but this will cause the content to be bold as well) or you can set the ContentPresenters ContentTemplate to be a TextBox with FontWeight bold.
I've updated the sample project so could you please examine it and if you have more questions feel free to ask.

Best wishes,
Zarko
the Telerik team

[ss]

thank you.its worling fine