XAML Tips and Tricks

[Jason Carr]

Hey @slashguns04, see the above. :)

[imdavid555]

Adjust Wheel Curve: -To to the your desired view that you want to edit and find the grid that contains the wheel. It should be this line: <coverFlow:FlowControl x:Name="FlowControl" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Grid.Column="0" CoverFactory="{Binding CoverFactory}" ImageType="ClearLogo" CurveAmount="4.5" CameraZPosition="3.0" VisibleCount="14" PageSize="6" /> -Adjust the value in CurveAmount effects the curve of the wheel. 0 makes the wheel Vertical with no curve.

[imdavid555]

Shadow on text (Images as well?): In this example, I will add shadows to the game wheel view description text. 1. Select "WheelGamesView.xaml" in the solution Explorer 2. Then select the right-side of the view 3. Now in the Properties tab, go to Appearance > Effect > New 4. Select "Drop Shadow Effect" and hit OK Now save everything and open your theme in BigBox. Text should now have shadows in the Games Wheel view! :) Before: After:

[shadowblind]

Hi, is there any relatively simple way of reversing the side that the main menu wheel appears on? As in, have the semi-circular navigation wheel on the right-hand side rather than the left? Thanks

[elborra]

Hi, i don't know if you have already found the solution. If not here is how to do it:

To change it's curve you can do easily with a text editor for each of these files, but as you also want to change the grid layout probably you will need to do with Visual Studio. It could be done manually too but if you don't know what you are doing it becomes confusing

I recomend you to follow this tutorial to get use with some concepts

 

Easy way - Default Theme reverse: Attached you will find the default Theme "reversed" as you want. Only for Platforms Views (Text list included). The problem I see is that some cover flows and key controls inside Bigbox were planned with the idea of having the wheel or lists always on the left side, you will notice if you try this theme. Same will happen if you try to do manually it's a code matter, nothing to do with themes.

 

Hard way - Reverse wheel on any Theme - Steps:

Each of the 4 wheel views on BigBox has its own xaml file on the Theme Views directory

- PlatformWheelImageDetailsThumbsFiltersView.xalm
- PlatformWheelImageDetailsVideoFiltersView.xalm
- PlatformWheelImageVideoThumbsFiltersView.xalm
- PlatformWheelVideoDetailsThumbsFiltersView.xalm
 

1. This is the "hard" part. Open Visually or with a text editor each of the views and change the grid layout to move the wheel to the right of the screen. As the layout could be different on each theme this process has no one solution. Follow the Tutorial to learn how to do.

2. On each view change on the coverFlowControl the property CurveAmount to a negative value to "orient" the wheel :

For example:

<coverFlow:FlowControl x:Name="FlowControl" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Grid.Column="0" CoverFactory="{Binding CoverFactory}" ImageType="ClearLogo" CurveAmount="4.5" VisibleCount="14" PageSize="6" />

to

<coverFlow:FlowControl x:Name="FlowControl" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Grid.Column="0" CoverFactory="{Binding CoverFactory}" ImageType="ClearLogo" CurveAmount="-4.5" VisibleCount="14" PageSize="6" />

 

DefaultReverse.zip

[elborra]

How to override a transition effect quick guide

Transitions by default are linked to the Option->Transitions->"Choice".

Themes could overrides the default effect fixing the effect to one in particular. You will need to change each property and value for each view desired.

Here, we will override the Background transition on the PlatformWheelImageDetailsVideoFiltersView to use always the fade effect:

Search for:

<transitions:TransitionPresenter TransitionSelector="{Binding BackgroundTransitionSelector}" Content="{Binding BackgroundView}" Height="{Binding ElementName=Canvas, Path=ActualHeight}" Width="{Binding ElementName=Canvas, Path=ActualWidth}" IsContentVideo="true" />

Change to

<transitions:TransitionPresenter Transition="{transitions:FadeTransition}" Content="{Binding BackgroundView}" Height="{Binding ElementName=Canvas, Path=ActualHeight}" Width="{Binding ElementName=Canvas, Path=ActualWidth}" IsContentVideo="true" />

Other Transition values i found are:

Transition="{transitions:FadeTransition}"

Transition="{transitions:ExplosionTransition}"

Transition="{transitions:FlipTransition}"

Transition="{transitions:RotateTransition}"

All transition effect should have assigned a name/value and i believe than some of those can be more customizable like the ExplosionTransition but i haven't dig on it.

[niglurion]

Thank you, you helped me a lot for my theme 

 

Edited August 24, 2016 by niglurion

[Blugost]

How to loop video

A quick tip for anyone wanting a looping video. (This taken from my own theme, BigBoXMB.)

Might be useful for someone. You can load the video from any directory so you might want to have a custom video path in your theme. I just used Images for convenience.

            <Grid Grid.ColumnSpan="3">

                <MediaElement Name="waves" >

                    <MediaElement.Triggers>

                        <EventTrigger RoutedEvent="MediaElement.Loaded">

                            <EventTrigger.Actions>

                                <BeginStoryboard>

                                    <Storyboard>

                                        <!-- The MediaTimeline has a RepeatBehavior="Forever" which makes the media play over and over indefinitely.-->

                                        <MediaTimeline Source="pack://siteoforigin:,,,/Themes/BigBoXMB/Images/waves.mp4" Storyboard.TargetName="waves" RepeatBehavior="Forever" />

                                    </Storyboard>

                                </BeginStoryboard>

                            </EventTrigger.Actions>

                        </EventTrigger>

                    </MediaElement.Triggers>

                </MediaElement>

            </Grid>

