Jump to content
LaunchBox Community Forums

Need help with custom GameMarqueeView.xaml

Sundeth

By Sundeth
in Big Box Custom Themes

 Share

Recommended Posts

Sundeth 1-Bit Wonder

Sundeth

Posted
Posted

I'm new do theme creation so things are a little fuzzy. My intention is to create a custom view for a 1920x360 resolution marquee.

It should look something like this

templatemarquee.thumb.PNG.213e468356bf7730d6f66afd77eeb010.PNG

 

I was able to add the box and cart bindings, but for some reason, where it should be showing the clear logo, it's showing the original marquee instead

 

1 - I need BixBox to stop rendering the marquee file and render the clear logo

2 - I don't know how to bind the background image for it to be platform specific

3 - is it possible to make a special view only for arcade games? Those usually have a marquee artwork

 

Here's my current code. I'm using Retro Console Theme Anim V2, but tested it with Default and Unified

 

  

<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:i="http://schemas.microsoft.com/expression/2010/interactivity"
             xmlns:cal="http://www.caliburnproject.org"
             mc:Ignorable="d"
             d:DesignHeight="360" d:DesignWidth="1920" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Style="{DynamicResource UserControlStyle}">
    <!-- GRID DEFINITIONS -->


    <Grid Height="360" Width="1920" VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="3*" />
            <ColumnDefinition Width="7*" />
            <ColumnDefinition Width="3*" />
            <ColumnDefinition Width="3*" />
            <ColumnDefinition Width="2*" />
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="5*" />
            <RowDefinition Height="1*" />
        </Grid.RowDefinitions>

        <Grid.Background>
            <ImageBrush ImageSource="H:\LaunchBox\Themes\Custom\Images\Platforms\Banner\Atari 2600.png" Stretch="UniformToFill">
            </ImageBrush>
        </Grid.Background>

        <!-- GAME MARQUEE -->

        <Image Grid.Column="1" Grid.Row="0" Source="{Binding Path=SelectedGame.ClearLogoImagePath}" Stretch="Uniform" HorizontalAlignment="Center" VerticalAlignment="Center" RenderOptions.BitmapScalingMode="HighQuality" />

        <Image Grid.Column="2" Grid.Row="0" Source="{Binding Path=SelectedGame.CartFrontImagePath}" Stretch="Uniform" HorizontalAlignment="Right" VerticalAlignment="Center" RenderOptions.BitmapScalingMode="HighQuality" Opacity="0.5" RenderTransformOrigin="0.5,0.5" >
            <Image.RenderTransform>
                <TransformGroup>
                    <ScaleTransform ScaleY="0.8" ScaleX="0.8"/>
                    <SkewTransform/>
                    <RotateTransform Angle="-20"/>
                    <TranslateTransform X="-20" Y="-20"/>
                </TransformGroup>
            </Image.RenderTransform>
            <Image.Effect>
                <BlurEffect Radius="50"/>
            </Image.Effect>
        </Image>
        <Image Grid.Column="2" Grid.Row="0" Source="{Binding Path=SelectedGame.CartFrontImagePath}" Stretch="Uniform" HorizontalAlignment="Right" VerticalAlignment="Center" RenderOptions.BitmapScalingMode="HighQuality" RenderTransformOrigin="0.5,0.5" >
            <Image.RenderTransform>
                <TransformGroup>
                    <ScaleTransform ScaleY="0.8" ScaleX="0.8"/>
                    <SkewTransform/>
                    <RotateTransform Angle="-20"/>
                    <TranslateTransform X="20"/>
                </TransformGroup>
            </Image.RenderTransform>
        </Image>

        <Image Grid.Column="3" Grid.Row="0" Source="{Binding Path=SelectedGame.Box3DImagePath}" Stretch="Uniform" HorizontalAlignment="Left" VerticalAlignment="Center" RenderOptions.BitmapScalingMode="HighQuality" Opacity="0.5" RenderTransformOrigin="0.5,0.5" >
            <Image.RenderTransform>
                <TransformGroup>
                    <ScaleTransform ScaleY="0.8" ScaleX="0.8"/>
                    <SkewTransform/>
                    <TranslateTransform X="-40" Y="-20"/>
                </TransformGroup>
            </Image.RenderTransform>
            <Image.Effect>
                <BlurEffect Radius="50"/>
            </Image.Effect>
        </Image>
        <Image Grid.Column="3" Grid.Row="0" Source="{Binding Path=SelectedGame.Box3DImagePath}" Stretch="Uniform" HorizontalAlignment="Left" VerticalAlignment="Center" RenderOptions.BitmapScalingMode="HighQuality" RenderTransformOrigin="0.5,0.5" >
            <Image.RenderTransform>
                <TransformGroup>
                    <ScaleTransform ScaleY="0.8" ScaleX="0.8"/>
                    <SkewTransform/>
                    <TranslateTransform/>
                </TransformGroup>
            </Image.RenderTransform>
        </Image>
    </Grid>
