Custom GanttTask and template of event on timeruler

[Grzesiek]

Hello,

 

Can anyone tell me how can I set my own template of event on time ruler?

I have field called SubTitle and EventContainer style like below:

 

 <Setter Property="Template">
                            <Setter.Value>
                                <ControlTemplate TargetType="telerik:EventContainer">
                                    <Grid>
                                        <Grid.ColumnDefinitions>
                                            <ColumnDefinition Width="*"/>
                                            <ColumnDefinition Width="Auto"/>
                                        </Grid.ColumnDefinitions>
                                        <Grid Grid.Column="0" Margin="{TemplateBinding Padding}">
                                            <Grid.RowDefinitions>
                                                <RowDefinition Height="*" />
                                                <RowDefinition Height="Auto" />
                                            </Grid.RowDefinitions>
                                            <TextBlock Text="{Binding SubTitle}" />

                                        </Grid>
                                    </Grid>
                                </ControlTemplate>
                            </Setter.Value>
                        </Setter>

 

But nothing is displaying. If I change binding to Title, it works.

[Grzesiek]

Ok, this almost works fine, but my defined before CustomTooltipTemplate is now not showing. Any idea?

<Setter Property="Template">
                            <Setter.Value>
                                <ControlTemplate TargetType="telerik:EventContainer">
                                    <Grid>
                                        <Border Background="{TemplateBinding Background}" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"></Border>
                                        <TextBlock Foreground="{TemplateBinding Foreground}" Margin="{TemplateBinding Padding}">
                                            <TextBlock.Text>
                                                <MultiBinding StringFormat="{}{0}  ({1}os.)">
                                                    <Binding Path="OriginalEvent.Title" />
                                                    <Binding Path="OriginalEvent.NumberOfPeople" />
                                                </MultiBinding>
                                            </TextBlock.Text>
                                        </TextBlock>
                                    </Grid>
                                </ControlTemplate>
                            </Setter.Value>
                        </Setter>

[Dilyan Traykov]

Hello Grzesiek,

When editing the control templates of the elements, we recommend staying as close as possible to the original template as otherwise some of the functionality of the controls might be lost.

In this particular scenario, to successfully show the snippet, you need to add the following lines to your custom template:

            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="telerik:EventContainer">
                        <Grid>
                            <telerik:ToolTipManager.ToolTip>
                                <ToolTip ContentTemplate="{TemplateBinding ToolTipTemplate}" Content="{Binding OriginalEvent}"/>
                            </telerik:ToolTipManager.ToolTip>
                            <Border Background="{TemplateBinding Background}" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"></Border>
                            <TextBlock Foreground="{TemplateBinding Foreground}" Margin="{TemplateBinding Padding}" Text="{Binding OriginalEvent.Title}" />
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>

