Guidance on creating a BigBox Theme

CriticalCid · December 11, 2016

1 hour ago, billyc999 said:

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

You can center some XAML elements with the Alignment properties but those are currently completely buggy for videos, unfortunately. @viking and myself are frequently asking @Jason Carr to fix this but it seems to be a real hard one to solve.

In the meantime you could do the same workaround that I use for my own theme as well. You have to define 3 additional columns in the row for your video. 2 as spacer left and right and one for the middle which has the video in it. On this way you can make the position of the video fix.

To find out the correct widths for these columns you have to calculate them. That’s one of the reason why I’ve said that I prefer to set all rows and columns manually and divide them in to exactly 100% and prefer additional rows/columns as distance keeper over the margin property. That makes something like this really easy. Just use the Rule of Three to get the right percentage values.

For example:

You have set your height for the video to 32% in your last posted code. Considering that you are designing the theme primarily for 16:9 aspect ratios we can take 1080p as a reference resolution. 32% of 1080 pixels are 345,6 pixels.

Now we take the dimensions of your video which you’ve said are 812 x 214. We know that Big Box is keeping the aspect ratio when it’s stretching a video. In this case it stretches it to the calculated 345,6 pixels in height to fill the row the best as it can. This is 61,48% larger than the original video. Now we need to multiply the width of 812 pixels with 1,6148 to get the value of the stretched width of the video in your view. That’s 1311,22 pixels.

1311,22 pixels is circa 68,3% of 1920 pixels. That's exactly the value we need for our column in the middle.

Now we just have to divide the remaining 31,7% by 2 and we have all 3 values for our columns.

If I haven’t miscalculated should the end result look like this:


<Grid Grid.Row="2">

	<Grid.ColumnDefinitions>

		<ColumnDefinition Width="15.85*" />

		<ColumnDefinition Width="68.3*" />

		<ColumnDefinition Width="15.85*" />

	</Grid.ColumnDefinitions>

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

</Grid>

Just replace your current video element with this and the video should be centered. You can also use that exact same column definition for your System Info row as well and you’ll have the exact same size for it.

billyc999 · December 11, 2016

cool, thank you for taking your time to type that detailed post, not sure if its possible but can bigbox display sfw files, this could fix the issue with weather and clock for me as dark13 already created the files for these which work great

Edited December 11, 2016 by billyc999

Rincewind · December 11, 2016

Just have to say this thread is a great read for anyone else trying to create a theme thank you @CriticalCid and @billyc999 it's making what first looks like a massive task to a step by step process

billyc999 · December 11, 2016

i agree cids done a great job breaking down the parts of the script which are very meaningful

Edited December 11, 2016 by billyc999

CriticalCid · December 11, 2016

Thanks guys. I’m just giving back the knowledge and experience I got through creating my own theme

9 hours ago, billyc999 said:

cool, thank you for taking your time to type that detailed post, not sure if its possible but can bigbox display sfw files, this could fix the issue with weather and clock for me as dark13 already created the files for these which work great

Unfortunately not. Big Box doesn't support Flash and probably never will since it's an old and dying technology.

billyc999 · December 11, 2016

yea thinking about it flash probably isnt the way to go, ive just change my bitbucket request due to not thinking it through lol

i managed to get the video centered thank you, i did need to change the column definitions a little after it still wasnt centered, the first thing i did was a screen capture then used photoshop to find the size of the vid.

i did a video overlay to go over the black bars of the video but for some reason whe i use the zindex on all the elements the only thing left showing is the background picture, ive removed them now but here's the code


