Change main Task Color

2 posts, 0 answers
  1. Valentin
    Valentin avatar
    96 posts
    Member since:
    Mar 2016

    Posted 02 Feb Link to this post

    Hello Telerik,

     

    I'm using RadGanttView and I want to change the main customtask color. Actually, it is Orange (default).

    I know is it possible to Hilight all of Summarys Tasks (my target), but Hilight is Red, and I don't know how I can change his color.

     

    Which way is better ? Change the Hilighted Task Color or apply a color for my custom task ?

     

    The CustomMainTask (Summary Task) is created like this :

    var task = new CustomGanttTask();
    task.Start = variableAffichee.dateDebut;
    task.End = variableAffichee.dateFin;
    task.Title = viewModel.ListeVariables.Find(v => v.Id == variableAffichee.idVariable).Code.ToString(); //variable = une tâche principale variableAffichee.codeVariable
    task.TitreColonne = task.Title;
    task.Description = task.Title; // this.viewModel.ListeVariables.Find(v => v.Id == variableAffichee.idVariable).Code.ToString();
    task.BackgroundColor = new SolidColorBrush(new Color { A = 0, R = 0, G = 170, B = 0 }); //System.Windows.Media.Brushes.SteelBlue;               

    But the last line, BackgroundColor hasn't got any effect on the task. This is the same problem for Description and Title properties.

     

    The CustomTask Class  :

    public class CustomGanttTask : GanttTask
        {
            public Brush BackgroundColor { get; set; }
     
            public string Affectation { get; set; }
     
            public int IdCommentaire { get; set; }
     
            public string TitreColonne { get; set; }
        }

     

    I attached a screenshot to show you my result.

     

    Can you help me ?

     

    Thank you !

  2. Dilyan Traykov
    Admin
    Dilyan Traykov avatar
    601 posts

    Posted 07 Feb Link to this post

    Hello,

    In order to achieve the desired result, you will need to redefine the default control template of the SummaryContainer element and set the background binding of the desired state. For your convenience, here's the modified template for the Office_Black theme binding the SummaryContainer's background color to the CustomGanttTask's BackgroundColor property.

    <Style TargetType="telerik:SummaryContainer" BasedOn="{StaticResource SummaryContainerStyle}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="telerik:SummaryContainer">
                    <Grid>
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="CommonStates">
                                <VisualState x:Name="Normal"/>
                                <VisualState x:Name="MouseOver">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Duration="0:0:0" Storyboard.TargetName="LeftMarker" Storyboard.TargetProperty="Fill">
                                            <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="{StaticResource SummaryBackground_Inverted_MouseOver}"/>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Duration="0:0:0" Storyboard.TargetName="BackgroundBorder" Storyboard.TargetProperty="Fill">
                                            <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="{StaticResource SummaryBackground_MouseOver}"/>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Duration="0:0:0" Storyboard.TargetName="RightMarker" Storyboard.TargetProperty="Fill">
                                            <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="{StaticResource SummaryBackground_Inverted_MouseOver}"/>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="MouseOverHighlighted">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Duration="0:0:0" Storyboard.TargetName="LeftMarker" Storyboard.TargetProperty="Fill">
                                            <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="{StaticResource SummaryBackground_Inverted_MouseOver}"/>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Duration="0:0:0" Storyboard.TargetName="BackgroundBorder" Storyboard.TargetProperty="Fill">
                                            <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="{StaticResource SummaryBackground_MouseOver}"/>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Duration="0:0:0" Storyboard.TargetName="RightMarker" Storyboard.TargetProperty="Fill">
                                            <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="{StaticResource SummaryBackground_Inverted_MouseOver}"/>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Disabled"/>
                            </VisualStateGroup>
                            <VisualStateGroup x:Name="SelectionStates">
                                <VisualState x:Name="Unselected"/>
                                <VisualState x:Name="Selected">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Duration="0:0:0" Storyboard.TargetName="LeftMarker" Storyboard.TargetProperty="Visibility">
                                            <DiscreteObjectKeyFrame KeyTime="0:0:0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <Visibility>Collapsed</Visibility>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Duration="0:0:0" Storyboard.TargetName="BackgroundBorder" Storyboard.TargetProperty="Visibility">
                                            <DiscreteObjectKeyFrame KeyTime="0:0:0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <Visibility>Collapsed</Visibility>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Duration="0:0:0" Storyboard.TargetName="RightMarker" Storyboard.TargetProperty="Visibility">
                                            <DiscreteObjectKeyFrame KeyTime="0:0:0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <Visibility>Collapsed</Visibility>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Duration="0:0:0" Storyboard.TargetName="LeftMarkerSelected" Storyboard.TargetProperty="Visibility">
                                            <DiscreteObjectKeyFrame KeyTime="0:0:0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <Visibility>Visible</Visibility>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Duration="0:0:0" Storyboard.TargetName="BackgroundBorderSelected" Storyboard.TargetProperty="Visibility">
                                            <DiscreteObjectKeyFrame KeyTime="0:0:0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <Visibility>Visible</Visibility>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Duration="0:0:0" Storyboard.TargetName="RightMarkerSelected" Storyboard.TargetProperty="Visibility">
                                            <DiscreteObjectKeyFrame KeyTime="0:0:0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <Visibility>Visible</Visibility>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                            <VisualStateGroup x:Name="FocusStates">
                                <VisualState x:Name="Focused"/>
                                <VisualState x:Name="Unfocused"/>
                            </VisualStateGroup>
                            <VisualStateGroup x:Name="HighlightStates">
                                <VisualState x:Name="NotHighlighted"/>
                                <VisualState x:Name="Highlighted">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Duration="0:0:0" Storyboard.TargetName="LeftMarkerHighlighted" Storyboard.TargetProperty="Visibility">
                                            <DiscreteObjectKeyFrame KeyTime="0:0:0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <Visibility>Visible</Visibility>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Duration="0:0:0" Storyboard.TargetName="BackgroundBorderHighlighted" Storyboard.TargetProperty="Visibility">
                                            <DiscreteObjectKeyFrame KeyTime="0:0:0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <Visibility>Visible</Visibility>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Duration="0:0:0" Storyboard.TargetName="RightMarkerHighlighted" Storyboard.TargetProperty="Visibility">
                                            <DiscreteObjectKeyFrame KeyTime="0:0:0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <Visibility>Visible</Visibility>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                        <telerik:ToolTipManager.ToolTip>
                            <ToolTip ContentTemplate="{TemplateBinding ToolTipTemplate}" Content="{Binding OriginalEvent}"/>
                        </telerik:ToolTipManager.ToolTip>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="Auto"/>
                            <ColumnDefinition/>
                            <ColumnDefinition Width="Auto"/>
                        </Grid.ColumnDefinitions>
                        <Rectangle Fill="Transparent" IsHitTestVisible="True" Grid.ColumnSpan="3" Height="10" Margin="0 2 0 -4"/>
                        <Path x:Name="LeftMarker"
            Data="M0,0 L9,0 L4.5,4 z"
            Stretch="Fill"
            Fill="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=DataItem.OriginalEvent.BackgroundColor}"
            Width="9"
            Height="4"
            Margin="0 0 0 -9"
            HorizontalAlignment="Left"/>
                        <Path x:Name="LeftMarkerSelected"
            Data="M0,0 L9,0 L4.5,4 z"
            Stretch="Fill"
            Fill="{StaticResource SummaryBackground_Inverted_Selected}"
            Width="9"
            Height="4"
            Margin="0 0 0 -9"
            HorizontalAlignment="Left"
            Visibility="Collapsed"/>
                        <Path x:Name="LeftMarkerHighlighted"
            Data="M0,0 L9,0 L4.5,4 z"
            Stretch="Fill"
            Fill="{StaticResource SummaryBackground_Highlighted}"
            Width="9"
            Height="4"
            Margin="0 0 0 -9"
            HorizontalAlignment="Left"
            Visibility="Collapsed"/>
                        <Rectangle x:Name="BackgroundBorder" Grid.ColumnSpan="3" Height="6" Fill="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=DataItem.OriginalEvent.BackgroundColor}"/>
                        <Border x:Name="BackgroundBorderSelected" Grid.ColumnSpan="3" Height="6" Background="{StaticResource SummaryBackground_Selected}" Visibility="Collapsed"/>
                        <Border x:Name="BackgroundBorderHighlighted" Grid.ColumnSpan="3" Height="6" Background="{StaticResource SummaryBackground_Highlighted}" Visibility="Collapsed"/>
                        <Path x:Name="RightMarker"
            Data="M0,0 L9,0 L4.5,4 z"
            Grid.Column="2"
            Stretch="Fill"
            Fill="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=DataItem.OriginalEvent.BackgroundColor}"
            Width="9"
            Height="4"
            Margin="0 0 0 -9"
            HorizontalAlignment="Right"/>
                        <Path x:Name="RightMarkerSelected"
            Data="M0,0 L9,0 L4.5,4 z"
            Grid.Column="2"
            Stretch="Fill"
            Fill="{StaticResource SummaryBackground_Inverted_Selected}"
            Width="9"
            Height="4"
            Margin="0 0 0 -9"
            HorizontalAlignment="Right"
            Visibility="Collapsed"/>
                        <Path x:Name="RightMarkerHighlighted"
            Data="M0,0 L9,0 L4.5,4 z"
            Grid.Column="2"
            Stretch="Fill"
            Fill="{StaticResource SummaryBackground_Highlighted}"
            Width="9"
            Height="4"
            Margin="0 0 0 -9"
            HorizontalAlignment="Right"
            Visibility="Collapsed"/>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    Please bear in mind that this will work only for the Office_Black theme and if you're using a different one, you should modify that accordingly.

    Please let me know if this works for you.

    Regards,
    Dilyan Traykov
    Telerik by Progress
    Want to extend the target reach of your WPF applications, leveraging iOS, Android, and UWP? Try UI for Xamarin, a suite of polished and feature-rich components for the Xamarin framework, which allow you to write beautiful native mobile apps using a single shared C# codebase.
Back to Top