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

Change main Task Color

1 Answer 117 Views
GanttView
This is a migrated thread and some comments may be shown as answers.
Valentin
Top achievements
Rank 1
Iron
Valentin asked on 02 Feb 2017, 11:13 AM

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 !

1 Answer, 1 is accepted

Sort by
0
Dilyan Traykov
Telerik team
answered on 07 Feb 2017, 09:49 AM
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.
Tags
GanttView
Asked by
Valentin
Top achievements
Rank 1
Iron
Answers by
Dilyan Traykov
Telerik team
Share this question
or