Jump to content
LaunchBox Community Forums

XAML Tips and Tricks


Jason Carr

Recommended Posts

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.
  • Like 2
Link to comment
Share on other sites

Shadow on text (Images as well?): In this example, I will add shadows to the game wheel view description text. Untitled-1.png 1. Select "WheelGamesView.xaml" in the solution Explorer 2. Then select the right-side of the view Untitled2-1.png 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: Untitled2-2.png After: Untitled-3.png
  • Like 5
Link to comment
Share on other sites

  • 2 weeks later...

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

  • Like 2
Link to comment
Share on other sites

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.

  • Like 3
  • Thanks 1
Link to comment
Share on other sites

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 by Blugost
  • Like 1
  • Thanks 1
Link to comment
Share on other sites

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? 9_9 

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

Edited by niglurion
Link to comment
Share on other sites

Yep,

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




 <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 by elborra
  • Like 2
Link to comment
Share on other sites

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 xD
Thank you @elborra. I will remember the name for the next time. :)

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

Link to comment
Share on other sites

@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 by elborra
  • Like 1
Link to comment
Share on other sites

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. :)

  • Like 1
Link to comment
Share on other sites

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

 

  • Like 1
Link to comment
Share on other sites

 

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 by viking
Link to comment
Share on other sites

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 :x). 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 :test_v1.jpgThe WIP :

actual_v1.PNG

 

Edited by viking
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...