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

Transition effects

8 Answers 59 Views
Docking
This is a migrated thread and some comments may be shown as answers.
Tom
Top achievements
Rank 1
Tom asked on 24 Feb 2011, 12:13 PM
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

8 Answers, 1 is accepted

Sort by
0
Pana
Telerik team
answered on 28 Feb 2011, 09:10 AM
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
Registration for Q1 2011 What’s New Webinar Week is now open. Mark your calendar for the week starting March 21st and book your seat for a walk through all the exciting stuff we ship with the new release!
0
Tom
Top achievements
Rank 1
answered on 01 Mar 2011, 01:05 PM
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.
0
Tom
Top achievements
Rank 1
answered on 03 Mar 2011, 04:54 PM
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>
0
Accepted
Pana
Telerik team
answered on 03 Mar 2011, 04:57 PM
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
Registration for Q1 2011 What’s New Webinar Week is now open. Mark your calendar for the week starting March 21st and book your seat for a walk through all the exciting stuff we ship with the new release!
0
Tom
Top achievements
Rank 1
answered on 04 Mar 2011, 01:11 PM
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?
0
Pana
Telerik team
answered on 10 Mar 2011, 04:16 PM
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
Registration for Q1 2011 What’s New Webinar Week is now open. Mark your calendar for the week starting March 21st and book your seat for a walk through all the exciting stuff we ship with the new release!
0
Chris
Top achievements
Rank 1
answered on 17 Aug 2012, 06:09 AM
Hi Pana,

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

Thanks heaps.
0
Yana
Telerik team
answered on 21 Aug 2012, 01:26 PM
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
Registration for Q1 2011 What’s New Webinar Week is now open. Mark your calendar for the week starting March 21st and book your seat for a walk through all the exciting stuff we ship with the new release!
Tags
Docking
Asked by
Tom
Top achievements
Rank 1
Answers by
Pana
Telerik team
Tom
Top achievements
Rank 1
Chris
Top achievements
Rank 1
Yana
Telerik team
Share this question
or