For your convenience, I'm also pasting the original template of the EventContainer control in the Office_Black theme should you decide to work with it instead:

                    <ControlTemplate TargetType="telerik:EventContainer">
                        <Grid>
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="CommonStates">
                                    <VisualState x:Name="Normal"/>
                                    <VisualState x:Name="MouseOver">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Duration="0:0:0" Storyboard.TargetName="MouseOverVisual" Storyboard.TargetProperty="Visibility">
                                                <DiscreteObjectKeyFrame KeyTime="0:0:0">
                                                    <DiscreteObjectKeyFrame.Value>
                                                        <Visibility>Visible</Visibility>
                                                    </DiscreteObjectKeyFrame.Value>
                                                </DiscreteObjectKeyFrame>
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="MouseOverHighlighted">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Duration="0:0:0" Storyboard.TargetName="BackgroundBorder" Storyboard.TargetProperty="Background">
                                                <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="{StaticResource EventBackground_MouseOverHighlighted}"/>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Duration="0:0:0" Storyboard.TargetName="BackgroundBorder" Storyboard.TargetProperty="BorderBrush">
                                                <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="{StaticResource Event_OuterBorderBrush_MouseOverHighlighted}"/>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Duration="0:0:0" Storyboard.TargetName="BackgroundInnerBorder" Storyboard.TargetProperty="Stroke">
                                                <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="{StaticResource Event_InnerBorderBrush_MouseOverHighlighted}"/>
                                            </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="CommonStatesVisual" 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="HighlightVisual" Storyboard.TargetProperty="Visibility">
                                                <DiscreteObjectKeyFrame KeyTime="0:0:0">
                                                    <DiscreteObjectKeyFrame.Value>
                                                        <Visibility>Visible</Visibility>
                                                    </DiscreteObjectKeyFrame.Value>
                                                </DiscreteObjectKeyFrame>
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                            <Border x:Name="BackgroundBorder"
                    CornerRadius="{StaticResource Event_OuterCornerRadius}"
                    BorderBrush="{TemplateBinding BorderBrush}"
                    BorderThickness="{TemplateBinding BorderThickness}"
                    Background="{TemplateBinding Background}">
                                <Rectangle x:Name="BackgroundInnerBorder"
                        Stroke="{StaticResource Event_InnerBorderBrush_Normal}"
                        StrokeThickness="1"
                        Fill="Transparent"
                        RadiusX="{StaticResource Event_RadiusX}"
                        RadiusY="{StaticResource Event_RadiusY}"/>
                            </Border>
                            <Border x:Name="CommonStatesVisual"
                    Visibility="Collapsed"
                    CornerRadius="{StaticResource Event_OuterCornerRadius}"
                    BorderBrush="{StaticResource Event_OuterBorderBrush_Selected}"
                    BorderThickness="{TemplateBinding BorderThickness}"
                    Background="{StaticResource EventBackground_Selected}">
                                <Rectangle
                        Stroke="{StaticResource Event_InnerBorderBrush_Normal}"
                        StrokeThickness="1"
                        Fill="Transparent"
                        RadiusX="{StaticResource Event_RadiusX}"
                        RadiusY="{StaticResource Event_RadiusY}"/>
                            </Border>
                            <Border x:Name="HighlightVisual"
                    Visibility="Collapsed"
                    Background="{StaticResource EventBackground_Highlighted}"
                    CornerRadius="{StaticResource Event_OuterCornerRadius}"
                    BorderBrush="{StaticResource Event_OuterBorderBrush_Highlighted}"
                    BorderThickness="{TemplateBinding BorderThickness}">
                                <Rectangle
                        Stroke="{StaticResource Event_InnerBorderBrush_Normal}"
                        StrokeThickness="1"
                        Fill="Transparent"
                        RadiusX="{StaticResource Event_RadiusX}"
                        RadiusY="{StaticResource Event_RadiusY}"/>
                            </Border>
                            <Border x:Name="MouseOverVisual"
                    Visibility="Collapsed"
                    CornerRadius="{StaticResource Event_OuterCornerRadius}"
                    BorderBrush="{StaticResource Event_OuterBorderBrush_MouseOver}"
                    BorderThickness="{TemplateBinding BorderThickness}"
                    Background="{StaticResource EventBackground_MouseOver}">
                                <Rectangle
                        Stroke="{StaticResource Event_InnerBorderBrush_MouseOver}"
                        StrokeThickness="1"
                        Fill="Transparent"
                        RadiusX="{StaticResource Event_RadiusX}"
                        RadiusY="{StaticResource Event_RadiusY}"/>
                            </Border>
                            <Grid Grid.Column="1" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="*"/>
                                    <RowDefinition Height="Auto"/>
                                </Grid.RowDefinitions>
                                <TextBlock x:Name="txtBlock" Text="{Binding Title}" FontSize="{TemplateBinding FontSize}"/>
                                <telerik:ProgressPresenter Grid.Row="1" VerticalAlignment="Bottom" Height="2" Margin="0 0 0 2" HorizontalAlignment="Stretch" Progress="{Binding Progress}" Orientation="Horizontal">
                                    <Rectangle Fill="{StaticResource ProgressFill}" VerticalAlignment="Stretch" HorizontalAlignment="Stretch"/>
                                </telerik:ProgressPresenter>
                            </Grid>
                        </Grid>
                    </ControlTemplate>

If you're using another theme, however, you need to extract and modify its template accordingly.

I hope you find this helpful. Please let me know if you require any additional assistance on the matter.

Regards,
Dilyan Traykov
Progress Telerik