Navigation bar content change animations

Navigation for WPF Forum

Posted 10 years ago by Bill Seddon
Version: 4.5.0487
Avatar
Is it possible to apply a transition when the a header selection is made and the pane content changes? It's possible to apply a transition when the content of a standard tab control changes by changing the tab control's ContentTemplate to include a transition presenter.

However, the NavigationBar control doesn't expose a ContentTemplate and I can't replace the navigation control's template because, understandably, it just presents a blank space if I do.

Is there an approved process for applying content change transitions? (Not expander transitions)

Comments (14)

Posted 10 years ago by Actipro Software Support - Cleveland, OH, USA
Avatar
Hi Bill,

I believe you'd have to retemplate the control to replace the ContentPresenter with a TransitionPresenter, even for tab control if you were to do it properly. I'll add this to the NavigationBar TODO list. It's a good idea to include as an option.


Actipro Software Support

Posted 10 years ago by Bill Seddon
Avatar
Thanks for the response though it's disappointing news. Are you able to provide the current template so it can be changed without guessing?

The tab control can be handled fairly easily. Here's an example using a transition presenter for pixel shader effects from the wpffx project on CodePlex: http://www.lyquidity.com/devblog/?p=50 As mentioned in the previous post its made relatively easy because the tab control exposes a ContentTemplate dependency property which is used to template the selected tab content vs template the whole tab control.
Posted 10 years ago by Actipro Software Support - Cleveland, OH, USA
Avatar
Hi Bill,

If you are an existing customer then send an email to our support address and we can supply the default styles/control templates.

As for your question, you can accomplish the same thing using the NavigationPane.ContentTemplate property.

In terms of the TabControl, it's ContentTemplate/ContentTemplateSelector/ContentStringFormat properties are only applied to the selected tab if ContentTemplate/ContentTemplateSelector/ContentStringFormat are not set on the selected TabItem. As you said, the NavigationBar does not expose ContentTemplate/ContentTemplateSelector/ContentStringFormat, but NavigationPane does (which is equivalent to the TabItem).

Therefore, you can set the NavigationPane.HeaderTemplate and/or NavigationPane.ContentTemplate like in the blog post you provided. The following code will apply a unique transition to the header and content using the TransitionPresenter control available in our Shared Library:
<!-- DataTemplates that use TransitionPresenter -->
<DataTemplate x:Key="TransitionHeaderTemplate">
    <shared:TransitionPresenter Content="{Binding}">
        <shared:TransitionPresenter.ContentTemplate>
            <DataTemplate>
                <TextBlock Margin="7,3,7,3" FontWeight="Bold" Text="{Binding}" TextTrimming="CharacterEllipsis" />
            </DataTemplate>
        </shared:TransitionPresenter.ContentTemplate>
        <shared:TransitionPresenter.Transition>
            <shared:SlideTransition IsFromContentPushed="True" />
        </shared:TransitionPresenter.Transition>
    </shared:TransitionPresenter>
</DataTemplate>
<DataTemplate x:Key="TransitionContentTemplate">
    <shared:TransitionPresenter Content="{Binding}">
        <shared:TransitionPresenter.Transition>
            <shared:FadeTransition />
        </shared:TransitionPresenter.Transition>
    </shared:TransitionPresenter>
</DataTemplate>

<!-- Style for NavigationPane that applies the two DataTemplates above -->
<Style x:Key="{x:Type navigation:NavigationPane}" TargetType="{x:Type navigation:NavigationPane}">
    <Setter Property="HeaderTemplate" Value="{StaticResource TransitionHeaderTemplate}" />
    <Setter Property="ContentTemplate" Value="{StaticResource TransitionContentTemplate}" />
</Style>
This code uses an implicit Style to set the properties on the NavigationPane, but you could also assign the properties explicitly. I've also added a QuickStart that demonstrates how this is accomplished for the next maintenance release.


Actipro Software Support

Posted 10 years ago by Bill Seddon
Avatar
Thanks for the quick response - it works!

Do you have a worked example of a code-base custom transition implementation? I've tried to write my own to apply an effect from the WPF FX library published by Microsoft on the CodePlex site but I'm failing. Of course it may be that what I'm trying to do is not possible but more likely I've got wrong and have not understood all that I must do to implement the effect.

