Theme: CleanBG - discussions

[angelobodetti]

The really nice backgrounds you see with the cover art and large console are 1 custom "fanart" picture that the theme creator made. In the downloads section you download those images and put them in the correct folders.

You don't need to download the console images. Just the pictures "bg+system.zip" and put each image in the correct "fanart" folder for the platform.

[ALIE]

4 minutes ago, angelobodetti said:

The really nice backgrounds you see with the cover art and large console are 1 custom "fanart" picture that the theme creator made. In the downloads section you download those images and put them in the correct folders.

You don't need to download the console images. Just the pictures "bg+system.zip" and put each image in the correct "fanart" folder for the platform.

really? ok so the console is on the wallpaper 

[angelobodetti]

Correct. Just go to the download sections and download the theme as well as the bg+systems.zip

[ALIE]

ok i was under the understanding they weren't. cool i will give it a go

[Jason Carr]

Good news, everyone! I have a solution for changing out the gif for each platform. First off, this will only work with the latest beta I just put out, so make sure you update to the latest beta before giving this a shot @niglurion (or anyone else who wants to try it on their own). I had a glitch with the PlatformTitle property which is the reason why the latest beta is required.

This is for the PlatformWheelImageDetailsThumbsFiltersView.xaml file, of course. The code is listed below.

First off, note the ContentControl tag on line 51. This replaces the previous Image control used for the gif and allows us to instead use a dynamic solution instead. The other more complicated piece is the UserControl.Resources element that begins on line 10 and ends on line 32. Inside of this element is a DataTemplate element that defines the logic for replacing out the gif. Notice how the x:Key property of the DataTemplate is "AnimatedImageTemplate", which matches up to "{StaticResource AnimatedImageTemplate" in the ContentTemplate tag of the ContentControl.

Immediately inside of the DataTemplate tag is the Image tag that is actually displayed. Underneath the Image tag is a tag called DataTemplate.Triggers that defines DataTrigger elements for each platform that should have a different gif. Notice how the Value properties of the DataTrigger elements match up to the names of the various platforms. Then, inside of those elements you see Setter elements that define the target element (which is our AnimatedImage), the target property, and most importantly the Value to set, which is the path to our gif file for that platform.

Whew. Hopefully that's mostly understandable. I know this isn't necessarily an easy solution to understand, but it does help to show how powerful XAML is in providing custom logic to do pretty much anything. I will be putting out a series of tutorials on data binding and other stuff like this very soon, as well.

Let me know @niglurion if you need any further help in understanding how this all works. Thanks all!

 

<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:BigBox.Transitions;assembly=BigBox"

             xmlns:coverFlow="clr-namespace:BigBox.Controls.CoverFlow;assembly=BigBox"

             xmlns:gif="clr-namespace:WpfAnimatedGif;assembly=BigBox"

             mc:Ignorable="d"

             d:DesignHeight="562" d:DesignWidth="1000" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Style="{DynamicResource UserControlStyle}">

    <UserControl.Resources>

        <DataTemplate DataType="{x:Type ContentControl}" x:Key="AnimatedImageTemplate">

            <Image x:Name="AnimatedImage" RenderOptions.BitmapScalingMode="HighQuality" VerticalAlignment="Center" Margin="0" HorizontalAlignment="Left" >

                <Image.Effect>

                    <DropShadowEffect/>

                </Image.Effect>

            </Image>

            <DataTemplate.Triggers>

                <DataTrigger Binding="{Binding Path=PlatformTitle}" Value="Nintendo 64">

                    <Setter TargetName="AnimatedImage" Property="gif:ImageBehavior.AnimatedSource" Value="pack://siteoforigin:,,,/Themes/CleanBG/img/Nintendo64.gif" />

                </DataTrigger>

                <DataTrigger Binding="{Binding Path=PlatformTitle}" Value="Sony Playstation">

                    <Setter TargetName="AnimatedImage" Property="gif:ImageBehavior.AnimatedSource" Value="pack://siteoforigin:,,,/Themes/CleanBG/img/SonyPlaystation.gif" />

                </DataTrigger>

                <DataTrigger Binding="{Binding Path=PlatformTitle}" Value="Nintendo GameCube">

                    <Setter TargetName="AnimatedImage" Property="gif:ImageBehavior.AnimatedSource" Value="pack://siteoforigin:,,,/Themes/CleanBG/img/NintendoGameCube.gif" />

                </DataTrigger>

                <DataTrigger Binding="{Binding Path=PlatformTitle}" Value="Nintendo Entertainment System">

                    <Setter TargetName="AnimatedImage" Property="gif:ImageBehavior.AnimatedSource" Value="pack://siteoforigin:,,,/Themes/CleanBG/img/NintendoEntertainmentSystem.gif" />

                </DataTrigger>

            </DataTemplate.Triggers>

        </DataTemplate>

    </UserControl.Resources>

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

                <ColumnDefinition Width="42*" />

                <ColumnDefinition Width="4*" />

                <ColumnDefinition Width="92*" />

            </Grid.ColumnDefinitions>

            <coverFlow:FlowControl x:Name="FlowControl" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Grid.Column="0" CoverFactory="{Binding CoverFactory}" ImageType="ClearLogo"

                CurveAmount="0" CameraZPosition="3.0" VisibleCount="14" PageSize="6" >

                <coverFlow:FlowControl.Effect>

                    <DropShadowEffect ShadowDepth="7"/>

                </coverFlow:FlowControl.Effect>

            </coverFlow:FlowControl>

            <Grid Grid.Column="1">

                <ContentControl Content="{Binding}" ContentTemplate="{StaticResource AnimatedImageTemplate}" />

            </Grid>

            <Grid Grid.Column="2">

                <Grid.RowDefinitions>

                    <RowDefinition Height="5*" />

                    <RowDefinition Height="52*" />

                    <RowDefinition Height="2*" />

                    <RowDefinition Height="25*" />

                    <RowDefinition Height="0*" />

                    <RowDefinition Height="25*" />

                    <RowDefinition Height="5*" />

                </Grid.RowDefinitions>

                <Grid Grid.Row="1">

                    <Grid.ColumnDefinitions>

                        <ColumnDefinition Width="44*" />

                        <ColumnDefinition Width="4*" />

                        <ColumnDefinition Width="57*" />

                        <ColumnDefinition Width="4*" />

                    </Grid.ColumnDefinitions>

                </Grid>

                <transitions:TransitionPresenter Grid.Row="3" TransitionSelector="{Binding TopBoxesTransitionSelector}" Content="{Binding TopBoxesView}" RenderTransformOrigin="0,1" Margin="0,0,-285,0">

                    <transitions:TransitionPresenter.RenderTransform>

                        <TransformGroup>

                            <ScaleTransform ScaleX="0.8" ScaleY="0.8"/>

                            <SkewTransform/>

                            <RotateTransform/>

                            <TranslateTransform/>

                        </TransformGroup>

                    </transitions:TransitionPresenter.RenderTransform>

                </transitions:TransitionPresenter>

                <transitions:TransitionPresenter Grid.Row="5" TransitionSelector="{Binding BottomBoxesTransitionSelector}" Content="{Binding BottomBoxesView}" RenderTransformOrigin="0,1" Margin="0,0,-286,0" >

                    <transitions:TransitionPresenter.RenderTransform>

                        <TransformGroup>

                            <ScaleTransform ScaleX="0.8" ScaleY="0.8"/>

                            <SkewTransform/>

                            <RotateTransform/>

                            <TranslateTransform/>

                        </TransformGroup>

                    </transitions:TransitionPresenter.RenderTransform>

                </transitions:TransitionPresenter>

            </Grid>

        </Grid>

    </Canvas>

