Jump to content
LaunchBox Community Forums
viking

StationEmulation Theme

Recommended Posts

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?

Share this post


Link to post
Share on other sites

@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 by viking

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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 by viking
  • Like 1

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites

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.

  • Like 1

Share this post


Link to post
Share on other sites

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!  

  • Like 1

Share this post


Link to post
Share on other sites

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 :theming_list.png

Here is where I am:StationEmulation_WIP_002.jpg

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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! :D

Edited 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.
  • Like 1

Share this post


Link to post
Share on other sites

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 !

  • Like 1

Share this post


Link to post
Share on other sites

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.

StationEmulation_WIP_003.jpgAll 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 ???

  • Like 1

Share this post


Link to post
Share on other sites

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!

StationEmulation_WIP_009.jpgStationEmulation_WIP_008.jpg

Share this post


Link to post
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...