Guidance on creating a BigBox Theme

billyc999 · December 9, 2016

ok so ive nearly got all my systems finally set up (after years of different frontends)

now i want to move onto making a main menu theme but have no experiance in using xaml but hopefully i should pickup pretty easy

i already installed Visual Studio

i have a couple of questions, i hope someone maybe able to answer

first looking at the image below which would be the best way to start, using the default theme or someone else's theme for editing

in the image you will also notice weather time and date at the upper right is it possible to add these by any method ie by swf ect

below the wheel bar there would need to be a single line of scrolling text, lets call it an history of the machine (Different for each system) could this be added maybe having the theme read a seperate xml file or something along the lines of

each system will need its own deafault background ( i assume this is possible)

the dimensions of the video will be really wide like the box in the image

and system info taken from launchbox will be placed on the screen somewhere (this is obviously possible as its in most themes)

thank you to anyone who as the patience in assisting

PS this is a really quick mockup

CriticalCid · December 9, 2016

The best way to get started with XAML is probably the Tutorial series from Jason himself: https://www.youtube.com/playlist?list=PL6pTDaHeAz-X8yNgOD3DPxUf1gaB2FLzb

There’s also a documentation.pdf file in the “Themes” folder of your LaunchBox installation which features most of the LaunchBox specific XAML elements.

The XAML Tips and Tricks thread is also quite useful: http://forums.launchbox-app.com/topic/28698-xaml-tips-and-tricks/

And last but not least can you grab some themes in the download section and look into their XAML codes to learn how they have achieved the things you want to use yourself.

I also advice to always use the default theme as base for your own themes because it's the most clean and stable theme to build on.

billyc999 · December 9, 2016

ah cool , i never saw there was a bunch of tutorials, when i looked i only saw 1

thank you for the advice

billyc999 · December 9, 2016

the second tutorial was more iformative, quick question i did what you said regarding grabing some themes.. well yours actually as it as certain elements similar to the desisgn i am after, the black bar on the horizontal themes is that an image or is that just created with code. i assume if i use an image for the black bar i can use the zindex to place the images in order of appearance.

CriticalCid · December 9, 2016

I’m no designer and have zero Photoshop skills. So all of my theme elements (except the background video) were made entirely with code.

billyc999 · December 9, 2016

cool, little snippets of information like this are very helpful, one last question i forgot to ask

say i am editing platformwheel1filtersview.xml i assume this would be my base for a main menu theme

do i delete everything off the canvas or edit whats there. sorry for the questions

CriticalCid · December 9, 2016

You want to completely restructure the main menu elements. In this case it’s indeed better to just delete everything and start from scratch because you have to set all columns and rows completely new.

To answer one of your questions above, yes you can set individual background images for all platforms. Just put an image of your choice into ".\LaunchBox\Images\Platforms\"Platform Name"\Fanart". If you want to use this mechanic in your theme than you can leave the default background code in there. So I would advise to just delete everything between

</Grid.Background>

and the last </Grid> line

It’s also no coincidence that my horizontal platform wheel view looks similar to what you have in your mind. Aeon Nox was a huge inspiration for this particular view

billyc999 · December 9, 2016

yep love nox

i ran into a problem, for some reason i cant get the bar across the screen to sit correctly, i used part of your code for horizontal wheel as it perfect match to nox but no matter how i try to adjust the bar.png it always is off center.

here's the code, ive set it up to 1920 across but i assume i could make a smaller bar and strecth itto fit the required area, at present i have the path to the bar.png as an absolute path just for my refrence