</UserControl>

 

[Jason Carr]

Looks like we have an issue with extra spaces in the code above, so I'm attaching the code file here as well.

PlatformWheelImageDetailsThumbsFiltersView.xaml

[Jason Carr]

@CriticalCid may be interested in the above solution as well.

[niglurion]

Great! Thank you @Jason Carr !

I'll look at this tomorrow   It's a good step forward!

[Jason Carr]

Great to hear, @niglurion. Thanks as always.

[niglurion]

It's working great. No prob to use it, really simple in fact, thank you 
Now, there's a lot of work: creating every gif. Much more than backgrounds. 

There's a first one I made but trust-me we have time before seeing every system completed 
And @Jason Carr, can we use this method with .JPG and .PNG ? (I want to use a system like this in order to directly include all backgrounds in the theme). 
I did a few tests but nothing conclusive...

[niglurion]

Ok, so, for now, I've got something like this: 

 

We can imagine having this kind of animation for every system. It's a beginning.
And I have to find out how to add a transition effect on these gifs... 

Edited August 18, 2016 by niglurion

[Britxcdn]

@niglurion just when I thought the theme couldn't get any better. One question, would there be a way to disable the recent games so it doesn't cover the gif?

[niglurion]

3 minutes ago, Britxcdn said:

@niglurion just when I thought the theme couldn't get any better. One question, would there be a way to disable the recent games so it doesn't cover the gif?

Yes , you just have to disable it in options, like this:

[Britxcdn]

Perfect, thank you. I forgot that was there

[Jason Carr]

Glad it's working @niglurion. I did some further tests with the background images and yes, it is possible to use the same approach. However, it's not ideal because the transition animations aren't working properly when we take that approach. So what I think I'm going to do for that is just to allow you to add some images to the theme folder that are named by the platform name, and change the code to automatically pick those up if they exist. So once that is completed, distributing the backgrounds or other platform images with a theme will be easy as pie.

[niglurion]

Awesome! 
If it's  even easier than gifs, you make me happy 

Edited August 18, 2016 by niglurion

[Jason Carr]

Alright, new beta is out that adds new platform image folders for the themes; take a look at the Default theme when you can @niglurion.

Basically, the way this works, is if you include platform images in the right folders inside the theme, they will always override whatever images the user has set up in their collections for as long as that theme is used in Big Box. Of course the user will be able to customize these images themselves as well, so I don't see that as much of an issue as far as flexibility. This should allow theme creators to include images automatically with their themes for the various platforms.

Let me know @niglurion if anything isn't obvious or if something isn't working. To update the theme it would probably be best to re-copy the Default theme and then just replace any XAML files you had changed for the previous version of the theme. It's also important to note, of course, that these changes won't work for anyone without a beta release at this point, but I'm hoping to put out an official release relatively soon.

Also going to try and record some more custom theme tutorial videos this afternoon.

[kev25b]

Is there any chance you could add capcom cps 1-2-3 backgrounds, and also amiga cd32, love the theme btw.

[shadowblind]

5 hours ago, niglurion said:

Ok, so, for now, I've got something like this: 

 

We can imagine having this kind of animation for every system. It's a beginning.
And I have to find out how to add a transition effect on these gifs... 

Now that's smexy, These gifs open theming to a lot of possibilities. Not sure if you already answered this, but can these be implemented per-game and not just per-console?

[niglurion]

34 minutes ago, kev25b said:

Is there any chance you could add capcom cps 1-2-3 backgrounds, and also amiga cd32, love the theme btw.

Yes, no problem. I'll do that tomorrow  

22 minutes ago, shadowblind said:

Now that's smexy, These gifs open theming to a lot of possibilities. Not sure if you already answered this, but can these be implemented per-game and not just per-console?

I can't imagine the work it should be  But yeah, I think it's possible.