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

Change main Task Color

1 Answer 191 Views

GanttView

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

Valentin asked on 02 Feb 2017, 11:13 AM

gantview.jpg

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

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.