TransitionContentControl within a control template

Hi there,

I try to create a control that displays one item at time out of a list of items. Based on the item type a DataTemplate is selected. My problem here is that the TransitionContentControl is not animating.

I attached a demo. I guess I get the style for my control wrong:

<Style TargetType="local:HubLiveTile">
    <Setter Property="Template">
      <Setter.Value>
        <ControlTemplate TargetType="local:HubLiveTile">
          <StackPanel>
            <Border Background="{TemplateBinding Background}"
                    BorderBrush="{TemplateBinding BorderBrush}"
                    BorderThickness="{TemplateBinding BorderThickness}">

              <ContentPresenter>
                <metroElements:TransitionContentControl 
                  x:Name="Transition"                
                  Content="{TemplateBinding Content}"
                  EnterTransition="{TemplateBinding EnterTransition}"
                  ExitTransition="{TemplateBinding ExitTransition}"
                 />
              </ContentPresenter>

            </Border>
          </StackPanel>

        </ControlTemplate>
      </Setter.Value>
    </Setter>
  </Style>

I use the nightly version: MetroElementsProfessional-20130603

Any help here is much appreciated :-)

Regards, Sörnt

Hello Sörnt

I'll get back to you about a solution to this first thing tomorrow.

Jason Fauchelle

Hello Jason,

I just found a solution. The problem here was that I didn't realize that a TemplateSelector replaces the whole ControlTemplate. I thought it creates the Content only. So effectly the whole construct doesn't use the TansitionContentControl at all. I moved the the TemplateSelector to the ControlTemplate (TransitionContentControl) and now the things get animated :-)

On thing what is a bit annoying: My TemplateSelector searches the resources from bottom (current Parent) up to the top for a matching DataTemplate. If it doesn't find a Template within the controls hierarchy, it searches within the application resources. But a DataTemplate has no Parent. So my DataTemplates must now be defined at the application resources.

I attached the updated version for review. Would be fine if you find time to have a look at it, maybe there are some issues I am not aware of.

Sörnt Poppe

Hello Sörnt

I've looked at your updated app and find there are no further issues. You solved the issue exactly as it can be solved.

Your app has also made me aware of a bug in the control: the exiting item was not using the template selector. I've resolved this at our end which will be available in the next nightly build of Metro Elements.

Some tips you may already be aware of: you don't need the ContentPresenter in the generic theme anymore. You probably don't need the StackPanel either, but I'm not completely sure. Also, if you are going to keep the control extending ContentControl, then it's best to use it's ContentTemplateSelector property rather than adding your ItemContentTemplateSelector property. Alternatively you wouldn't need to extend ContentControl.

Jason Fauchelle

Hello Jason,

thanks for the feedback and the fix. I updated my control and It is all now working as it should.

Sörnt