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

Tile headers sometimes showing green background.

6 Answers 188 Views

TileView

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

Rahul asked on 02 Dec 2011, 02:37 PM

TileHeaderBackgroundColorIssue.png

Tile headers sometimes showing green background.

I've changed the original control template of TileView to modify tile header background color and put one image before each header.
And this worked perfectly but sometimes header background not applying. It's applying green color background.

The following given is Modified Control Template for Tile View. Also Please find attached image for more information.

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

xmlns:System="clr-namespace:System;assembly=mscorlib"

xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"

xmlns:tileView="clr-namespace:Telerik.Windows.Controls.TileView;assembly=Telerik.Windows.Controls.Navigation">

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

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

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

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

<SolidColorBrush x:Key="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>

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

<GradientStop Color="#FF282828" />

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

</LinearGradientBrush>

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

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

<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">1</CornerRadius>

<SolidColorBrush x:Key="TileView_HeaderBorder_HorizontalSplitterBackground" Color="#FFBFBFBF" />

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

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

<GradientStop Offset="1" />

</LinearGradientBrush>

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

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

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

<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="Fill">

<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="Fill">

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

Width="13"

Height="13"

Background="Transparent">

<ToolTipService.ToolTip>

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

</ToolTipService.ToolTip>

<Path x:Name="RestoreIcon"

Margin="1"

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

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"

Width="12"

Height="5"

Background="Transparent"

Visibility="Collapsed">

<ToolTipService.ToolTip>

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

</ToolTipService.ToolTip>

<Rectangle Fill="{StaticResource TileView_ButtonOuterBorder}"

Stroke="{x:Null}"

StrokeThickness="0.5" />

<Rectangle x:Name="CollapseIcon"

Margin="1"

Fill="{StaticResource TileView_ButtonBackground}"

Stroke="{x:Null}"

StrokeThickness="0.5" />

</Grid>

</ControlTemplate>

</Setter.Value>

</Setter>

</Style>

<Style TargetType="telerik:RadTileViewItem">

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

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

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

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

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

<Setter Property="Padding" Value="7" />

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

<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 Margin="{TemplateBinding Padding}"

Background="{TemplateBinding Background}"

BorderBrush="{TemplateBinding BorderBrush}"

BorderThickness="{TemplateBinding BorderThickness}"

CornerRadius="{StaticResource TileView_OuterBorder_CornerRadius}">

<Border x:Name="outerContainer"

BorderBrush="{StaticResource TileView_InneBorder}"

BorderThickness="{StaticResource TileView_InneBorder_Thickness}"

CornerRadius="{StaticResource TileView_InneBorder_CornerRadius}">

<Grid>

<Grid.RowDefinitions>

<RowDefinition Height="Auto" />

<RowDefinition Height="*" />

</Grid.RowDefinitions>

<ContentPresenter x:Name="ContentElement"

Grid.Row="1"

HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"

VerticalAlignment="{TemplateBinding VerticalContentAlignment}"

Content="{TemplateBinding Content}"

ContentTemplate="{TemplateBinding ContentTemplate}" />

<Grid x:Name="ContentCacheHost" Grid.Row="1" />

<StackPanel>

<Border x:Name="HeaderBackgroundBorder"

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="#FF5CE750" />

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

</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}" />

</Border>

<Image x:Name="imgTileHeader"

Width="24"

Height="24"

Margin="1"

HorizontalAlignment="Left" />

<telerik:RadToggleButton x:Name="MaximizeToggleButton"

Command="tileView:TileViewCommands.ToggleTileState"

Style="{StaticResource maximizeToggleStyle}" />

<!--

<ToggleButton x:Name="MaximizeToggleButton"

Width="17"

Height="17"

HorizontalAlignment="Right"

VerticalAlignment="Center"

Command="tileView:TileViewCommands.ToggleTileState">

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

<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="Fill">

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

Width="13"

Height="13"

Background="Transparent">

<ToolTipService.ToolTip>

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

</ToolTipService.ToolTip>

<Path x:Name="RestoreIcon"

Margin="1"

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

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"

Width="12"

Height="5"

Background="Transparent"

Visibility="Collapsed">

<ToolTipService.ToolTip>

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

</ToolTipService.ToolTip>

<Rectangle Fill="{StaticResource TileView_ButtonOuterBorder}"

Stroke="{x:Null}"

StrokeThickness="0.5" />

<Rectangle x:Name="CollapseIcon"

Margin="1"

Fill="{StaticResource TileView_ButtonBackground}"

Stroke="{x:Null}"

StrokeThickness="0.5" />

</Grid>

</ControlTemplate>

</ToggleButton.Template>

</ToggleButton>

-->

</Grid>

</Border>

<Border x:Name="Splitter"

Height="4"

Background="{StaticResource TileView_HeaderBorder_HorizontalSplitterBackground}"

BorderThickness="0"

OpacityMask="{StaticResource TileView_HeaderBorder_HorizontalSplitterOpacityMask}" />

</StackPanel>

<Rectangle x:Name="DisabledVisual"

Grid.RowSpan="2"

Fill="{StaticResource DisabledBrush}"

RadiusX="4"

RadiusY="4"

