Jump to content
LaunchBox Community Forums

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

Link to comment
Share on other sites

  • 3 weeks later...

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

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

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

 

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

 

 

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

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

 

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

 

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

  • Thanks 2
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...