Improving Menu structure (2 Viewers)

[ge2301]

About the transition effects of the main menu tiles.
As mentioned in some posts before, it would be cool being able to scroll to the next screen without entering the group menu and having a transition effect for that.
Let's assume following scenario: There are only 2 GroupMenuItems A and B with each 6 MenuTiles. Being in A and focusing one of the 2 left Menutiles and then pressing "Left" will not result in anything, because there is no group left sided to A. But beeing in A and focusing one of the 2 right sided MenuTiles and then pressing "Right" results in shifting to the next screen "B" showing it's MenuTiles.

The Transition effect would be, that the MenuTiles from A are sliding out quickly to the left and the MenuTiles of B sliding in quickly from the right side.
How to do so? On both sides of the screen (next to the MenuTiles) are 4 invisible buttons L1, L2 and R1, R2, that will get focus when trying to go right or left out of the screen. This is recognized by MenuModel and actions are defined.


What kind of changes would be required in MenuModel?

• MenuModel must be able to know, which Group is on the right and left side of the selected group
• MenuModel must be able to take the commands from Buttons L1, L2, R1 and R2 and accordingly changes the Group
• EDIT: MenuModel needs to focus the right MenuTile
  • Coming from Left --> Right Tile focussed
  • Coming from Right --> Left Tile focussed

Regarding the transition effect I'm not 100% sure yet how to realize.
Any comments from DEV's about the idea?

After above change is realized ApolloOne for MP2 can be also realized into the direction as you see it for MP1.

 

[ge2301]

I have updated previous post and added a mock-up. Do you think it can work (apart from the transition effect)?

 

[Timhoh1234]

About the transition effects of the main menu tiles.
As mentioned in some posts before, it would be cool being able to scroll to the next screen without entering the group menu and having a transition effect for that.
Let's assume following scenario: There are only 2 GroupMenuItems A and B with each 6 MenuTiles. Being in A and focusing one of the 2 left Menutiles and then pressing "Left" will not result in anything, because there is no group left sided to A. But beeing in A and focusing one of the 2 right sided MenuTiles and then pressing "Right" results in shifting to the next screen "B" showing it's MenuTiles.

The Transition effect would be, that the MenuTiles from A are sliding out quickly to the left and the MenuTiles of B sliding in quickly from the right side.
How to do so? On both sides of the screen (next to the MenuTiles) are 4 invisible buttons L1, L2 and R1, R2, that will get focus when trying to go right or left out of the screen. This is recognized by MenuModel and actions are defined.


What kind of changes would be required in MenuModel?

• MenuModel must be able to know, which Group is on the right and left side of the selected group
• MenuModel must be able to take the commands from Buttons L1, L2, R1 and R2 and accordingly changes the Group
• EDIT: MenuModel needs to focus the right MenuTile
  • Coming from Left --> Right Tile focussed
  • Coming from Right --> Left Tile focussed

Regarding the transition effect I'm not 100% sure yet how to realize.
Any comments from DEV's about the idea?

I love the idea You have posted the idea somewhere in the past I think. Now we need dev feedback!

 

[morpheus_xx]

I have thought about this idea. We can achieve this by having 3 instances of our "GridListView", each bound to another "tab".

For example I have changed the master_homemenu.xaml and duplicated the grid and moved it by -400,-50 (by RenderTransform):

        <bv:GridListView x:Name="MainMenu" DockPanel.Dock="Center" Style="{ThemeResource HomeMenuListViewStyle}" Margin="0,0,0,0"
            VerticalAlignment="Stretch" SetFocusPrio="Fallback"
            ItemsSource="{Binding Source={StaticResource MenuModel},Path=PositionedMenuItems,Mode=OneTime}"
            IsVisible="{Binding Source={StaticResource MenuModel},Path=!IsHome}">
          <bv:GridListView.Resources>
            <CommandBridge x:Key="Menu_Command" Command="{Binding Path=Command,Mode=OneTime}"/>
          </bv:GridListView.Resources>
        </bv:GridListView>

        <bv:GridListView x:Name="Left" DockPanel.Dock="Center" Style="{ThemeResource HomeMenuListViewStyle}" Margin="0,0,0,0"
            VerticalAlignment="Stretch" SetFocusPrio="Fallback"
            ItemsSource="{Binding Source={StaticResource MenuModel},Path=PositionedMenuItems,Mode=OneTime}"
            IsVisible="{Binding Source={StaticResource MenuModel},Path=!IsHome}">
          <bv:GridListView.Resources>
            <CommandBridge x:Key="Menu_Command" Command="{Binding Path=Command,Mode=OneTime}"/>
          </bv:GridListView.Resources>
          <bv:GridListView.RenderTransform>
            <TranslateTransform X="-400" Y="-50"/> <!-- Will be animated -->
          </bv:GridListView.RenderTransform>
        </bv:GridListView>

Then there should be an animation which (as example for moving focus to left):

• Slides in the left panel
• Fades out the center panel
  • (Not sure how we should technically switch the "current page", because the left one is in center then, but we need to be able to move left again)
• Switches the associated group indexes for controls

The model should expose 3 indexes, so xaml controls can bind to them (left, current, right pages) and also make sure that all GUI items are built.

 

