MP2 Skin rendering engine (1 Viewer)

[craige1]

Hello MP2 Devs,

I am wondering if skin controls can be created that start off screen. If not, can then be allowed to?

I ask this as a plugin developer. We have a notification system in our plugin that shows a little message slide up from the bottom of the screen. It slide up from off screen up to the point of it sitting on the bottom of the screen. After a little while it slides back down off screen again. That all works fine except that when you first load the window you can see it on screen then immediately it slides down off screen. We had to do this way since if we start the control off screen the MP skin engine wont create it.

So my question is, in MP2 can we create controls off screen, so that as part of their animation they can slide onto screen, and then back off when needed?

 

[Baboonanza]

Hello!

Out of curiosity, how are you positioning the control off the screen?

My method would be to apply a RenderTransform to the control to 'push' it off-screen, then apply a storyboard to this to make it slide on. Here is Home.xml modified so that the Date/Time labels slide on:

<?xml version="1.0" encoding="utf-8"?>
<Include
    xmlns="www.team-mediaportal.com/2008/mpf/directx"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Source="screens\master_menu.xaml"
    >
  <Include.Resources>

    <!-- Header -->
    <ResourceWrapper x:Key="Header_Text" Resource="[Home.Title]"/>

    <Storyboard x:Key="SlidingTextStoryBoard" FillBehavior="HoldEnd">
      <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" FillBehavior="HoldEnd" Storyboard.TargetName="SlideControl" Storyboard.TargetProperty="RenderTransform.Children[0].Y">
        <SplineDoubleKeyFrame KeyTime="00:00:01" Value="0"/>
      </DoubleAnimationUsingKeyFrames>
    </Storyboard>

    <!-- Contents -->
    <ResourceWrapper x:Key="Contents_Element">
      <DockPanel LastChildFill="False">
        <DockPanel.Resources>
          <Model x:Key="TimeModel" Id="E821B1C8-0666-4339-8027-AA45A4F6F107"/>
        </DockPanel.Resources>
        <StackPanel x:Name="SlideControl" Orientation="Vertical" DockPanel.Dock="Bottom"
            HorizontalAlignment="Center" VerticalAlignment="Center">
          <StackPanel.RenderTransform>
            <TransformGroup>
              <TranslateTransform Y="150"/>
            </TransformGroup>
          </StackPanel.RenderTransform>
          <Label x:Name="Date" FontSize="{ThemeResource DateTimeFontSize}"
              HorizontalAlignment="Center"
              Content="{Binding Source={StaticResource TimeModel}, Path=CurrentDate}" />
          <Label x:Name="Time" FontSize="{ThemeResource DateTimeFontSize}"
              HorizontalAlignment="Center"
              Content="{Binding Source={StaticResource TimeModel}, Path=CurrentTime}" />
          <StackPanel.Triggers>
            <Trigger Property="IsVisible" Value="True">
              <Trigger.EnterActions>
                <BeginStoryboard x:Name="Visible_BeginStoryboard" Storyboard="{ThemeResource SlidingTextStoryBoard}"
                    HandoffBehavior="TemporaryReplace"/>
              </Trigger.EnterActions>
            </Trigger>
          </StackPanel.Triggers>
        </StackPanel>
      </DockPanel>
    </ResourceWrapper>

  </Include.Resources>
</Include>

 

[craige1]

I havnt tested that with mp2 yet, but with mp1, doing similar causes the control to be visible for alittle while until the animation that causes it to slide of screen kicks in. Will that be the case with mp2? I would prefer to start the control off screen and slide on, rather then start on screen and slide off.

 

[Albert]

AW: Re: MP2 Skin rendering engine

I havnt tested that with mp2 yet, but with mp1, doing similar causes the control to be visible for alittle while until the animation that causes it to slide of screen kicks in. Will that be the case with mp2? I would prefer to start the control off screen and slide on, rather then start on screen and slide off.

This is absolutely no problem with MP2. Try the code from Baboonanza. Simply replace the file Home.xaml. If you add the plugin ReloadSkin, you can even make changes at skinfiles while the system runs; you can press F3 to reload the screens.