Jump to content
LaunchBox Community Forums
Jason Carr

XAML Tips and Tricks

Recommended Posts

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. :)

Share this post


Link to post
Share on other sites

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!

  • Like 1

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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?

test.png

Share this post


Link to post
Share on other sites

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>

 

Share this post


Link to post
Share on other sites

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>

 

 

Share this post


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

test.png

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.

  • Like 1

Share this post


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

  • Like 1

Share this post


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

Share this post


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

Share this post


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

Share this post


Link to post
Share on other sites

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>

 

Share this post


Link to post
Share on other sites

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

 

Share this post


Link to post
Share on other sites

@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" />
  • Like 3

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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

Minimal-AO Game Wheel Minimal.jpgThe 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.

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...