Change GanttTask Event selected background

2 posts, 0 answers
  1. Jacky
    Jacky avatar
    9 posts
    Member since:
    Dec 2015

    Posted 16 Jan Link to this post

    I would like to know if there is a way to change the color of an event's background when it is selected.

    Currently I'm using the themes Visualstudio2013 for gantt view.

    for example I set one GanttTask Event background to gray, however it will show blue when  it is selected.

    It seems that "EventContainerStyle" don't provide this property .

     

    Regards,

    -Jacky

     

     

     

  2. Dilyan Traykov
    Admin
    Dilyan Traykov avatar
    587 posts

    Posted 18 Jan Link to this post

    Hello Jacky,

    In order to achieve the desired look, you will need to modify the control template of the EventContainer element and change the Fill of its SelectedVisual Rectangle.

    For your convenience, I'm providing the modified style:

    <Style TargetType="telerik:EventContainer" BasedOn="{StaticResource EventContainerStyle}">
        <!-- Change EventContainer Background -->
        <Setter Property="Background" Value="Red" />
        <!-- Change EventContainer Background -->
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="gantt:EventContainer">
                    <Grid>
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="CommonStates">
                                <VisualState x:Name="Normal"/>
                                <VisualState x:Name="MouseOver">
                                    <Storyboard>
                                        <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="MouseOverVisual"/>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Disabled"/>
                                <VisualState x:Name="MouseOverHighlighted">
                                    <Storyboard>
                                        <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="MouseOverHighlightedVisual"/>
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                            <VisualStateGroup x:Name="SelectionStates">
                                <VisualState x:Name="Unselected"/>
                                <VisualState x:Name="Selected">
                                    <Storyboard>
                                        <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="SelectedVisual"/>
                                    </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>
                                        <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="HighlightVisual"/>
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                        <telerik:ToolTipManager.ToolTip>
                            <ToolTip ContentTemplate="{TemplateBinding ToolTipTemplate}" Content="{Binding OriginalEvent}"/>
                        </telerik:ToolTipManager.ToolTip>
                        <Rectangle x:Name="Background" Fill="{TemplateBinding Background}" Stroke="{TemplateBinding BorderBrush}" StrokeThickness="{TemplateBinding BorderThickness}"/>
                        <!-- Change the SelectedVisual Fill -->
                        <Rectangle x:Name="SelectedVisual" Opacity="0" Stroke="{TemplateBinding BorderBrush}" Fill="Blue"/>
                        <!-- Change the SelectedVisual Fill -->
                        <Rectangle x:Name="HighlightVisual"
            Opacity="0"
            Fill="{telerik:VisualStudio2013Resource ResourceKey=ValidationBrush}"
            Stroke="{telerik:VisualStudio2013Resource ResourceKey=ValidationBrush}"
            StrokeThickness="{TemplateBinding BorderThickness}"/>
                        <Rectangle x:Name="MouseOverVisual"
            Grid.Column="1"
            Opacity="0"
            Stroke="{TemplateBinding BorderBrush}"
            StrokeThickness="{TemplateBinding BorderThickness}"
            Fill="{telerik:VisualStudio2013Resource ResourceKey=SemiBasicBrush}"/>
                        <Rectangle x:Name="MouseOverHighlightedVisual"
            Opacity="0"
            Stroke="{TemplateBinding BorderBrush}"
            StrokeThickness="{TemplateBinding BorderThickness}"
            Fill="{telerik:VisualStudio2013Resource ResourceKey=SemiBasicBrush}"/>
                        <Grid Grid.Column="1" Margin="{TemplateBinding Padding}">
                            <Grid.RowDefinitions>
                                <RowDefinition Height="*"/>
                                <RowDefinition Height="Auto"/>
                            </Grid.RowDefinitions>
                            <TextBlock x:Name="txtBlock" Text="{Binding Title}" FontSize="{TemplateBinding FontSize}"/>
                            <telerik:ProgressPresenter Grid.Row="1" Height="2" Margin="0 0 0 2" HorizontalAlignment="Stretch" Progress="{Binding Progress}" Orientation="Horizontal">
                                <Rectangle Opacity="0.7" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Fill="{telerik:VisualStudio2013Resource ResourceKey=SelectedBrush}"/>
                            </telerik:ProgressPresenter>
                        </Grid>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    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