[morpheus_xx]

I have added an example screen, which does slide in the "left" panel over the "mainmenu". Note that the items in the panel are still the same (not different pages). The animation is for testing the transition effects first.

Next would be to use real data and invoke the transition by code (i.e. also on tab change click). Last step will be separation of tab data.

 

[ge2301]

I have added an example screen, which does slide in the "left" panel over the "mainmenu"

Looks nice Just the original content should slide out to the right as well.

Attached the file with modifications

 

[morpheus_xx]

I could make good progress, transitions to left and right are working. I've added 2 temporary buttons to page left/right in top left ("P < >"). They will be removed later once the focus movement handling is implemented.

Just the original content should slide out to the right as well.

I think this will be your part to be creative, in only prepare the code to make it work I suggest you check out the current tranisiton look and feel, than you can decide how to animate the old page content best way.

Changes are commited to origin/EXP_BV_MenuTransitions

While you can tweak the style of transition, I will look into using focus movements to start page transition...

 

[ge2301]

I could make good progress, transitions to left and right are working. I've added 2 temporary buttons to page left/right in top left ("P < >"). They will be removed later once the focus movement handling is implemented.

Looks perfect so far. Thanks a lot!

I think this will be your part to be creative, in only prepare the code to make it work I suggest you check out the current tranisiton look and feel, than you can decide how to animate the old page content best way.

You are right. The only problem is, that there is currently only one effect for "MainMenu" based on Opacity.
If the effect is also "Transition" - as I mentioned - it depends, if you go to right or left, so two storyboards are necessary.

I can try to modify it, but not 100% sure, if it is easy We'll see.
Edit: It's easy, I can do it

 

[morpheus_xx]

I just have pushed another update. Now the "change page by focus left/right" works in general. Exceptions are:

• Empty tab pages, i.e. if server is not (yet) connected. No items, no foucs, no tab change
• "Home" tab with latest media items. When focus is inside list, it doesn't has the special logic of grid view. Have to check alternatives

 

[ge2301]

You are right. The only problem is, that there is currently only one effect for "MainMenu" based on Opacity.
If the effect is also "Transition" - as I mentioned - it depends, if you go to right or left, so two storyboards are necessary.

I believe my code it not so wrong, but it causes errors.
I have added transition effects for the MainMenu as for NextMenu (Example SlideInRight):

          <Storyboard x:Key="SlideInRight" FillBehavior="Stop">
            <StaticResource ResourceKey="TransitionBase"/>
            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" FillBehavior="HoldEnd" Storyboard.TargetName="NextPage" Storyboard.TargetProperty="RenderTransform.X">
              <SplineDoubleKeyFrame KeyTime="00:00:00" Value="1920"/>
              <SplineDoubleKeyFrame KeyTime="{StaticResource TransitionDuration}" Value="0"/>
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" FillBehavior="HoldEnd" Storyboard.TargetName="MainMenu" Storyboard.TargetProperty="RenderTransform.X">
              <SplineDoubleKeyFrame KeyTime="00:00:00" Value="0"/>
              <SplineDoubleKeyFrame KeyTime="{StaticResource TransitionDuration}" Value="-1920"/>
            </DoubleAnimationUsingKeyFrames>
          </Storyboard>
        </DockPanel.Resources>

I have added to transitionbase for MainMenu (same as for NextMenu):

            <ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="MainMenu" Storyboard.TargetProperty="AnimationStarted1">
              <DiscreteObjectKeyFrame KeyTime="00:00:00" Value="True" />
            </ObjectAnimationUsingKeyFrames>
            <ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="MainMenu" Storyboard.TargetProperty="AnimationCompleted1">
              <DiscreteObjectKeyFrame KeyTime="{StaticResource TransitionDuration}" Value="True" />
            </ObjectAnimationUsingKeyFrames>

I have added (0/0) RenderTransform and AnimationStarted/Completed to MainMenu

        <bv:GridListView x:Name="MainMenu" DockPanel.Dock="Center" Style="{ThemeResource HomeMenuListViewStyle}" Margin="0,0,0,0"
            VerticalAlignment="Stretch" SetFocusPrio="Default"
            ItemsSource="{Binding Source={StaticResource MenuModel},Path=PositionedMenuItems,Mode=OneTime}"
            AnimationStarted="{Binding Source={StaticResource MenuModel},Path=AnimationStarted1,Mode=OneWayToSource}"
            AnimationCompleted="{Binding Source={StaticResource MenuModel},Path=AnimationCompleted1,Mode=OneWayToSource}"
            IsVisible="{Binding Source={StaticResource MenuModel},Path=!IsHome}">
          <bv:GridListView.Resources>
            <CommandBridge x:Key="Menu_Command" Command="{Binding Path=Command,Mode=OneTime}"/>
          </bv:GridListView.Resources>
          <bv:GridListView.RenderTransform>
            <TranslateTransform X="0" Y="0"/>
          </bv:GridListView.RenderTransform>
        </bv:GridListView>

I don't know the usage of AnimationStarted and Completed, but I thought it's necessary also for MainMenu. If I leave it, it results in same error anyway