</UserControl>

 

Link to comment
Share on other sites
Retro808 128-Bit Self Aware

Retro808

Posted
Posted
5 hours ago, Sundeth said:

1 - I need BixBox to stop rendering the marquee file and render the clear logo

1. You cannot stop it as BB will generate the marquee as it is coded in the background logic to show a marquee even in themes that do not have a GameMarqueeView.xaml. So the only way I have found is to hide it by adding a black background. Placing it above Panel.ZIndex="0" will get it to cover the marquee. Adjust the column and row span to your grid. 

<!-- BLACK BACKGROUND -->  
<Border x:Name="Blackscreen" Grid.RowSpan="8" Grid.ColumnSpan="8" Panel.ZIndex="1" Background="Black" Opacity="1" SnapsToDevicePixels="True" RenderOptions.EdgeMode="Aliased" ></Border>

2. To make the background show platform specific use a multi-binding. Something like below just direct to your folder path. 

        <!-- DEFAULT MARQUEE -->
<TextBlock x:Name="MarqueeBackgroundPlatform"  Visibility="Collapsed">
    <TextBlock.Text>
        <MultiBinding StringFormat="LAUNCHBOX_ROOT_FOLDER/Images/Marquees/Platforms/{0}.png">
            <Binding Path="SelectedGame.Platform" />
        </MultiBinding>
    </TextBlock.Text>
</TextBlock>
<Image Source="{Binding Text, ElementName=MarqueeBackgroundPlatform, FallbackValue='LAUNCHBOX_ROOT_FOLDER/Images/Marquees/Platforms/Default.png'}" Grid.Row="0" Grid.RowSpan="4" Grid.Column="0" Grid.ColumnSpan="8" Panel.ZIndex="3" Stretch="Fill" RenderOptions.BitmapScalingMode="HighQuality" />

3. I am not sure of. I know for theme's some of the views (such as WallGames) you can create a dedicate view xaml per platform. So it might be a similar process. I am not sure if that would be doable with Marquee Views as these views have not received any updates. I will check on it.

  • Thanks 1
Link to comment
Share on other sites
faeran 128-Bit Self Aware

faeran

Posted
Posted

Few things I can add to what @Retro808 contributed.

3. This can be accomplished from within your theme's View folder by doing the following.

  • Create a folder called GameMarqueeView.
  • Make a copy of your GameMarqueeView.xaml folder and place it in the GameMarqueeView folder.
  • Rename GameMarqueeView.xaml to the name of your Arcade platform. 

