How to make a scroller/pivot start at first item?

A place for App developers to hang out / post
Post Reply
MrNorth

Posts: 60
Joined: Sat May 18, 2013 9:46 am
Location:

HTPC Specs: Show details

How to make a scroller/pivot start at first item?

#1

Post by MrNorth » Fri Jan 31, 2014 10:20 am

Hi!

I have an UI with a pivot control. It is a popup control so I show/hide it from the parent. The problem I have is that if I in the popup selected item 2 in the pivot, then close the popup and then open it again, I want the pivot to be "reset" to index 0. The pivot has a simple local choice as a datasource.

I have tried this, when doing the "hide", but it didn't work:

Code: Select all

 <Changed Source="[Close.Invoked]">
        <Actions>
          <Set Target="[PivotModel.ChosenIndex]" Value="0"></Set>
        
        </Actions>
      </Changed>
I guess the problem is that the scroller/repeater is not "updated" when doing the above. Is there any way to force an update of this scroller, so it selects the first item, as is suggested by the above code as the datasource? It would be best if it was possible to do it from mcml...

/Henrik

DanB_DE

Posts: 21
Joined: Sun Jul 31, 2011 8:58 am
Location:

HTPC Specs: Show details

#2

Post by DanB_DE » Sun Feb 02, 2014 3:13 pm

hi henrik,

there are several ways to sync a scroller and repeater. at the moment i don’t have full access to my source Code, but i have a little snippet here:

i guess your are using a scroller and repeater inside that repeats the Pivots:

<!--This Rule sets back the Pivots to Index 0 / Home. On Every start Pivots starts then from 0 | DanB -->
<Condition Source="[Overlay.ShowSlideDeck]" SourceValue="false" ConditionOp="ChangedTo">
<Actions>
<Invoke Target="[ScrollingData.Home]"/>
</Actions>
</Condition>

My Popup is called SlideDeck. the visibility is controlled by a property called Overlay.ShowSlideDeck. Every time i close the SlideDeck this rule is triggert
and set back the scroller to Home/0.

as i said before, there are several ways, but this is used on my plugs a long time and works great.

hth ;-)

Dan
#

MrNorth

Posts: 60
Joined: Sat May 18, 2013 9:46 am
Location:

HTPC Specs: Show details

#3

Post by MrNorth » Mon Feb 03, 2014 7:51 pm

Hi!

Thanks for the suggestion!

I tried the above solution with a bool property on my pivot UI which I set as soon as the parent UI (the popup window) is closed. I have added a message box just to be sure the event fires, and indeed, when I closse the popup dialog, the ScrollingData.Home is invoked inside the pivot control, so obviously the binding between the different UIs via the bool is working. Why the Scrollingdata is not working is beyond me... my guess there is a property on the scrollinghandler or scrollingdata that I have forgot...

Here is the code for the pivotcontrol I use:

Code: Select all

