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

Tile headers sometimes showing green background.

6 Answers 66 Views
TileView
This is a migrated thread and some comments may be shown as answers.
Rahul
Top achievements
Rank 2
Rahul asked on 02 Dec 2011, 02:37 PM
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.
                    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" />
    <!--  Resource dictionary entries should be defined here.  -->
    <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>
                    </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="FontWeight" Value="Bold" />  -->
        <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}" />
                                                <!--  This is the old ToggleButton and you don't need it  -->
                                                <!--
                                                    <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>
                                                    </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>
                        </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>
</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

Sort by
0
Petar Mladenov
Telerik team
answered on 07 Dec 2011, 05:42 PM
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 >>

0
Rahul
Top achievements
Rank 2
answered on 08 Dec 2011, 06:07 PM
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
0
Rahul
Top achievements
Rank 2
answered on 08 Dec 2011, 06:15 PM
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
0
Accepted
Petar Mladenov
Telerik team
answered on 13 Dec 2011, 02:50 PM
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 >>

0
Rahul
Top achievements
Rank 2
answered on 13 Dec 2011, 04:53 PM
Hi Petar Mladeno,

Thanks a lot for giving me solution.
It worked perfectly for me.
One more request is that can you make this
ticket public so it will help other people
to handle this type of scenario.

Regards
Rahul
0
Petar Mladenov
Telerik team
answered on 16 Dec 2011, 01:40 PM
Hello Rahul,

 I changed this ticket's type to "Forum" and I will publish a Code Library or Knowledge Base project soon. Thank you for your suggestion.

Regards,
Petar Mladenov
the Telerik team

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

Tags
TileView
Asked by
Rahul
Top achievements
Rank 2
Answers by
Petar Mladenov
Telerik team
Rahul
Top achievements
Rank 2
Share this question
or