<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="30*" />

                <!--VIDEO-->

                <RowDefinition Height="2*" />

                <!--SPACER-->

                <RowDefinition Height="32*" />

                <!--SYSTEMINFO-->

                <RowDefinition Height="2*" />

                <!--SPACER-->

                <RowDefinition Height="10*" />

                <!--WHEEL-->

                <RowDefinition Height="6*" />

                <!--SYSTEMDESCRIPTION-->

                <RowDefinition Height="8*" />

                <!--SPACER-->

            </Grid.RowDefinitions>

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

            <Image Source="H:\LaunchBox\Themes\custom\Elements\infobar.png" HorizontalAlignment="Left" VerticalAlignment="Stretch" Width="1995" Margin="516,9,-591,18" Grid.Row="7"/>

            <Image Source="H:\LaunchBox\Themes\custom\Elements\datebar.png" HorizontalAlignment="Left" VerticalAlignment="Stretch" Width="1490" Margin="1145,-16,-715,60" Grid.RowSpan="2"/>

            <Image Margin="343,0,344,0" Name="overlay" DockPanel.Dock="Top" Stretch="Fill" Source="H:\LaunchBox\Themes\custom\Elements\overlay.png" RenderOptions.BitmapScalingMode="HighQuality" Grid.Row="2"/>

            <Grid Grid.Column="2">

            </Grid>

            <!--VIDEO-->

            <Grid Grid.Row="2">

                <Grid.ColumnDefinitions>

                    <ColumnDefinition Width="17.85*" />

                    <ColumnDefinition Width="64.3*" />

                    <ColumnDefinition Width="17.85*" />

                </Grid.ColumnDefinitions>

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

            </Grid>



            <!--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="11" Margin="1,0,-1,0" >

                        <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>

also i tried using ScrollableTextBlock for horizontal scrolling notes but that wouldnt work neither, i used the documentation for refrence but think i may of placed it in the wrong part of the script. can ScrollDirection="Up" be set to left or right so its a single line of text is scrolled sideways

CriticalCid · December 11, 2016

Ah I see you have changed the height of your video row, then it’s no surprise that my column values haven’t centered the video.

I honestly don't know why all elements would disappear but I would try to give the background transition presenter 0 as ZIndex and the main grid 1, that would cause that every element in the main grid is automatically one layer above the background. But I don’t know if all other ZIndex values in the main grid would need to be higher than 1 as well, that’s something you would have to try out.

Also when I look at the documentation than it seems that currently is only vertical text scrolling available. So horizontal scrolling would need some extra code from Jason in the backend as well.

The Big Box theming engine is still early days and @Jason Carr adds new features for it as the theme creators would need them. So If you ask him nicely he will surely come back to you with a solution for this.

billyc999 · December 11, 2016

ah you are right i pasted the script from a duplicate theme, as i keep a backup incase i wreck anything lol

ill try the zindex again now,

where's the best place to say pretty please to jason @Jason Carr lol

CriticalCid · December 11, 2016

Well, we mentioned him a couple of times here with the @ feature. So the chances are good that he sees this thread anyways.

The best way would probably be to create BitBucket tickets for every theming feature you would need. Than write him an e-mail at jason@unbrokensoftware.com and add in there the links to this thread and all your tickets. On this way it's easier for him to keep track of all your requests.

billyc999 · December 11, 2016

lol ill see if here answers on here first.. dont want to seem like a stalker lol @Jason Carr

the zindex worked btw but for some reaon i cant set the wheel above the bar now i added zindex to 9 in different places to see if it changed but you can see that they are behind the bar due to the opacity, it's no biggie though because may endup not using them wide vids so im going to leave that part for now.

**edit**

i just inserted to add recent games to the main menu , can they be resized and limeted to a certain number of covers displayed, at the present time the last cover gets cut in half on the right hand side on certain systems

<transitions:TransitionPresenter Grid.Row="4" TransitionSelector="{Binding BottomBoxesTransitionSelector}" Content="{Binding BottomBoxesView}" HorizontalAlignment="Left" Width="1500"/>

Edited December 11, 2016 by billyc999

CriticalCid · December 11, 2016

The problem with your wheel could be that you set the image outside of the wheel grid and therefore they have a different ZIndex hierarchy. Try to move it to the grid and see if that helps.

I think the size of the recent/favorite games element is based on the space it has to its disposal. Just add additional columns and/or rows to limit the space, similar to the centered video solution that I’ve showed you.

billyc999 · December 11, 2016

i added columns for the row but it is still the same, im wondering if i need to edit another xaml file for these changes

here's an image , the yellow is the grid i have allowed for the covers, and the red is the changes i need to make, i need to get it to display only full covers that are larger maybe 4 snes covers or 5 standar box covers.

*edit* this is a mix of 2 view ideas as im not sure which way to go yet, so if i have the covers i wont be using the big video at the top