<UserControl xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"



             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"



             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"



             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"



             xmlns:transitions="clr-namespace:Unbroken.LaunchBox.Wpf.Transitions;assembly=Unbroken.LaunchBox.Wpf"



             xmlns:coverFlow="clr-namespace:Unbroken.LaunchBox.Wpf.Controls.CoverFlow;assembly=Unbroken.LaunchBox.Wpf"



             xmlns:cal="http://www.caliburnproject.org"



             xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"



             mc:Ignorable="d"



             d:DesignHeight="1080" d:DesignWidth="1920" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Style="{DynamicResource UserControlStyle}">



    <Canvas Name="Canvas">



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



        <Grid Height="104" Width="1910" Canvas.Top="813" Canvas.Left="0">







            <Image Source="H:\LaunchBox\Themes\custom\Elements\bar.png" HorizontalAlignment="Left" Height="120" VerticalAlignment="Top" Width="1920" Margin="0,0,-10,-16"/>



            <!--WHEEL-->



            <Grid Grid.Row="1">



                <Grid.RowDefinitions>



                    <RowDefinition Height="1*" />



                    <RowDefinition Height="98*" />



                    <RowDefinition Height="1*" />



                </Grid.RowDefinitions>



                <Grid Grid.Row="0" Opacity="0.35" Background="Black" Panel.ZIndex="2"/>



                <Grid Grid.Row="2" Opacity="0.35" Background="Black" Panel.ZIndex="2"/>



                <Grid Grid.Row="0">



                    <StackPanel Height="auto" Width="auto" DockPanel.Dock="Top" Background="White" Opacity="0.5" >



                        <StackPanel.Effect>



                            <DropShadowEffect Color="#FFFFFF" Direction="0" ShadowDepth="0" BlurRadius="22" RenderingBias="Quality"/>



                        </StackPanel.Effect>



                    </StackPanel>



                </Grid>



                <Grid Grid.Row="1">



                    <Grid.ColumnDefinitions>



                        <ColumnDefinition Width="96*" />



                        <ColumnDefinition Width="89*"/>



                        <ColumnDefinition Width="130*" />



                        <ColumnDefinition Width="185*" />



                    </Grid.ColumnDefinitions>



                    <coverFlow:FlowControl x:Name="FlowControl" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Grid.Column="0" Grid.ColumnSpan="4" ImageType="Clear Logo"



							CurveAmount="0" CameraZPosition="9" VisibleCount="14" PageSize="6" ItemZPosition="1.0" SelectedItemZPosition="1.0" Spacing="3.8" Panel.ZIndex="1" >



                        <coverFlow:FlowControl.CoverFactory>



                            <coverFlow:HorizontalWheelCoverFactory />



                        </coverFlow:FlowControl.CoverFactory>



                    </coverFlow:FlowControl>







                </Grid>



                <Grid Grid.Row="2">



                    <StackPanel Height="auto" Width="auto" DockPanel.Dock="Top" Background="White" Opacity="0.5" >



                        <StackPanel.Effect>



                            <DropShadowEffect Color="#FFFFFF" Direction="0" ShadowDepth="0" BlurRadius="22" RenderingBias="Quality"/>



                        </StackPanel.Effect>



                    </StackPanel>



                </Grid>



            </Grid>







        </Grid>



    </Canvas>



</UserControl>

this is what the output looked like

Edited December 9, 2016 by billyc999

CriticalCid · December 9, 2016

You’ve set the width of your canvas to just 1910 and the height to 104. But your image is set to 1920x120. You’ve tried to compensate that with the Margin property but it doesn’t seem to work. I assume that the image tries to keep its aspect ratio and because it hasn’t enough space it doesn’t fill the whole screen. Maybe you could try to set the Horizontal Alignment to Stretch, give the image the size it needs or resize the image itself.

I’m also surprised that BigBox didn’t give you an error message because you have assigned your wheel to Row 1 but you haven’t defined any Rows in your view yet.

CriticalCid · December 9, 2016

You could also try to set the stretch property for the image. It's


Stretch="value"

Values:

https://msdn.microsoft.com/en-us/library/system.windows.media.stretch(v=vs.110).aspx

billyc999 · December 10, 2016

cool i could see the values better when i opened the xml file with notepad++, which now means it fits the required size

something that i havent been able to figure out for a few hours, is how i can get the system videos included in the theme

the video sizes arent standard they are 812 x 214 but ill be using the theme to strecth them.

i assume i make a grid which i did, but i cant figure how to go from there, i tried copy and pasting your video part from you script to see how it works but that made a really small video in the wheel bar

        <transitions:TransitionPresenter TransitionSelector="{Binding BackgroundTransitionSelector}" Height="{Binding ElementName=Canvas, Path=ActualHeight}" Width="{Binding ElementName=Canvas, Path=ActualWidth}" IsContentVideo="true" >
            <Grid HorizontalAlignment="center" Height="321" Margin="351,160,351,0" VerticalAlignment="Top" Width="1218"/>
        </transitions:TransitionPresenter>
        <Grid Height="120" Width="{Binding ElementName=Canvas, Path=ActualWidth}" Canvas.Top="810">

CriticalCid · December 10, 2016

I personally use a main grid and organize the complete structure of the view with Columns and Rows in this one. It's way easier than just adding a bunch of grids and try to get them in to the right position with Alignment and Margin properties.