Please note there might be a little stuttering, not sure why maybe Jason could take a look?
I'd really like to have some native looping support for video but this works well enough for now.

Edited August 25, 2016 by Blugost

[niglurion]

Does anyone know how to bind the Plateform Title on a PlateformView?

I just want the title and not the details below. My best guess is that, but it's not working (of course):

<TextBlock Text="{Binding Path=FilterTitle}" Visibility="{Binding TitleVisibility}" >

I know the title comes from FilterDetailsView.xaml but I need it alone... I'm already using this .xaml elsewhere. 
(it's for a new theme I plan to finish tomorrow).

Maybe @Jason Carr can help me?  

Or maybe extract the title or details of FilterDetailsView.xaml and insert in another one? But my tests aren't very conclusive...

Edited August 25, 2016 by niglurion

[elborra]

Yep,

I luckily found it testing names when trying to achieve same thing. You should use the Path=PlatformTitle

 <TextBlock Text="{Binding Path=PlatformTitle}" Visibility="{Binding TitleVisibility}" FontFamily="Calibri" FontSize="36" Foreground="White" FontWeight="Bold" TextWrapping="Wrap" DockPanel.Dock="Top" />

Edit: This works at least on the PlatformWheels xaml files, i have not tested for other views

Edited August 25, 2016 by elborra

[niglurion]

Thank you but it's not working on the view I'm working on.
Maybe it's because I took the TextFiltersView.xaml as a starting point. Maybe I should have taken another one 
Thank you @elborra. I will remember the name for the next time. 

Anyway, fortunately, I found an alternative to my problem (hell yeah!). 

[elborra]

@niglurion great!

I don't know if this is the solution you found, but inside TextFiltersView i got it with Path="Title" when i was trying to concatenate strings with bindings values on the same line. I took the oportunity to share (i don't know if this has been discused before):

<TextBlock Visibility="{Binding TitleVisibility}" FontFamily="Calibri" FontSize="36" Foreground="White" FontWeight="Bold" TextWrapping="Wrap" DockPanel.Dock="Top">



    <Run Text=" The platform name is: " />



    <Run Text="{Binding Path=Title}" />



</TextBlock>

You can see that with <Run Text="" /> it's possible to concatenate strings, i don't really know if there's a better way to do it.

Edited August 25, 2016 by elborra

[niglurion]

Good to know! Maybe I will need this solution quickly 
thank you again.

[Jason Carr]

Thank you all, great to see all the awesome discussion. @Blugost keep in mind that using MediaElement will force the use of Windows Media Player for the theme. Not a big deal for most people, but in the future we'll want to provide a way to do it that supports both WMP and VLC.

[Blugost]

30 minutes ago, Jason Carr said:

Thank you all, great to see all the awesome discussion. @Blugost keep in mind that using MediaElement will force the use of Windows Media Player for the theme. Not a big deal for most people, but in the future we'll want to provide a way to do it that supports both WMP and VLC.

Cool, would definitely like to see a new element for VLC video and looping integrated.

[CriticalCid]

The current media element solution is also a little buggy when you are using it for background videos. When you play another video over the background video will the border of the upper video flickering black for a few moments when the background video restarts.

I’m using the same method as well because the theme that I’m currently working on is VERY video intensive and uses a lot of different background videos. I solved this by fading out the video at the end to hide that effect. But a proper solution for this would be way better

Btw. when I googled that problem I found out that Microsoft knows about this bug for at least 4 years and doesn't seem to care to do anything about it

https://connect.microsoft.com/VisualStudio/feedback/details/760353/wpf-mediaelement-black-flicker-around-controls-with-animated-opacity-on-video-restart

 

[Jason Carr]

Ha, hence why we're trying to get away from the Windows Media Player engine. The bugs are plentiful and some of them can be really annoying. I've added it to my shortlist so hopefully I can come up with a solution soon.

[viking]

 

Hi,
I have a noob question.

In wheelPlatform view , I want to add images from the "Device" standard pictures theme folder.

This code, In the original theme, call images from "BANNER" folder : 

<transitions:TransitionPresenter TransitionSelector="{Binding ImageTransitionSelector}" Content="{Binding ImageView}"/>

What code used to call , in the same way , images from the "DEVICE" folder ?

-and-

Is it possible to create custom folder and call them in the same way ? ( dynamically depending on the choice of platform)

Thx !

Edited August 26, 2016 by viking

[Jason Carr]

Hi @viking, glad to hear you're working on themes! I'm currently working on a way to add any image you want, but currently there might not be a good way to do it. You could always include images with your theme which would get around it but of course that's not the best solution.

[viking]

Thank @Jason Carr ! I look forward to see the result to advance my theme. It will be very simple and optimized 4:3 for my arcade cabinet.

I also want to place 2 preview here. (Very inspired work from the community, by the way ). The photoshop mockup and WIP capture. (Yes, it is rather raw yet!)
The problem for PlatformWheel. I can't :

• Align images on left.
• Reduce the number of platform and margin. If I reduced more, their size remains the same and I have empty space on top and bottom.

Where and how to change this in the code? It is possible anyway?

The mokup :The WIP :

 

Edited August 27, 2016 by viking