I've implemented the OnStart/OnComplete and call EndTranstion but I'm not clear what I should be doing to apply the effect within the transtion presenter framework. I can see from the Xaml example the type of thing I should be doing but the FX effects are implemented differently.

Regards
Posted 10 years ago by Actipro Software Support - Cleveland, OH, USA
Avatar
Hi Bill,

We don't currently have a sample that shows how to do that. But our existing Transitions derive from StoryboardTransitionBase and override GetFromContentStoryboard, GetFromContentStyle, GetOppositeTransition, GetToContentStoryboard, and GetToContentStyle. You shouldn't need to override the OnStart/OnComplete, but I have not looked at the Effects Library to know that for sure.

Keep in mind that you can use the TransitionEffectElement control from the blog you linked to in place of our TransitionPresenter.


Actipro Software Support

Posted 10 years ago by Bill Seddon
Avatar
Thanks for the response. The blog is mine. The reason for wanting to try to create a transition effect based on your class is that while an effect is applied to the 'new' content when using the TransitionEffectElement the 'old' content is not disappearing so I'd thought that implementing an effect based on the your code might help me understand why. Maybe in the future.
Posted 10 years ago by Actipro Software Support - Cleveland, OH, USA
Avatar
Hi Bill,

We started work yesterday on ways to integrate the WPF FX library with our TransitionPresenter. We hope to have some details that we'll post here or in our blog in the next several days.


Actipro Software Support

Posted 10 years ago by Bill Seddon
Avatar
Thanks for letting me know. I look forward to your blog posts about your experience. Being able to call on both the existing types of transitions and those available when using shaders will be an asset.

The reason I'd taken the approach of overriding OnStart is to create an instance of an effect from the library, setup the duration variable, create a VisualBrush of the 'old' ContentPresenter, setup the effect's completed callback and initiate the effect. I then called EndTransition from the 'completed' call-back and over rode OnComplete to tear down the effect. It didn't work mind so it's probably the wrong approach.
Posted 10 years ago by Actipro Software Support - Cleveland, OH, USA
Avatar
We're integrating the shader effects into our Sample Browser now with several new QuickStarts. The Sample Browser will include the source for a new EffectTransition class that lets you just assign an Effect to it and it handles everything. We're hoping to have a new blog post out today that talks about everything. The updates should be live in the next maintenance release and will support all the WPF FX effects.


Actipro Software Support

Posted 10 years ago by Bill Seddon
Avatar
Fantastic! Looking forward to it. And thanks, you've saved me hours of frustrating experimentation.
Posted 10 years ago by Bill Seddon
Avatar
Read the blog post which is great news.

In it you mention the EffectTransition will be in the next maintenance release but conclude by saying it is in the sample application. So I'm unsure whether this means it is the sample application and is available now or that it is in the sample application that will be included with the next maintenance release.

Bill
Posted 10 years ago by Actipro Software Support - Cleveland, OH, USA
Avatar
The EffectTransition class is included as open source in our Sample Browser source code since we can't add a dependency to the WPF FX assembly from our Shared Library. These updates are not available now but will be in the next maintenance release.


Actipro Software Support

Posted 10 years ago by Bill Seddon
Avatar
I understand the constraint. As you will recall from this thread, I'm keen to use ShaderEffect instances and your work will save me having to figure out how to do it. If the release will be next week I can wait. If the release will be in three months I can't and will have to figure it out. Any idea when the maintenance release will be?

Alternatively, can you share the code for the effect transition out-of-band or explain how you were able to implement WPF FX transition effect instances?
Posted 10 years ago by Actipro Software Support - Cleveland, OH, USA
Avatar
We're not yet sure when the next release will be, but I would expect that it is sometime in June.

While we could share the code ahead of the release, the problem is that a change to one of the existing classes in the Shared Library was needed to make it work. So it wouldn't be useful to give you yet.


Actipro Software Support

The latest build of this product (v2019.1 build 0683) was released 21 days ago, which was after the last post in this thread.

Add Comment

Please log in to a validated account to post comments.