You should now have the following (assuming your arcade platform is named Arcade?

  • [theme]\Views\GameMarqueeView\Arcade.xaml

Whatever you edit within the Arcade.xaml will only apply to the Arcade platform's marquee.

  • Like 1
  • Thanks 1
Link to comment
Share on other sites
Sundeth 1-Bit Wonder

Sundeth

Posted
  • Author
Posted

Just to update, it worked! I'm now improving it and creating custom art, will probably post a final version once I have it, this is how the code looks now. Thanks @faeran and @Retro808 for your help!

  

<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:i="http://schemas.microsoft.com/expression/2010/interactivity"
             xmlns:cal="http://www.caliburnproject.org"
             mc:Ignorable="d"
             d:DesignHeight="360" d:DesignWidth="1920" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Style="{DynamicResource UserControlStyle}">
    <!-- GRID DEFINITIONS -->


    <Grid Height="360" Width="1920" VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="3*" />
            <ColumnDefinition Width="7*" />
            <ColumnDefinition Width="3*" />
            <ColumnDefinition Width="3*" />
            <ColumnDefinition Width="2*" />
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="5*" />
            <RowDefinition Height="1*" />
        </Grid.RowDefinitions>

        <!-- GAME MARQUEE -->

		<Image Source="{Binding Path=SelectedGame.MarqueeImagePath}" Stretch="Uniform" HorizontalAlignment="Center" VerticalAlignment="Center" RenderOptions.BitmapScalingMode="HighQuality" Panel.ZIndex="0"/>
		
		<Border x:Name="Blackscreen" Grid.Column="0" Grid.Row="0" Grid.RowSpan="2" Grid.ColumnSpan="5" Panel.ZIndex="1" Background="Black" Opacity="1" SnapsToDevicePixels="True" RenderOptions.EdgeMode="Aliased" ></Border>
		
		<TextBlock x:Name="MarqueeBackgroundPlatform"  Visibility="Collapsed">
			<TextBlock.Text>
				<MultiBinding StringFormat="LAUNCHBOX_ROOT_FOLDER/Images/Marquees/Platforms/{0}.png">
					<Binding Path="SelectedGame.Platform" />
				</MultiBinding>
			</TextBlock.Text>
		</TextBlock>
		<Image Source="{Binding Text, ElementName=MarqueeBackgroundPlatform, FallbackValue='LAUNCHBOX_ROOT_FOLDER/Images/Marquees/Platforms/Default.png'}" Grid.Row="0" Grid.RowSpan="4" Grid.Column="0" Grid.ColumnSpan="8" Panel.ZIndex="2" Stretch="Fill" RenderOptions.BitmapScalingMode="HighQuality" />
		
        <Image Grid.Column="1" Grid.Row="0" Source="{Binding Path=SelectedGame.ClearLogoImagePath}" Stretch="Uniform" HorizontalAlignment="Center" VerticalAlignment="Center" RenderOptions.BitmapScalingMode="HighQuality" Panel.ZIndex="2"/>

        <Image Grid.Column="2" Grid.Row="0" Source="{Binding Path=SelectedGame.CartFrontImagePath}" Stretch="Uniform" HorizontalAlignment="Right" VerticalAlignment="Center" RenderOptions.BitmapScalingMode="HighQuality" Opacity="0.5" RenderTransformOrigin="0.5,0.5" Panel.ZIndex="2">
            <Image.RenderTransform>
                <TransformGroup>
                    <ScaleTransform ScaleY="0.8" ScaleX="0.8"/>
                    <SkewTransform/>
                    <RotateTransform Angle="-20"/>
                    <TranslateTransform X="-20" Y="-20"/>
                </TransformGroup>
            </Image.RenderTransform>
            <Image.Effect>
                <BlurEffect Radius="50"/>
            </Image.Effect>
        </Image>
        <Image Grid.Column="2" Grid.Row="0" Source="{Binding Path=SelectedGame.CartFrontImagePath}" Stretch="Uniform" HorizontalAlignment="Right" VerticalAlignment="Center" RenderOptions.BitmapScalingMode="HighQuality" RenderTransformOrigin="0.5,0.5" Panel.ZIndex="3">
            <Image.RenderTransform>
                <TransformGroup>
                    <ScaleTransform ScaleY="0.8" ScaleX="0.8"/>
                    <SkewTransform/>
                    <RotateTransform Angle="-20"/>
                    <TranslateTransform X="20"/>
                </TransformGroup>
            </Image.RenderTransform>
        </Image>

        <Image Grid.Column="3" Grid.Row="0" Source="{Binding Path=SelectedGame.Box3DImagePath}" Stretch="Uniform" HorizontalAlignment="Left" VerticalAlignment="Center" RenderOptions.BitmapScalingMode="HighQuality" Opacity="0.5" RenderTransformOrigin="0.5,0.5" Panel.ZIndex="2">
            <Image.RenderTransform>
                <TransformGroup>
                    <ScaleTransform ScaleY="0.8" ScaleX="0.8"/>
                    <SkewTransform/>
                    <TranslateTransform X="-40" Y="-20"/>
                </TransformGroup>
            </Image.RenderTransform>
            <Image.Effect>
                <BlurEffect Radius="50"/>
            </Image.Effect>
        </Image>
        <Image Grid.Column="3" Grid.Row="0" Source="{Binding Path=SelectedGame.Box3DImagePath}" Stretch="Uniform" HorizontalAlignment="Left" VerticalAlignment="Center" RenderOptions.BitmapScalingMode="HighQuality" RenderTransformOrigin="0.5,0.5" Panel.ZIndex="3">
            <Image.RenderTransform>
                <TransformGroup>
                    <ScaleTransform ScaleY="0.8" ScaleX="0.8"/>
                    <SkewTransform/>
                    <TranslateTransform/>
                </TransformGroup>
            </Image.RenderTransform>
        </Image>
    </Grid>
</UserControl>

 

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.

×
 Share
Go to topic listing
×
×
  • Create New...