Visibility="Collapsed" />

</Grid>

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

</ControlTemplate>

</Setter.Value>

</Setter>

</Style>

</ResourceDictionary>

I'm Applying color to tile from Code Behind like this:




this.SetHeaderColor(tileCareGaps, new SolidColorBrush(Color.FromArgb(249, 166, 203, 247)), "Images/Care_Gap.png");
            this.SetHeaderColor(tileCommunicationLog, new SolidColorBrush(Color.FromArgb(249, 166, 203, 247)), "Images/Communication_Log.png");
            this.SetHeaderColor(tileCurrentMedications, new SolidColorBrush(Color.FromArgb(249, 166, 203, 247)), "Images/Current_Medication.png");
            this.SetHeaderColor(tileEncounters, new SolidColorBrush(Color.FromArgb(249, 166, 203, 247)), "Images/Encounters.png");
            this.SetHeaderColor(tileMeasures, new SolidColorBrush(Color.FromArgb(249, 166, 203, 247)), "Images/Measure.png");
            this.SetHeaderColor(tileOpenTasks, new SolidColorBrush(Color.FromArgb(249, 166, 203, 247)), "Images/Open_Calls.png");
            this.SetHeaderColor(tilePreviousCallLogs, new SolidColorBrush(Color.FromArgb(249, 166, 203, 247)), "Images/Call_Logs.png");
            this.SetHeaderColor(tileTitration, new SolidColorBrush(Color.FromArgb(249, 166, 203, 247)), "Images/Medication_Titration.png");
 
 
 
 
===================
 
 
private void SetHeaderColor(RadTileViewItem item, SolidColorBrush color, string path)
        {
            this.Dispatcher.BeginInvoke(() =>
            {
                Image headerBackground = item.ChildrenOfType<Image>().Where(child => child.Name == "imgTileHeader").FirstOrDefault();
                if (headerBackground != null)
                {
                    headerBackground.Source = new BitmapImage(new Uri(path, UriKind.Relative));
                }
            });
 
            this.Dispatcher.BeginInvoke(() =>
            {
                Border headerBackground = item.ChildrenOfType<Border>().Where(child => child.Name == "HeaderBackgroundBorder").FirstOrDefault();
                if (headerBackground != null)
                {
                    headerBackground.Background = color;
                }
            });
        }

6 Answers, 1 is accepted

answered on 07 Dec 2011, 05:42 PM

TileViewTest.zip

Hi Rahul,

We used your code with our pictures but we were unable to reproduce such issue as you can see in the attached project. We think the best way to proceed is to investigate a runnable sample from you locally. We converted this ticket's type to GeneralFeedback and now you are able to attach files. Thank you in adavance for your cooperation.

Best wishes,
Petar Mladenov
the Telerik team

Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>

answered on 08 Dec 2011, 06:07 PM

StillIssueIsThere.JPG

Hi Petar Mladenov,

I have reproduce the issue.
Please check out the attached image.
Issue is still there in your code also.
Steps to reproduce issue is just refresh page 2 to 4 times.
You will get the issue.

And please try to resolve it as soon as
possible. Our QA team is not happy
with this issue.

Thanks in Advance
Rahul

answered on 08 Dec 2011, 06:15 PM

StillIssueIsThere-Firefox.JPG

StillIssueIsThere-Internet-Explorer.JPG

Hi Petar Mladenov,

Forgot to give you browser details.
Issue exists in both browsers Internet Explorer and Firefox Also.

Browser Details:-
FireFox Version 8
Internet Explorer 8

Accepted

answered on 13 Dec 2011, 02:50 PM

319838-TileViewTest.zip

Hello Rahul,

We investigated your XAML and we think these green colors are applied because the code in the Dispatcher that sets the background does not succeed (or it is invoked too early). However, the key thing here is that you don't need to set these colors in code behind since you can take advantage of the HeaderStyle property. We re-factored the last solution to use it like so:

<Style x:Key="TileViewItemHeaderStyle" TargetType="Telerik_Windows_Controls_TileView:TileViewItemHeader">

<Setter Property="Background" Value="#F9A6CBF7" />

</Style>

<telerik:RadTileView>

<telerik:RadTileViewItem x:Name="tileCareGaps" HeaderStyle="{StaticResource TileViewItemHeaderStyle}">

<telerik:RadTileViewItem.Header>

<StackPanel Orientation="Horizontal">

<Image Width="24"

Height="24"

Margin="1"

HorizontalAlignment="Left"

Source="Images/Barcelona.jpg" />

<TextBlock Text="Item A" />

</StackPanel>

</telerik:RadTileViewItem.Header>

</telerik:RadTileViewItem>

<telerik:RadTileViewItem x:Name="tileCommunicationLog" HeaderStyle="{StaticResource TileViewItemHeaderStyle}">

<telerik:RadTileViewItem.Header>

.....

If you need to have different Header Backgrounds on the different TileViewItems, you can have several HeaderStyles (this is not a problem since you can use Style that is 2 lines long as it is demonstrated here). Please let us know if this satisfies you.

Regards,
Petar Mladenov
the Telerik team

Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Tile headers sometimes showing green background.

6 Answers, 1 is accepted