Task Node color change (Resource Gantt chart)

[chandru]

Hi...

can we change the Task node color as group wise,

i.e, if i have Task 1, Task 2, Task 3......Task 10

i want to change the color(red)  for Task1, Task3, Task4
and Task2, Task5, Task6 as Blue color, like that can we display the resource view chart....

if it is possible means, please explain with sample...

[Riyaj Ahamed I]

Hi Chandru,

 

By applying custom style for the Task Nodes with converters we can change the appearance of the Gantt node based on the data.

 

To know more about the custom node styling please refer to the following link,

 

UG Link: http://help.syncfusion.com/ug/wpf/gantt/default.htm#!documents/customnodestyle.htm

 

The following code snippet illustrates this,

 

[XAML]

 

<Style x:Key="TaskNode" TargetType="{x:Type gchart:GanttNode}">

            <Setter Property="Template">

                <Setter.Value>

                    <ControlTemplate TargetType="{x:Type gchart:GanttNode}">

                        <Border Name="PART_Border"

                                Height="18"

                                VerticalAlignment="Center"

                                Background="{TemplateBinding Background}"

                                BorderBrush="#FFD26202"

                                BorderThickness="1"

                                ClipToBounds="True"

                                CornerRadius="7">

                            <Grid>

                                <Grid.ColumnDefinitions>

                                    <ColumnDefinition Width="Auto" />

                                    <ColumnDefinition Width="*" />

                                    <ColumnDefinition Width="Auto" />

                                </Grid.ColumnDefinitions>

 

                                <ToolTipService.ToolTip>

                                    <ToolTip Content="{TemplateBinding DataContext}" 

                                    ContentTemplate="{TemplateBinding ToolTipTemplate}" />

                                </ToolTipService.ToolTip>

 

                                <Thumb x:Name="PART_DragDropThumb"

                                       Grid.Column="0"

                                       Grid.ColumnSpan="3"

                                       Cursor="SizeAll">

                                    <Thumb.Template>

                                        <ControlTemplate>

                                            <Border Background="Transparent" />

                                        </ControlTemplate>

                                    </Thumb.Template>

                                </Thumb>

 

                                <Thumb x:Name="PART_LeftThumb"

                                       Grid.Column="0"

                                       HorizontalAlignment="Left"

                                       Cursor="ScrollW">

                                    <Thumb.Template>

                                        <ControlTemplate>

                                            <Border Width="4"

                                                    Height="20"

                                                    Background="Transparent"

                                                    BorderBrush="Transparent"

                                                    BorderThickness="0" />

                                        </ControlTemplate>

                                    </Thumb.Template>

                                </Thumb>

 

                                <Thumb x:Name="PART_RightThumb"

                                       Grid.Column="2"

                                       HorizontalAlignment="Right"

                                       Cursor="ScrollE">

                                    <Thumb.Template>

                                        <ControlTemplate>

                                            <Border Width="4"

                                                    Height="20"

                                                    Background="Transparent"

                                                    BorderBrush="Transparent"

                                                    BorderThickness="0" />

                                        </ControlTemplate>

                                    </Thumb.Template>

                                </Thumb>

                            </Grid>

                        </Border>

                    </ControlTemplate>

                </Setter.Value>

            </Setter>

            <Setter Property="Background" Value="{Binding Path=DataContext, RelativeSource={RelativeSource Self}, Converter={StaticResource converter}, ConverterParameter=Parent, UpdateSourceTrigger=PropertyChanged, Mode=TwoWay}" />

        </Style>

 

[C#]

 

public class ColorConverter: IValueConverter

    {

        public object Convert(object value, Type targetType, object parameter, CultureInfo culture)

        {

            var item = value as Item;

 

            if (item.Name=="Work 1")

                return (SolidColorBrush)new BrushConverter().ConvertFromString("#99FB1111");

 

            return (SolidColorBrush)new BrushConverter().ConvertFromString("#991342E2");

        }

 

        public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)

        {

            throw new NotImplementedException();

        }

   }

 

Please check the sample from the following link,

 

Sample: CustomizeAppearance.zip

 

Note: In this sample we have used converter(ColorConverter.cs) to change the node color based on TaskName.

 

Regards,

Riyaj Ahamed I

[chandru]

Thanks for the sample...

it works fine, but if i change the visual style as "Blend", all the node color changed as white...

how can we solve this.....

Regards,

M.Chandru

[chandru]

Hi Riyaj Ahamed

Thanks for the sample...

it works fine, but if i change the visual style as "Blend", all the node color changed as white...

I want to use the Style as "Blend" and the node can be in different colors....

how can we solve this.....

I am waiting for your reply...

Regards,

M.Chandru

[chandru]

Hi Riyaj Ahamed

Thanks for the sample...

it works fine, but if i change the visual style as "Blend", all the node color changed as white...

I want to use the Style as "Blend" and the Task node can be in different colors....

how can we do this..... any samples...


Regards,

M.Chandru

[Riyaj Ahamed I]

Hi Chandru,

 

Thank you for your update.

 

We are able to reproduce the issue .Could you please create new incident for this issue  through Direct Trac system and we will update the status of this through incident.

 

Direct Trac Link : https://www.syncfusion.com/account/login?ReturnUrl=%2fsupport%2fdirecttrac%2fincidents

 

Please let us know If you have any questions.

 

Regards,

Riyaj Ahamed I