Jump to content
LaunchBox Community Forums

StationEmulation Theme


viking

Recommended Posts

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
Link to comment
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
Link to comment
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
Link to comment
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
Link to comment
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

Link to comment
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
Unfortunately, your content contains terms that we do not allow. Please edit your content to remove the highlighted words below.
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...