billyc999 · December 10, 2016

ah that make's sense. i have been watching the binding videos but for the life of me cant figure how i add the video, id thought copy and paste from your theme should of worked and maybe it does i just cant seem to move and resize as it seems it puts it in the same place as the wheels bar. ill keep trying. this seems like its quite advance but im probably just been a noob that isnt seeing what's in front of me

CriticalCid · December 10, 2016

When I create a new view I will always consider first what kind of elements I will need. Then I estimate how much space each element will probably take. Based on that I define all Grids and Rows.

For example: Based on your mockup you will need 5 elements.

1. The time/weather

2. The platform video

3. The system info

4. The wheel

5. The scrolling description

Because you also want some space between all elements you will need something as distance pieces. You could use the margin property for that or add additional rows/columns between your elements. I personally prefer additional rows/columns but everybody to his own.

In your case it could look something like this:


<Grid.RowDefinitions>

	<RowDefinition Height="4*" /> <!--TIME-->

	<RowDefinition Height="6*" /> <!--SPACER-->

	<RowDefinition Height="20*" /> <!--VIDEO-->

	<RowDefinition Height="2*" /> <!--SPACER-->

	<RowDefinition Height="36*" /> <!--SYSTEMINFO-->

	<RowDefinition Height="2*" /> <!--SPACER-->

	<RowDefinition Height="11*" /> <!--VIDEO-->

	<RowDefinition Height="4*" /> <!--SYSTEMDESCRIPTION-->

	<RowDefinition Height="15*" /> <!--SPACER-->

</Grid.RowDefinitions>

I personally like to do this manually because it’s easier for me to divide exactly 100% over all elements. This way it’s easier to imagine how everything will turn out or you can calculate exactly how much percent a certain element will need. Adding and resizing these with the Visual Studio GUI will just lead to a bunch of cryptic numbers and it’s extremely hard to tell directly in the code how much space a certain row/column will probably take. Of course you could also use fix pixel values instead of percentages but that will limit your view to a certain desktop resolution.

So if you want to add the video than you can simply add it to the Row that you have created for it.


<transitions:TransitionPresenter Grid.Row="2" TransitionSelector="{Binding ImageVideoTransitionSelector}" Content="{Binding ImageVideoView}" IsContentVideo="true" />

Just keep in mind that the numeration of Grids and Rows always start at 0. So the row for the video may be the third row in your view but it’s number is actually 2.

And if the size of your video isn't right than you just have to change the height of your row.

CriticalCid · December 10, 2016

Btw. I just have checked if it’s possible to add the time and date to a view. It’s possible but the time won’t get updated and It always stays at the exact same time on which it was when you have opened the view. So that probably requires some code in the backend first.

I’m also not sure if it’s possible to add some extern code for a weather widget or similar. That’s a question that @Jason Carr has to answer.

billyc999 · December 10, 2016

Thank you very much for the replies, as i've been reading regarding the date, time ect i discovered they needed extra code so i assumed they wasnt possible at this present time, ive seen lots of examples that all have the xaml and C# code

billyc999 · December 10, 2016

Should i be able to play flv videos , i have them in the theme/videos/platform folder

not sure if i did something wrong in the code... The RowDefinitions help make things make more sense thank you for that




