Transition effects

[Tom]

Hi


Is it possible to apply and use transition effects when the selected pane in a pane group changes? How can this be done?

Tom Davies

[Pana]

Hello Tom,

You will have to change all ControlTemplates for the different RadPaneGroups and change the ContentPresenters inside with RadTransitionControls.

If you need help doing that tell me which theme do you use and I will send you the complete RadDocking xaml with the change applied.

Greetings,
Pana
the Telerik team

[Tom]

Hi

I'm not using any of the Telerik themes, I'm using a custom theme of my own. However, if you could provide an example, that would be great. Just one example would do - eg BottomTemplate.

Can the same technique be used to get transitioning effects in the OutlookBar Control as well?
Thanks.

[Tom]

I'm trying to do as you suggest, but I'm not having success so far. I've modified my BottomTemplate for RadDocking, replacing the ContentPresenter with a RadTransitionControl as pasted below:

However, no content appears inside the ContentElement. Are you able to advise?

<ContentControl x:Name="ContentBackground" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}">
                            <ContentControl.Style>
                                <Style TargetType="{x:Type ContentControl}">
                                    <Setter Property="Template">
                                        <Setter.Value>
                                            <ControlTemplate TargetType="{x:Type ContentControl}">
                                                <Border x:Name="Root" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" CornerRadius="2,2,2,0">
                          <telerik:RadTransitionControl
                            ContentTemplate="{TemplateBinding ContentTemplate}"
                            Content="{TemplateBinding Content}"
                            ContentStringFormat="{TemplateBinding ContentStringFormat}">

                            <telerik:RadTransitionControl.Transition>
                              <telerikTransitions:MotionBlurredZoomTransition />
                            </telerik:RadTransitionControl.Transition>
                          </telerik:RadTransitionControl>
                        </Border>
                                            </ControlTemplate>
                                        </Setter.Value>
                                    </Setter>
                                </Style>
                            </ContentControl.Style>
                            <Grid>
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="Auto"/>
                                    <RowDefinition Height="*"/>
                                </Grid.RowDefinitions>
                                <Border Grid.Row="0" Visibility="{Binding SelectedItem.PaneHeaderVisibility, RelativeSource={RelativeSource TemplatedParent}}">
                                    <telerik:PaneHeader x:Name="HeaderElement" MinHeight="16" Grid.Row="0" SelectedPane="{TemplateBinding SelectedPane}" Background="{DynamicResource BarBrushTom}" Foreground="{DynamicResource TextBrushTom}" BorderBrush="{x:Null}" Template="{DynamicResource PaneHeaderControlTemplate1}"/>
                                </Border>
                                <telerik:RadTransitionControl  x:Name="ContentElement" ContentTemplate="{TemplateBinding SelectedContentTemplate}" Grid.Row="1" />

                            </Grid>
                        </ContentControl>

[Pana]

Hi Tom,

If I am not mistaken you are almost there. I think you have to bind the Content="{TemplateBinding SelectedContent}" in the RadTransitionControl as the ContentTempalte itself is not enough.

Kind regards,
Pana
the Telerik team

[Tom]

That's what I was missing! Thanks. The only niggle I have now is that the transition effect is applied when my app starts up, can I prevent this?

[Pana]

Hello Tom,

I don't think so. Eventually you can set the Duration to 0 and attach an event handler for Loaded and then reset the Duration to whatever you are about to use. But there is no out-of-the-box way to prevent the initial animation easily.

Best wishes,
Pana
the Telerik team

[Chris]

Hi Pana,

Can you please provide the RadDocking xaml with the change applied for the ExpressionDark and Metro themes?

Thanks heaps.

[Yana]

Hello Chris,

Please find attached a sample project showing the needed changes in both Metro and ExpressionDark themes. Note that I have used implicit styles and applied the changes directly in the template of the Docking.
More information about implicit styles can be found here.

Best wishes,
Yana
the Telerik team