XAML Tips and Tricks

[Jason Carr]

Very cool @pytsharp! Looking really great. Unfortunately it's probably an issue right now to display the video in both places; I don't think the code will support it. That's something that I hadn't thought about until you brought it up here.

There's also no way to rotate the wheel elements yet either, though that is also a good idea to add. You should be able to remove all video fading if your adjust the correct transition settings. Let me know if that's not working and I can troubleshoot. There are two video transitions: one for platforms and one for games.

I will add rotating the wheel elements and dual videos to my list.

[pytsharp]

Thank you @Jason Carr, much appreciated! I'll use a screenshot or fanart as a background image for now then, but I'm very much looking forward to having the option to play two videos at the same time and a curved wheel!

[captainwarnock]

Hi there, I have a question regarding some xaml I am trying to tweak for the gamesmarquee view. My friend created me some custom platform marquees for my arcade cabinet, as I have a 24" monitor in place on my arcade cabinet, but only half of that is used for the marquee view, the other half is sticking out of the top of the cabinet and will be used for something else. What I would like to do is, when I am displaying a game for a console, lets say super nintendo, I want to show the front box art for the game (as is default for the consoles), as well as the platform marquee beneath it, as to fill in some black space. Looking at the gamesmarqueeview.xaml I copied this line from the platformbannerview.xaml file.

"<Image Source="{Binding Path=SelectedPlatform.BannerImagePath}" Stretch="Uniform" HorizontalAlignment="Center" VerticalAlignment="Bottom" RenderOptions.BitmapScalingMode="HighQuality" />"

and put it above this line that I tweaked to get the size of the box to fit in the marquee space

"<Image Source="{Binding Path=SelectedGame.MarqueeImagePath}"  Stretch="Uniform" Width="1920" Height="600" HorizontalAlignment="Center" VerticalAlignment="Bottom" RenderOptions.BitmapScalingMode="HighQuality" />"

But I can't get that to display the platform banner underneath the box art.  I can see the glaring problem that it is asking for SelectedPlatform even though this file is probably specifically for SelectedGame.  I guess my question is, what do I need to tweak in order to get the Platform BannerImagePath to show underneath the game box art on my secondary marquee monitor. 

Thanks for the help!

-Bill

[CriticalCid]

I know you can show the platform (clear) logo in a games view but I’m not quite sure if it’s possible to show other platform images at the moment. Maybe @Jason Carr can help you more with this.

[captainwarnock]

Thanks @CriticalCid I am hoping that @Jason Carr has some sort of solution for this.  It would really help with the development of themes and images with dynamic Marquee's in mind if we're able to pull platform images into the games view.

[Jason Carr]

Hi @captainwarnock, good point. I'll add that to my list; would be good to get a ticket in for it as well if you can.

[Manuel Leiria]

Hey guys, I have a question. It seems to me that having game theme videos can be very resource intensive, and I personally like to have some details on the game page. But it would also be great to have like a character image show up on top of the layout, like in some of the game theme videos. Something like what's in the attachment. Can I use an image category, like the banner, on this?

[billyc999]

is it possible to use            StackPanel Orientation="Horizontal"  to prevent image overlap i can add the code to the xaml

i can add the code without an error but then images dont show

            <StackPanel Orientation="Horizontal" Grid.ColumnSpan="12" Margin="10,74,-10,10" Grid.RowSpan="2" Grid.Row="13">

                <coverFlow:FlowControl x:Name="FlowControl" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Grid.Row="10" Grid.RowSpan="4" Grid.Column="0" Grid.ColumnSpan="12" ImageType="Boxes" CurveAmount="0" CameraZPosition="5.5" VisibleCount="11" PageSize="10" ItemZPosition="1.0" SelectedItemZPosition="1.2" Spacing="1.5" Margin="0,272,0,0">

                    <coverFlow:FlowControl.CoverFactory>

                        <coverFlow:HorizontalWheelCoverFactory />

                    </coverFlow:FlowControl.CoverFactory>

                </coverFlow:FlowControl>

            </StackPanel>

 

[Hexxxer]

How does one display a system logo on the game selection screen?

[Kevin_Flynn]

Is there any reason why the quality deteriorates in the coverFlow?

I'm using high quality images from : http://forums.launchbox-app.com/files/file/130-reignstumbles-console-artwork-pack

However, I get: https://imgur.com/a/GoJv2

<coverFlow:FlowControl x:Name="FlowControl" ImageType="Device" CurveAmount="0" CameraZPosition="3" ItemZPosition="1" SelectedItemZPosition="1" Spacing="1.4" RenderOptions.BitmapScalingMode="HighQuality">

    <coverFlow:FlowControl.CoverFactory>

      <coverFlow:HorizontalWheelCoverFactory  />

  	</coverFlow:FlowControl.CoverFactory>

</coverFlow:FlowControl>

 

 

[Jason Carr]

On 12/15/2016 at 2:01 PM, creamdonut said:

Hey guys, I have a question. It seems to me that having game theme videos can be very resource intensive, and I personally like to have some details on the game page. But it would also be great to have like a character image show up on top of the layout, like in some of the game theme videos. Something like what's in the attachment. Can I use an image category, like the banner, on this?

Yes, this should be possible. The only downside is that currently there's no proper image category for the characters, but once you have the images it should be easy enough to place them there.

[Jason Carr]

On 12/18/2016 at 5:55 AM, billyc999 said:

is it possible to use            StackPanel Orientation="Horizontal"  to prevent image overlap i can add the code to the xaml