Edited December 11, 2016 by billyc999

CriticalCid · December 11, 2016

The recent/favorite element is defined in the “ThumbnailListView.xaml” file. You can remove the text by simply deleting the TextBox in there.

But I don’t know if it’s possible to limit the number of games. You may have to Google if that works for a ListBox without any backend code.

The only thing you could definitely do though is to reduce the size of the column until the cut off image won’t be shown anymore. But of course that’s not an ideal solution because you’ll have different box image formats for different consoles.So it may or may not be possible to find an ideal value for this.

billyc999 · December 12, 2016

i've left the system menu for now as i thought 1 of the game views would be simple to make, so i made a start

first i just had the covers across the bottom but they were'nt populating very fast , i then added video and covers totaly disapeared

am i right in thinking its something to do with collumn and row definitions, ive noticed it the original view code but was unsure if i needed to add them

this is the code i have


<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"

             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.Background>

                <SolidColorBrush Color="Black" Opacity="{Binding BackgroundFade}" />

            </Grid.Background>

            <Grid.RowDefinitions>

                <RowDefinition Height="3.6*" />

                <!--TIME-->

                <RowDefinition Height="6*" />

                <!--SPACER-->

                <RowDefinition Height="50*" />

                <!--DETAILS & VIDEO-->

                <RowDefinition Height="2*" />

                <!--SPACER-->

                <RowDefinition Height="34*" />

                <!--WHEEL-->

                <RowDefinition Height="6*" />

                <!--SYSTEMDESCRIPTION-->

            </Grid.RowDefinitions>

            <Grid.ColumnDefinitions>

                <ColumnDefinition Width="8*" />

                <ColumnDefinition Width="2*" />

                <ColumnDefinition Width="36*" />

                <ColumnDefinition Width="4*" />

                <ColumnDefinition Width="40*" />

                <ColumnDefinition Width="2*" />

                <ColumnDefinition Width="8*" />

            </Grid.ColumnDefinitions>

            <Image Source="H:\LaunchBox\Themes\custom\Elements\gameviewback.png" HorizontalAlignment="Left" VerticalAlignment="Top" Width="1920" Grid.RowSpan="6" Grid.ColumnSpan="7" Height="1080"/>

            

            <transitions:TransitionPresenter Grid.Row="3" TransitionSelector="{Binding ListTransitionSelector}" Content="{Binding ListView}" Grid.ColumnSpan="7" Margin="0,494,0,0" Grid.RowSpan="3" />

            <transitions:TransitionPresenter Grid.Row="2" Grid.Column="4" TransitionSelector="{Binding ImageVideoTransitionSelector}" Content="{Binding ImageVideoView}" IsContentVideo="true" Margin="43,34,37,43" />

            <transitions:TransitionPresenter Grid.Row="2" Grid.Column="2" TransitionSelector="{Binding GameDetailsTransitionSelector}" Content="{Binding GameDetailsView}" Margin="0,0,10,30" />

        </Grid>

    </Canvas>

</UserControl>

this is what the output looks like upto now

CriticalCid · December 12, 2016

BigBox has to cache the box images first when you enter a system for the first time. That’s probably what you saw when the games got populated very slow. That shouldn’t occur anymore when everything is cached properly.

To your missing covers. You are pushing them out of the screen with your margin property

billyc999 · December 12, 2016

lol, how did i miss that, thank you for pointing it out , which xaml controls how the details a laid out

CriticalCid · December 12, 2016

TwoColumnGameDetailsView.xaml for the CoverFlowWithDetails View.

For every other view: GameDetailsView.xaml

billyc999 · December 12, 2016

cheers two more things before i go editing

1) which file to change the blue box around the image to transparent or something less harsh

2)is it possible to make a grid view like one of aeon nox views

CriticalCid · December 12, 2016

1. This is handled through the files in the “Styles” folder. You have to edit the ones with "Item" in the name. But I’m not quite sure which one of these handled the box lists. So you have to try it out which is the right one.

2. I’m not sure what you mean with Grid view but you can use a horizontal wheel and replace the clear logos with box cover if that’s what you have in mind.

billyc999 · December 12, 2016

actually im not sure if it was an aeon nox view or just advance launcher

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