<UserControl xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

             xmlns:transitions="clr-namespace:Unbroken.LaunchBox.Wpf.Transitions;assembly=Unbroken.LaunchBox.Wpf"

             xmlns:coverFlow="clr-namespace:Unbroken.LaunchBox.Wpf.Controls.CoverFlow;assembly=Unbroken.LaunchBox.Wpf"

             xmlns:cal="http://www.caliburnproject.org"

             xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"

             mc:Ignorable="d"

             d:DesignHeight="1080" d:DesignWidth="1920" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Style="{DynamicResource UserControlStyle}">

    <Canvas Name="Canvas">

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

        <Grid Height="{Binding ElementName=Canvas, Path=ActualHeight}" Width="{Binding ElementName=Canvas, Path=ActualWidth}">



            <Grid.RowDefinitions>

                <RowDefinition Height="4*" />

                <!--TIME-->

                <RowDefinition Height="6*" />

                <!--SPACER-->

                <RowDefinition Height="32*" />

                <!--VIDEO-->

                <RowDefinition Height="2*" />

                <!--SPACER-->

                <RowDefinition Height="32*" />

                <!--SYSTEMINFO-->

                <RowDefinition Height="2*" />

                <!--SPACER-->

                <RowDefinition Height="10*" />

                <!--WHEEL-->

                <RowDefinition Height="4*" />

                <!--SYSTEMDESCRIPTION-->

                <RowDefinition Height="8*" />

                <!--SPACER-->

            </Grid.RowDefinitions>

            <Image Source="H:\LaunchBox\Themes\custom\Elements\bar.png" HorizontalAlignment="Left" Height="120" VerticalAlignment="Stretch" Width="1920" Margin="-10,0,0,32" Grid.Row="6" Grid.RowSpan="2"/>

            <transitions:TransitionPresenter Grid.Row="2" TransitionSelector="{Binding ImageVideoTransitionSelector}" Content="{Binding ImageVideoView}" IsContentVideo="true" Margin="50,0,50,0" />

            <!--WHEEL-->

            <Grid Grid.Row="6">

                <Grid.RowDefinitions>

                    <RowDefinition Height="0*" />

                    <RowDefinition Height="100*" />

                    <RowDefinition Height="0*" />

                </Grid.RowDefinitions>

                <Grid Grid.Row="0" Opacity="0.35" Background="Black" Panel.ZIndex="2"/>

                <Grid Grid.Row="2" Opacity="0.35" Background="Black" Panel.ZIndex="2"/>

                <Grid Grid.Row="0">

                    <StackPanel Height="auto" Width="auto" DockPanel.Dock="Top" Background="White" Opacity="0.5" >

                        <StackPanel.Effect>

                            <DropShadowEffect Color="#FFFFFF" Direction="0" ShadowDepth="0" BlurRadius="22" RenderingBias="Quality"/>

                        </StackPanel.Effect>

                    </StackPanel>

                </Grid>

                <Grid Grid.Row="1">

                    <Grid.ColumnDefinitions>

                        <ColumnDefinition Width="37*" />

                        <ColumnDefinition Width="26*" />

                        <ColumnDefinition Width="37*" />

                    </Grid.ColumnDefinitions>

                    <coverFlow:FlowControl x:Name="FlowControl" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Grid.Column="0" Grid.ColumnSpan="3" ImageType="Clear Logo"

							CurveAmount="0" CameraZPosition="9" VisibleCount="14" PageSize="6" ItemZPosition="1.0" SelectedItemZPosition="3.0" Spacing="3.8" Panel.ZIndex="1" >

                        <coverFlow:FlowControl.CoverFactory>

                            <coverFlow:HorizontalWheelCoverFactory />

                        </coverFlow:FlowControl.CoverFactory>

                    </coverFlow:FlowControl>

                    <Grid Grid.Column="0" Opacity="0.0" Background="Black" Panel.ZIndex="2"/>

                    <Grid Grid.Column="1" Opacity="0.0" Background="Black" Panel.ZIndex="0"/>

                    <Grid Grid.Column="2" Opacity="0.0" Background="Black" Panel.ZIndex="2"/>

                </Grid>

                <Grid Grid.Row="2">

                    <StackPanel Height="auto" Width="auto" DockPanel.Dock="Top" Background="White" Opacity="0.5" >

                        <StackPanel.Effect>

                            <DropShadowEffect Color="#FFFFFF" Direction="0" ShadowDepth="0" BlurRadius="22" RenderingBias="Quality"/>

                        </StackPanel.Effect>

                    </StackPanel>

                </Grid>

            </Grid>

        </Grid>

    </Canvas>

</UserControl>

CriticalCid · December 10, 2016

Some things to test/check if your videos don't work:

1. Try to switch your Video Playback Engine in your BigBox options. I recommend to use VLC because WMP highly depends on the codecs which you have installed locally on your PC in order to play some formats. VLC should be able to play almost everything without the need to install some additional codecs.

2. Are the videos named exactly like your platforms in LB?

3. Have you tried to put the videos in the standard platform video folder? “.\LaunchBox\Videos\Platforms”

billyc999 · December 10, 2016

lol , i just this minute figure it was the playback engine they work with vlc.. after trying allsorts it feels like an homer simpson momnet Doh!

again thank you very much

billyc999 · December 10, 2016

ok im getting somewhere now thanks to you

i do have a question though how would i center the video also would it be possible to find out the exact size of it so i can create an info panel the same size and add an overlay to the video, i know its stretched larger than the original video size

Guidance on creating a BigBox Theme

Recommended Posts

Link to comment

Share on other sites

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Popular Posts

Rincewind

Rincewind

eatkinola

Posted Images

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation