theme StationEmulation Theme

[alexis524]

sweet. I have to be honest, i don't have much experience with xaml, so i'm dead weight to be honest. I can forward blurred backgrounds for the systems currently covered in ES if that helps?

[viking]

@alexis524 Yes ! it will be perfect !

I would have fanart brings together in one archive, placed directly in Theme> Image> FanArt. This will be the easiest. From EmulationStation original theme ... or not =)

Edited September 15, 2016 by viking

[ALIE]

Any chance of a version of the games list that mixes the new with the old.  The traditional Emulationstation with videos? 

[viking]

Of course ! But I want to finish the clone version before declining variants.

If anyone has any ideas for my questions above, it will help me a lot!

Edited September 15, 2016 by viking

[ALIE]

6 hours ago, viking said:

Of course ! But I want to finish the clone version before declining variants.

If anyone has any ideas for my questions above, it will help me a lot!

Cool Cool loving it so far.

[DR9]

Awesome theme, needs some video incorp on the game list somehow.

[vsilvalopes]

Man, amazing work!

Keep this up, sure you will have many people wanting this!

Myself included!

[silvusvalentine]

If you wanted to implement the blur effect programmatically, you can add an effect to the image in the XAML.

<Image Source="{Binding ImagePath}" HorizontalAlignment="Stretch"

           VerticalAlignment="Stretch"

           Stretch="UniformToFill"

           RenderOptions.BitmapScalingMode="HighQuality">

	<Image.Effect>

		<BlurEffect Radius="30"></BlurEffect>

	</Image.Effect>

</Image>

Just adjust the Radius property to adjust the amount of blur. It will most likely slow down performance, but it will work for every image without having to blur them manually.

[ZeroDrek]

Oh man this theme will convince me to buy a LB Forever License once it's done. I have always been a huge fan of the simplicity that the EmulationStation default theme offers. Thanks for working on this!  

[viking]

Well ! I advanced a little today. Empirically, because I suck in code. I still hang on some point. I need your help !

The original theme :

Here is where I am:

Still a lot to fix. I need your help ! That because I have absolutely no idea how to handle this list : 

• Where remove the platform logo at the top of games list? I searched everywhere without finding!
• Top left: I can't put the ClearLogo of selected platform. Here the games one to test position.
• Game Rating : I only have the number from 0 to 5. No way to get the stars?
• I cant force the text in CAPITAL in a satisfactory way. Any idea ?

EDIT :

OK, I found a half solution for the game list.    File: TextListView.xaml     Line: 10

<Image Name="Logo" DockPanel.Dock="Top" Visibility="{Binding LogoVisibility}" RenderOptions.BitmapScalingMode="HighQuality" />

If I delete this line, there is more platform logo at the top of the game list! But (there's always a but) if I select a game, I dont have the GameClearLogo. It's all or nothing.

How to remove the Platform Logo and keep GameLogo once selects ?

By the way, this code line dont work for the top left platform logo.

Edited September 20, 2016 by viking

[Sidecar940]

For insert stars you can do it with images and a custom logic into the xaml.

There is the stars in vector:

If you need help with the custom logic I can help you, just tell me.

filled.svg

unfilled.svg

Edited September 20, 2016 by Sidecar940

[viking]

Yes, I need help ! For now, I only the basic "documentation.pdf" code line.

[Sidecar940]

1 hour ago, viking said:

Yes, I need help ! For now, I only the basic "documentation.pdf" code line.

This video will help you:

 

[StuDentBR]

Great work man, can't wait to see the next version of your theme.

[UP_AND_ATOM]

Keep up the good work! This theme is the reason I finally made the switch to LaunchBox. You're doing great work so far.

[silvusvalentine]

Okay, I think I've come up with something for the Star Rating control. It's probably the worst way to handle this, but the only way I could think to accomplish it without code behind. In the view that you want to feature the Star Rating control, paste the following UserControl.Resources code at the top, so it's the first element inside the UserControl tag.

Here's an example of the UserControl tag, it should be the top-most element of every view:

Spoiler

<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:controls="clr-namespace:BigBox.Controls;assembly=BigBox"
             mc:Ignorable="d"
             d:DesignHeight="562"
             d:DesignWidth="1000"
             HorizontalAlignment="Stretch"
             VerticalAlignment="Stretch"
             Style="{DynamicResource UserControlStyle}">

 

Paste the following UserControl.Resources code:

Spoiler

<UserControl.Resources>
    <SolidColorBrush x:Key="StarFillColor" Color="#FF393A3B" />
    <SolidColorBrush x:Key="StarEmptyColor" Color="#0097999B" />
    <SolidColorBrush x:Key="StarStrokeColor" Color="#FF393A3B" />
    <Style x:Key="OneStarRating" TargetType="{x:Type Path}">
        <Style.Triggers>
            <DataTrigger Binding="{Binding Path=SelectedGame.StarRating}" Value="0">
                <Setter Property="Fill" Value="{StaticResource StarEmptyColor}" />
            </DataTrigger>
            <DataTrigger Binding="{Binding Path=SelectedGame.StarRating}" Value="1">
                <Setter Property="Fill" Value="{StaticResource StarFillColor}" />
            </DataTrigger>
            <DataTrigger Binding="{Binding Path=SelectedGame.StarRating}" Value="2">
                <Setter Property="Fill" Value="{StaticResource StarFillColor}" />
            </DataTrigger>
            <DataTrigger Binding="{Binding Path=SelectedGame.StarRating}" Value="3">
                <Setter Property="Fill" Value="{StaticResource StarFillColor}" />
            </DataTrigger>
            <DataTrigger Binding="{Binding Path=SelectedGame.StarRating}" Value="4">
                <Setter Property="Fill" Value="{StaticResource StarFillColor}" />
            </DataTrigger>
            <DataTrigger Binding="{Binding Path=SelectedGame.StarRating}" Value="5">
                <Setter Property="Fill" Value="{StaticResource StarFillColor}" />
            </DataTrigger>

        </Style.Triggers>
    </Style>
    <Style x:Key="TwoStarRating" TargetType="{x:Type Path}">
        <Style.Triggers>
            <DataTrigger Binding="{Binding Path=SelectedGame.StarRating}" Value="0">
                <Setter Property="Fill" Value="{StaticResource StarEmptyColor}" />
            </DataTrigger>
            <DataTrigger Binding="{Binding Path=SelectedGame.StarRating}" Value="1">
                <Setter Property="Fill" Value="{StaticResource StarEmptyColor}" />
            </DataTrigger>
            <DataTrigger Binding="{Binding Path=SelectedGame.StarRating}" Value="2">
                <Setter Property="Fill" Value="{StaticResource StarFillColor}" />
            </DataTrigger>
            <DataTrigger Binding="{Binding Path=SelectedGame.StarRating}" Value="3">
                <Setter Property="Fill" Value="{StaticResource StarFillColor}" />
            </DataTrigger>
            <DataTrigger Binding="{Binding Path=SelectedGame.StarRating}" Value="4">
                <Setter Property="Fill" Value="{StaticResource StarFillColor}" />
            </DataTrigger>
            <DataTrigger Binding="{Binding Path=SelectedGame.StarRating}" Value="5">
                <Setter Property="Fill" Value="{StaticResource StarFillColor}" />
            </DataTrigger>

        </Style.Triggers>
    </Style>
    <Style x:Key="ThreeStarRating" TargetType="{x:Type Path}">
        <Style.Triggers>
            <DataTrigger Binding="{Binding Path=SelectedGame.StarRating}" Value="0">
                <Setter Property="Fill" Value="{StaticResource StarEmptyColor}" />
            </DataTrigger>
            <DataTrigger Binding="{Binding Path=SelectedGame.StarRating}" Value="1">
                <Setter Property="Fill" Value="{StaticResource StarEmptyColor}" />
            </DataTrigger>
            <DataTrigger Binding="{Binding Path=SelectedGame.StarRating}" Value="2">
                <Setter Property="Fill" Value="{StaticResource StarEmptyColor}" />
            </DataTrigger>
            <DataTrigger Binding="{Binding Path=SelectedGame.StarRating}" Value="3">
                <Setter Property="Fill" Value="{StaticResource StarFillColor}" />
            </DataTrigger>
            <DataTrigger Binding="{Binding Path=SelectedGame.StarRating}" Value="4">
                <Setter Property="Fill" Value="{StaticResource StarFillColor}" />
            </DataTrigger>
            <DataTrigger Binding="{Binding Path=SelectedGame.StarRating}" Value="5">
                <Setter Property="Fill" Value="{StaticResource StarFillColor}" />
            </DataTrigger>

        </Style.Triggers>
    </Style>
    <Style x:Key="FourStarRating" TargetType="{x:Type Path}">
        <Style.Triggers>
            <DataTrigger Binding="{Binding Path=SelectedGame.StarRating}" Value="0">
                <Setter Property="Fill" Value="{StaticResource StarEmptyColor}" />
            </DataTrigger>
            <DataTrigger Binding="{Binding Path=SelectedGame.StarRating}" Value="1">
                <Setter Property="Fill" Value="{StaticResource StarEmptyColor}" />
            </DataTrigger>
            <DataTrigger Binding="{Binding Path=SelectedGame.StarRating}" Value="2">
                <Setter Property="Fill" Value="{StaticResource StarEmptyColor}" />
            </DataTrigger>
            <DataTrigger Binding="{Binding Path=SelectedGame.StarRating}" Value="3">
                <Setter Property="Fill" Value="{StaticResource StarEmptyColor}" />
            </DataTrigger>
            <DataTrigger Binding="{Binding Path=SelectedGame.StarRating}" Value="4">
                <Setter Property="Fill" Value="{StaticResource StarFillColor}" />
            </DataTrigger>
            <DataTrigger Binding="{Binding Path=SelectedGame.StarRating}" Value="5">
                <Setter Property="Fill" Value="{StaticResource StarFillColor}" />
            </DataTrigger>

        </Style.Triggers>
    </Style>
    <Style x:Key="FiveStarRating" TargetType="{x:Type Path}">
        <Style.Triggers>
            <DataTrigger Binding="{Binding Path=SelectedGame.StarRating}" Value="0">
                <Setter Property="Fill" Value="{StaticResource StarEmptyColor}" />
            </DataTrigger>
            <DataTrigger Binding="{Binding Path=SelectedGame.StarRating}" Value="1">
                <Setter Property="Fill" Value="{StaticResource StarEmptyColor}" />
            </DataTrigger>
            <DataTrigger Binding="{Binding Path=SelectedGame.StarRating}" Value="2">
                <Setter Property="Fill" Value="{StaticResource StarEmptyColor}" />
            </DataTrigger>
            <DataTrigger Binding="{Binding Path=SelectedGame.StarRating}" Value="3">
                <Setter Property="Fill" Value="{StaticResource StarEmptyColor}" />
            </DataTrigger>
            <DataTrigger Binding="{Binding Path=SelectedGame.StarRating}" Value="4">
                <Setter Property="Fill" Value="{StaticResource StarEmptyColor}" />
            </DataTrigger>
            <DataTrigger Binding="{Binding Path=SelectedGame.StarRating}" Value="5">
                <Setter Property="Fill" Value="{StaticResource StarFillColor}" />
            </DataTrigger>

        </Style.Triggers>
    </Style>
    
    <ControlTemplate x:Key="StarRatingControl" TargetType="{x:Type ContentControl}">
        <Canvas Name="StarRatingCanvas" Height="{TemplateBinding Height}">
            <DockPanel>
                <Viewbox Height="{Binding ElementName=StarRatingCanvas, Path=Height}"
                         DockPanel.Dock="Left"
                         Margin="{TemplateBinding Margin}">
                    <Path Style="{StaticResource OneStarRating}"
                          Stroke="{StaticResource StarStrokeColor}"
                          StrokeThickness="0.75"
                          Data="F1 M 7.323,2.964 L 5.700,4.547 L 6.085,6.782 C 6.089,6.813 6.089,6.840 6.089,6.872 C 6.089,6.988 6.036,7.095 5.906,7.095 C 5.843,7.095 5.781,7.073 5.727,7.042 L 3.720,5.986 L 1.712,7.042 C 1.654,7.073 1.596,7.095 1.534,7.095 C 1.404,7.095 1.346,6.988 1.346,6.872 C 1.346,6.840 1.350,6.813 1.354,6.782 L 1.739,4.547 L 0.112,2.964 C 0.058,2.906 0.000,2.830 0.000,2.750 C 0.000,2.615 0.139,2.562 0.250,2.544 L 2.495,2.217 L 3.500,0.183 C 3.541,0.098 3.617,0.000 3.720,0.000 C 3.823,0.000 3.898,0.098 3.939,0.183 L 4.945,2.217 L 7.189,2.544 C 7.296,2.562 7.439,2.615 7.439,2.750 C 7.439,2.830 7.381,2.906 7.323,2.964 Z" />
                </Viewbox>
                <Viewbox  Height="{Binding ElementName=StarRatingCanvas, Path=Height}"
                          DockPanel.Dock="Left"
                          Margin="{TemplateBinding Margin}">
                    <Path Style="{StaticResource TwoStarRating}"
                          Stroke="{StaticResource StarStrokeColor}"
                          StrokeThickness="0.75"
                          Data="F1 M 7.323,2.964 L 5.700,4.547 L 6.085,6.782 C 6.089,6.813 6.089,6.840 6.089,6.872 C 6.089,6.988 6.036,7.095 5.906,7.095 C 5.843,7.095 5.781,7.073 5.727,7.042 L 3.720,5.986 L 1.712,7.042 C 1.654,7.073 1.596,7.095 1.534,7.095 C 1.404,7.095 1.346,6.988 1.346,6.872 C 1.346,6.840 1.350,6.813 1.354,6.782 L 1.739,4.547 L 0.112,2.964 C 0.058,2.906 0.000,2.830 0.000,2.750 C 0.000,2.615 0.139,2.562 0.250,2.544 L 2.495,2.217 L 3.500,0.183 C 3.541,0.098 3.617,0.000 3.720,0.000 C 3.823,0.000 3.898,0.098 3.939,0.183 L 4.945,2.217 L 7.189,2.544 C 7.296,2.562 7.439,2.615 7.439,2.750 C 7.439,2.830 7.381,2.906 7.323,2.964 Z" />
                </Viewbox>
                <Viewbox  Height="{Binding ElementName=StarRatingCanvas, Path=Height}"
                          DockPanel.Dock="Left"
                          Margin="{TemplateBinding Margin}">
                    <Path Style="{StaticResource ThreeStarRating}"
                          Stroke="{StaticResource StarStrokeColor}"
                          StrokeThickness="0.75"
                          Data="F1 M 7.323,2.964 L 5.700,4.547 L 6.085,6.782 C 6.089,6.813 6.089,6.840 6.089,6.872 C 6.089,6.988 6.036,7.095 5.906,7.095 C 5.843,7.095 5.781,7.073 5.727,7.042 L 3.720,5.986 L 1.712,7.042 C 1.654,7.073 1.596,7.095 1.534,7.095 C 1.404,7.095 1.346,6.988 1.346,6.872 C 1.346,6.840 1.350,6.813 1.354,6.782 L 1.739,4.547 L 0.112,2.964 C 0.058,2.906 0.000,2.830 0.000,2.750 C 0.000,2.615 0.139,2.562 0.250,2.544 L 2.495,2.217 L 3.500,0.183 C 3.541,0.098 3.617,0.000 3.720,0.000 C 3.823,0.000 3.898,0.098 3.939,0.183 L 4.945,2.217 L 7.189,2.544 C 7.296,2.562 7.439,2.615 7.439,2.750 C 7.439,2.830 7.381,2.906 7.323,2.964 Z" />
                </Viewbox>
                <Viewbox  Height="{Binding ElementName=StarRatingCanvas, Path=Height}"
                          DockPanel.Dock="Left"
                          Margin="{TemplateBinding Margin}">
                    <Path Style="{StaticResource FourStarRating}"
                          Stroke="{StaticResource StarStrokeColor}"
                          StrokeThickness="0.75"
                          Data="F1 M 7.323,2.964 L 5.700,4.547 L 6.085,6.782 C 6.089,6.813 6.089,6.840 6.089,6.872 C 6.089,6.988 6.036,7.095 5.906,7.095 C 5.843,7.095 5.781,7.073 5.727,7.042 L 3.720,5.986 L 1.712,7.042 C 1.654,7.073 1.596,7.095 1.534,7.095 C 1.404,7.095 1.346,6.988 1.346,6.872 C 1.346,6.840 1.350,6.813 1.354,6.782 L 1.739,4.547 L 0.112,2.964 C 0.058,2.906 0.000,2.830 0.000,2.750 C 0.000,2.615 0.139,2.562 0.250,2.544 L 2.495,2.217 L 3.500,0.183 C 3.541,0.098 3.617,0.000 3.720,0.000 C 3.823,0.000 3.898,0.098 3.939,0.183 L 4.945,2.217 L 7.189,2.544 C 7.296,2.562 7.439,2.615 7.439,2.750 C 7.439,2.830 7.381,2.906 7.323,2.964 Z" />
                </Viewbox>
                <Viewbox  Height="{Binding ElementName=StarRatingCanvas, Path=Height}"
                          DockPanel.Dock="Left"
                          Margin="{TemplateBinding Margin}">
                    <Path Style="{StaticResource FiveStarRating}"
                          Stroke="{StaticResource StarStrokeColor}"
                          StrokeThickness="0.75"
                          Data="F1 M 7.323,2.964 L 5.700,4.547 L 6.085,6.782 C 6.089,6.813 6.089,6.840 6.089,6.872 C 6.089,6.988 6.036,7.095 5.906,7.095 C 5.843,7.095 5.781,7.073 5.727,7.042 L 3.720,5.986 L 1.712,7.042 C 1.654,7.073 1.596,7.095 1.534,7.095 C 1.404,7.095 1.346,6.988 1.346,6.872 C 1.346,6.840 1.350,6.813 1.354,6.782 L 1.739,4.547 L 0.112,2.964 C 0.058,2.906 0.000,2.830 0.000,2.750 C 0.000,2.615 0.139,2.562 0.250,2.544 L 2.495,2.217 L 3.500,0.183 C 3.541,0.098 3.617,0.000 3.720,0.000 C 3.823,0.000 3.898,0.098 3.939,0.183 L 4.945,2.217 L 7.189,2.544 C 7.296,2.562 7.439,2.615 7.439,2.750 C 7.439,2.830 7.381,2.906 7.323,2.964 Z" />
                </Viewbox>
            </DockPanel>
        </Canvas>
    </ControlTemplate>
</UserControl.Resources>

 

Now, wherever you want to add a Star Rating control, just use the following code:

Spoiler

<ContentControl Template="{StaticResource StarRatingControl}"
                Height="20"
                Margin="0,0,4,0" />

 

Customizing

If you want to change the size of the stars, just adjust the Height property of the ContentControl. Since the stars are Path elements, you can make them as large or small as you want and you don't have to worry about pixelation. If you want to adjust the spacing between the stars, adjust the Margin property.

If you want to change the star's fill color, empty color, or stroke color, that can be found at the top of the UserControl.Resources code:

Spoiler

<UserControl.Resources>
    <SolidColorBrush x:Key="StarFillColor" Color="#FF393A3B" />
    <SolidColorBrush x:Key="StarEmptyColor" Color="#0097999B" />
    <SolidColorBrush x:Key="StarStrokeColor" Color="#FF393A3B" />

 

It's not the best solution, but it should work for now. Maybe I can try to implement it as a custom control. Hope that helps for now!

Edited September 21, 2016 by silvusvalentine
Not sure what was going on, but the code blocks were adding extra lines between each line of code. I've switched them all to spoiler tags.

[viking]

Wow thx guys !!!! I work on it today. (french hours) Come back later ;-)

@silvusvalentine : This is a code for "control" stars ? Or just "show" stars ? I search for "show" only !

[silvusvalentine]

It is just for showing stars. When I said Star Rating control, I meant control as in element or component.

[viking]

OK. Here is the morning advancement. Thank you @Grila !! I learned a lot from your theme code. I have stolen a lot of line, sorry ^^  So I totally rebuild the GamePage with a better and cleaner grid setup.

All I need is one thing: the platform logo at the top left. According Documentation.pdf :

This line call the GameClearLogo. I dont whant that here.

<Image Source="{Binding Path=SelectedGame.ClearLogoImagePath}" />

This line call the PlatformClearLogo. But this dont work in game page ! Blank aera.

<Image Source="{Binding Path=SelectedPlatform.ClearLogoImagePath}" />

How do I do that ???

[viking]

I haven't found answer to my question above, but ...  UPDATE: v1.1 !!!  Had a look at the download page. Everything is update. (File, text, screen, ...)

• 4 Platform page variant.
• 1 Game page. (for now)
• Still in beta =)

Show me your bug! ^^

In parallel, I think to upload a large set of hardware PNG. As my Clear Logo series. What do you think? It may be heavy!