Tile headers sometimes showing green background.

7 posts, 1 answers
  1. Rahul
    Rahul avatar
    116 posts
    Member since:
    Feb 2011

    Posted 02 Dec 2011 Link to this post

    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;
                    }
                });
            }
  2. Petar Mladenov
    Admin
    Petar Mladenov avatar
    2891 posts

    Posted 07 Dec 2011 Link to this post

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

  3. DevCraft banner
  4. Rahul
    Rahul avatar
    116 posts
    Member since:
    Feb 2011

    Posted 08 Dec 2011 Link to this post

    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
  5. Rahul
    Rahul avatar
    116 posts
    Member since:
    Feb 2011

    Posted 08 Dec 2011 Link to this post

    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
  6. Answer
    Petar Mladenov
    Admin
    Petar Mladenov avatar
    2891 posts

    Posted 13 Dec 2011 Link to this post

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

  7. Rahul
    Rahul avatar
    116 posts
    Member since:
    Feb 2011

    Posted 13 Dec 2011 Link to this post

    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
  8. Petar Mladenov
    Admin
    Petar Mladenov avatar
    2891 posts

    Posted 16 Dec 2011 Link to this post

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

Back to Top
DevCraft banner