<Mcml xmlns="http://schemas.microsoft.com/2006/mcml"
        xmlns:cor="assembly://MSCorLib/System"
      xmlns:me="Me"
      xmlns:a="assembly://MediaCenterApplication4/MediaCenterApplication4"
      >

  <Aggregate Source="resx://MediaCenterApplication4/MediaCenterApplication4.Resources/DetailsPivotItem" />

  <UI Name="DetailsPivot">

    <Properties>
      
      <Choice Name="Model" Choice="$Required"/>
      <cor:Boolean Name="Closing" cor:Boolean="false" />
      <a:Application Name="Application"
                        Application="$Required" />
    </Properties>

    <Locals>
      <ScrollingData 
        Name="ScrollingData" 
        EndPadding="200"  
        EndPaddingRelativeTo="Near"/>
      <ScrollingHandler Name="ScrollingHandler" HandlerStage="Bubbled" />
    </Locals>

    
    <Rules>    
  

      <!--<Default Target="[ScrollingHandler.ScrollingData]" Value="[ScrollingData]" />
      <Default Target="[ScrollingData.Repeater]" Value="[ButtonRepeater]" />-->

      

      <Binding Target="[ScrollingHandler.ScrollingData]" Source="[ScrollingData]"/>
      <Binding Target="[Scroller.ScrollingData]" Source="[ScrollingData]" />


      <Condition Source="[Closing]" SourceValue="true">
        <Actions>
          <Invoke Target ="[Application.DialogTest]" strClickedText="WORKING!!!!"></Invoke>
          <Invoke Target="[ScrollingData.Home]"/>
          <!-- After reset the scroller, reset the control value also, otherwise it only works first time -->
          <Set Target="[Closing]" Value="false" />
        </Actions>
      </Condition>

      
      <Rule ConditionLogicalOp="And">
        <Conditions>
          <Equality Source="[Input.DeepMouseFocus]" Value="true"/>
          <Equality Source="[Input.DeepKeyFocus]" Value="false"/>
          <Equality Source="[Model.Description]" Value=""/>
        </Conditions>
        <Actions>
          <Set Target="[Model.Description]" Value="Active"/>
          <!--<PlayAnimation Animation="animation://me:PivotItemFocusOn" Target="[Scroller]" />-->
        </Actions>
      </Rule>

      <Rule ConditionLogicalOp="And">
        <Conditions>
          <Equality Source="[Input.DeepMouseFocus]" Value="false"/>
          <Equality Source="[Input.DeepKeyFocus]" Value="true"/>
          <Equality Source="[Model.Description]" Value=""/>
        </Conditions>
        <Actions>
          <Set Target="[Model.Description]" Value="Active"/>
          <!--<PlayAnimation Animation="animation://me:PivotItemFocusOn" Target="[Scroller]" />-->
        </Actions>
      </Rule>

      <Rule ConditionLogicalOp="And">
        <Conditions>
          <Equality Source="[Input.DeepMouseFocus]" Value="false"/>
          <Equality Source="[Input.DeepKeyFocus]" Value="false"/>
        </Conditions>
        <Actions>
          <Set Target="[Model.Description]" Value=""/>
          <!--<PlayAnimation Animation="animation://me:PivotItemFocusOff" Target="[Scroller]" />-->
        </Actions>
      </Rule>

    </Rules>

    <Content>

      <Scroller  Name="Scroller"
                Orientation="Horizontal"
                FadeSize="-30"                
                Navigation="ContainHorizontal"
                ScrollingData="[ScrollingData]"                
                CenterPointPercent="0.75,0.5,0.5"
                Scale="0.9,0.9,0.9"
                >
        <ScrollingData>
          <ScrollingData  />
        </ScrollingData>
        <Children>

          <Repeater  Source="[Model.Options]" Layout="HorizontalFlow" Name="ButtonRepeater">

            <Animations>
              <Animation Animation="animation://me:ScrollerMoveItemSmooth"/>
            </Animations>

            <Layout>
              <FlowLayout RepeatGap="100,0" Spacing="70,0" ItemAlignment="Near"/>
            </Layout>

            <Content>
              <me:DetailsPivotItem Label="[RepeatedItem.ToString]"
                            Index="[RepeatedItemIndex]"
                            Model="[Model]"
                            />
            </Content>

          </Repeater>

        </Children>
        <Animations>
          <Animation Animation="animation://me:Slide.NavRight.Show"/>
          <!--<Animation Animation="animation://me:Slide.NavRight.Hide"/>-->
        </Animations>
      </Scroller>

    </Content>
  </UI>
  
  <Animation Name="ScrollerMoveItemSmooth" Type="Move">
    <Keyframes>
      <PositionKeyframe Time="0.0" Value="0,0,0" RelativeTo="Current" Interpolation="EaseOut" />
      <PositionKeyframe Time="0.2" Value="0,0,0" RelativeTo="Final" />
    </Keyframes>
  </Animation>

  <Animation Name="PivotItemFocusOn" CenterPointPercent="0.5,0.5,0">
    <Keyframes>
      <AlphaKeyframe Time="0" Value="0.75"/>
      <ScaleKeyframe Time="0" Value="1,1,1"/>
      <ScaleKeyframe Time="0.2" Value="1.05,1.05,1.05"/>
      <AlphaKeyframe Time="0.2" Value="1"/>
    </Keyframes>
  </Animation>

  <Animation Name="PivotItemFocusOff" CenterPointPercent="0.5,0.5,0">
    <Keyframes>
      <AlphaKeyframe Time="0" Value="1"/>
      <ScaleKeyframe Time="0" Value="1.05,1.05,1.05"/>
      <ScaleKeyframe Time="0.2" Value="1,1,1"/>
      <AlphaKeyframe Time="0.2" Value="0.75"/>
    </Keyframes>
  </Animation>

  <Animation Name="Slide.NavRight.Show" Type="Show">
    <Keyframes>
      <AlphaKeyframe Time="0.0" Value="0.0" RelativeTo="Absolute" Interpolation="Log" />
      <AlphaKeyframe Time="0.1" Value="0.0" />
      <AlphaKeyframe Time="0.2" Value="1.0" />
      <PositionKeyframe Time="0.0" Value="600,0,0" Interpolation="EaseIn,80" />
      <PositionKeyframe Time="0.2" Value="0,0,0"/>
    </Keyframes>
  </Animation>
  <Animation Name="Slide.NavRight.Hide" Type="Hide">
    <Keyframes>
      <AlphaKeyframe Time="0.0" Value="1.0" RelativeTo="Current" />
      <AlphaKeyframe Time="0.2" Value="0.0" RelativeTo="Absolute" />
      <PositionKeyframe Time="0.0" Value="0,0,0" RelativeTo="Current" Interpolation="Log" />
      <PositionKeyframe Time="0.5" Value="-1000,0,0" RelativeTo="Current" />
    </Keyframes>
  </Animation>


</Mcml>

It is WIP code as you might see. I use the EndPadding to keep the focus in the beginning and let the items slide to mimic the WMC native UI. I doubt that is causing my problems. There must be something that makes the control "remember it's position. Could it be the Choice collection it is bound to?

Anyway, when I close the popup, the messagebox that says "WORKING!!!" is displayed, so I know the bool flag is working properly...

Any ideas? I tried reading up on th scroller control on MSDN, but couldn't quite figure out which of the MANY properties that might interfere with what I am trying to acheive...

/H

DanB_DE

Posts: 21
Joined: Sun Jul 31, 2011 8:58 am
Location:

HTPC Specs: Show details

#4

Post by DanB_DE » Mon Feb 03, 2014 8:38 pm

hi,

tomorrow i have the chance to test / check your code. meanwhile i have a snippet from my code, for clarity i removed all unnecessary code.

<UI Name="Pivot_SlideDeck">

<Locals>
<ScrollingHandler Name="ScrollingHandler" HandlerStage="Bubbled" />
</Locals>

<Properties>

<ScrollingData Name="ScrollingData" LockedAlignment="0.0" LockedPosition="0.00"/>
<a:Overlay Name="Overlay" Overlay="$Required" />
<a:FB Name="FB" FB="$Required"/>

<Choice Name="Pivots"
Wrap="true">
<Options>
<cor:String String="Test1" />
<cor:String String="Test2" />
<cor:String String="Test3" />
</Options>
</Choice>
</Properties>

<Rules>
<Default Target="[ScrollingHandler.ScrollingData]" Value="[ScrollingData]" />
<Default Target="[ScrollingData.Repeater]" Value="[ButtonRepeater]" />


<!--This Rule sets back the Pivots to Index 0 / Home. On Every start Pivots starts from 0 -->
<Condition Source="[Overlay.ShowSlideDeck]" SourceValue="false" ConditionOp="ChangedTo">
<Actions>
<Invoke Target="[ScrollingData.Home]"/>
</Actions>
</Condition>

</Rules>

<Content>
<Clip Name="Clip" FadeSize="-76" MinimumSize="560,100" MaximumSize="560,100" >
<Children>
<Scroller Name="Scroller" Orientation="Horizontal" ScrollingData="[ScrollingData]"
CenterPointPercent="0.5,0.5,0.5" Scale="0.9,0.9,0.9" >
<Children>
<Repeater Source="[FB.SlideDeckCallsPivotChoice.Options]" Name="ButtonRepeater" >
<Layout>
<FlowLayout Repeat="Never" RepeatGap="100,0" Spacing="55,0" ItemAlignment="Near" AllowWrap="false"/>
</Layout>
<Content>

<me:PivotItem_SlideDeck Label="[RepeatedItem.ToString]"
Index="[RepeatedItemIndex]"
Pivots="[FB.SlideDeckCallsPivotChoice]"
Overlay="[Overlay]"
/>
</Content>
</Repeater>
</Children>
</Scroller>
</Children>
</Clip>
</Content>
</UI>

hth

PS: How can i inject code with this special layout as you did ?

MrNorth

Posts: 60
Joined: Sat May 18, 2013 9:46 am
Location:

HTPC Specs: Show details

#5

Post by MrNorth » Mon Feb 03, 2014 11:50 pm

Hi!

For the "special layout" simply press the "code" button, it will add a code tag where you can simply paste the code.

I have solved the problem with resetting the pivot. I spent the entire evening testing various stuff, and finally I cracked it. The problem (and solution) is almost hilarious.

It seems as if when an UI is set to visible=false it won't run commands on that UI. Maybe someone who is better familiar with the MCML rendering engine want to explain this, but the solution to the problem was to add a 10 ms timer on the main UI that closes the popup. Those 10 ms are enough for the pivot to reset using your code. Maybe this problem makes perfect sense, but after spending several hours looking at MCML, I can't grasp it. The accepted way to show the "details" popup is to have an UI on the main form that you simply show/hide, making visible true/false. And then I catch the "Back" button, to show/hide the popup. I couldn't realize this strategy was that "dangerous"... :)

Problem solved, but extremly dirty. Better solutions are greatly appreciated.

/H

Post Reply