i can add the code without an error but then images dont show

            <StackPanel Orientation="Horizontal" Grid.ColumnSpan="12" Margin="10,74,-10,10" Grid.RowSpan="2" Grid.Row="13">



                <coverFlow:FlowControl x:Name="FlowControl" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Grid.Row="10" Grid.RowSpan="4" Grid.Column="0" Grid.ColumnSpan="12" ImageType="Boxes" CurveAmount="0" CameraZPosition="5.5" VisibleCount="11" PageSize="10" ItemZPosition="1.0" SelectedItemZPosition="1.2" Spacing="1.5" Margin="0,272,0,0">



                    <coverFlow:FlowControl.CoverFactory>



                        <coverFlow:HorizontalWheelCoverFactory />



                    </coverFlow:FlowControl.CoverFactory>



                </coverFlow:FlowControl>



            </StackPanel>

 

@billyc999 I think I already answered this in the other thread, but unfortunately that won't help to auto-space the boxes. Currently the Spacing property on the FlowControl is the best you can do there.

[Jason Carr]

On 12/21/2016 at 7:14 AM, Hexxxer said:

How does one display a system logo on the game selection screen?

You have access to the Platform object, which you can bind to. So you should be able to bind an Image element to Platform.ClearLogoImagePath.

[Jason Carr]

2 hours ago, Kevin_Flynn said:

Is there any reason why the quality deteriorates in the coverFlow?

I'm using high quality images from : http://forums.launchbox-app.com/files/file/130-reignstumbles-console-artwork-pack

However, I get: https://imgur.com/a/GoJv2

<coverFlow:FlowControl x:Name="FlowControl" ImageType="Device" CurveAmount="0" CameraZPosition="3" ItemZPosition="1" SelectedItemZPosition="1" Spacing="1.4" RenderOptions.BitmapScalingMode="HighQuality">



    <coverFlow:FlowControl.CoverFactory>



      <coverFlow:HorizontalWheelCoverFactory  />



  	</coverFlow:FlowControl.CoverFactory>



</coverFlow:FlowControl>

 

 

There is a CoverFlow quality setting in the options. CoverFlow images are cached in order to display them quickly, and this setting determines the quality of the cached images.

[Kevin_Flynn]

10 hours ago, Jason Carr said:

There is a CoverFlow quality setting in the options. CoverFlow images are cached in order to display them quickly, and this setting determines the quality of the cached images.

Thanks Jason; however, I've already tried adjusting the setting "CoverFlow Image Quality: Highest (Slowest)" and refreshed all image caches. No luck - still blurry.

I tried taking out

RenderOptions.BitmapScalingMode="HighQuality"

from my code as well as changing ImageType to "Clear Logo" and moved the associated images in the correct folder.

Edit: in fact the quality doesn't change at all when I adjust the Image Quality via Settings.

Edited December 23, 2016 by Kevin_Flynn

[Kevin_Flynn]

Here is a comparison of importing it via Image vs CoverFlow: https://imgur.com/a/rKFO9

 

<Image Grid.Column="0" Source="pack://siteoforigin:,,,/Themes/Test/Images/Platforms/Device/Arcade.png" RenderOptions.BitmapScalingMode="HighQuality" />

VS.

<coverFlow:FlowControl x:Name="FlowControl" ImageType="Device" CurveAmount="0" CameraZPosition="3" ItemZPosition="1" SelectedItemZPosition="1" Spacing="2.4">

  <coverFlow:FlowControl.CoverFactory>

    <coverFlow:HorizontalWheelCoverFactory  />

  </coverFlow:FlowControl.CoverFactory>

</coverFlow:FlowControl>

 

[eatkinola]

Can someone please answer @Sithel's post?  I was wondering the same thing.  I'd like to display the ratings icons in a different place within my theme, but I don't know the name of these icon files within the Resources directory.

On ‎10‎/‎7‎/‎2016 at 11:16 PM, Sithel said:

Is there a way to show the games Rating Image like you can for the favorites image?

<Image Source="pack://application:,,,/Resources/BigBoxFavorite.png" RenderOptions.BitmapScalingMode="HighQuality" />

I've seen the .pdf and can add every other image but not the ratings image.

 

Thanks

 

[CriticalCid]

@Sithel @eatkinola That was just recently added with LB v7.0 but I guess @Jason Carr either hasn’t come around to add that to the documentation or has simply forgot it.

To enable ESRB icons support you have to add this code over your Canvas first:

<UserControl.Resources>

	<bigBox:ImageToSourceConverter x:Key="ImageToSourceConverter" x:Name="ImageToSourceConverter"/>

</UserControl.Resources>

And to actually use it you in your theme you need this line:

<Image Name="RatingImage" Source="{Binding Path=SelectedGame.RatingImage, Converter={StaticResource ImageToSourceConverter}}" RenderOptions.BitmapScalingMode="HighQuality" />

[eatkinola]

Thanks @CriticalCid -- that did the trick.  I should've noticed the UserControl.Resources element in GamesDetailsView. I appreciate you bringing that to my attention, and for teaching me something new about XAML.

[eatkinola]

Does anyone know if it's possible to obtain the path to the Platform Clear Logo from within a Games Wheel view?  For example:

The way I do this now in my theme is a bit hacky:

<TextBlock x:Name="FileName" Visibility="Collapsed">

    <TextBlock.Text>

        <MultiBinding StringFormat="{}pack://siteoforigin:,,,/Images/Platforms/{0}/Clear Logo/{0}.png">

            <Binding Path="SelectedGame.Platform" />

        </MultiBinding>

    </TextBlock.Text>

</TextBlock>

<Image Source="{Binding Text, ElementName=FileName}" RenderOptions.BitmapScalingMode="HighQuality" />

It works, but only if the path to the clear logo image (a png) is named according to PlatformName.  I tried SelectedPlatform.ClearLogoImagePath, but that does not appear to be defined from within the games wheel view.