XAML Tips and Tricks

[CriticalCid]

Hey Phil, great to see you here

The TransitionsPresenter has always a small delay in it that you can’t disable but you can try this instead:

<Grid.Background>
	<Image Source="{Binding Path=SelectedPlatform.BackgroundImagePath}" Stretch="UniformToFill" RenderOptions.BitmapScalingMode="HighQuality"  />
</Grid.Background>

 

[PhillsDoodles]

Hey CriticalCid, thanks a lot!
I've tried a different approach, i followed Jason's Data Bind tutorial and added the theme image on top of the menu and it worked great!
Edit: The code works only when i put it on the PlatformWheel1FiltersView, but now when i tried to insert it on TextGamesView, i does nothing.

Thanks in advance.
Edit 2: changed the Binding Path=PlatformTitle to SelectedGame.Platform and it worked.

<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"
             mc:Ignorable="d"
             d:DesignHeight="562" d:DesignWidth="1000" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Style="{DynamicResource UserControlStyle}">
    <UserControl.Resources>
        <DataTemplate DataType="{x:Type ContentControl}" x:Key="ImageTemplate">
            <Image x:Name="TemplateImage" />
            <DataTemplate.Triggers>
                <DataTrigger Binding="{Binding Path=PlatformTitle}" Value="Atari 2600">
                    <Setter TargetName="TemplateImage" Property="Source" Value="pack://siteoforigin:,,,/Themes/retrorama/Images/Theme/Gamelist/Atari 2600.jpg"></Setter>
                </DataTrigger>
                <DataTrigger Binding="{Binding Path=PlatformTitle}" Value="Sega Genesis">
                    <Setter TargetName="TemplateImage" Property="Source" Value="pack://siteoforigin:,,,/Themes/retrorama/Images/Theme/Gamelist/Sega Genesis.jpg"></Setter>
                </DataTrigger>
                <DataTrigger Binding="{Binding Path=PlatformTitle}" Value="Nintendo Entertainment System">
                    <Setter TargetName="TemplateImage" Property="Source" Value="pack://siteoforigin:,,,/Themes/retrorama/Images/Theme/Gamelist/Nintendo Entertainment System.jpg"></Setter>
                </DataTrigger>
                <DataTrigger Binding="{Binding Path=PlatformTitle}" Value="Super Nintendo Entertainment System">
                    <Setter TargetName="TemplateImage" Property="Source" Value="pack://siteoforigin:,,,/Themes/retrorama/Images/Theme/Gamelist/Super Nintendo Entertainment System.jpg"></Setter>
                </DataTrigger>
            </DataTemplate.Triggers>
        </DataTemplate>
    </UserControl.Resources>
    
    <Canvas Name="Canvas">
        <transitions:TransitionPresenter TransitionSelector="{Binding BackgroundTransitionSelector}" Content="{Binding BackgroundView}" Height="{Binding ElementName=Canvas, Path=ActualHeight}" Width="{Binding ElementName=Canvas, Path=ActualWidth}" IsContentVideo="true" />
        
        <Grid Height="{Binding ElementName=Canvas, Path=ActualHeight}" Width="{Binding ElementName=Canvas, Path=ActualWidth}">
            <Grid.Background>
                <SolidColorBrush Color="Black" Opacity="{Binding BackgroundFade}" />
            </Grid.Background>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="26*" />
                <ColumnDefinition Width="71*" />
                <ColumnDefinition Width="3*" />
            </Grid.ColumnDefinitions>
            <transitions:TransitionPresenter Grid.Column="0" TransitionSelector="{Binding ListTransitionSelector}" Content="{Binding ListView}" />
            <Grid Grid.Column="1">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="4*" />
                    <ColumnDefinition Width="96*" />
                </Grid.ColumnDefinitions>
                <Grid Grid.Column="1">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="44*" />
                        <ColumnDefinition Width="5*" />
                        <ColumnDefinition Width="52*" />
                    </Grid.ColumnDefinitions>
                    <Grid Grid.Column="0">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="4.2*" />
                            <RowDefinition Height="59.3*" />
                            <RowDefinition Height="5.4*" />
                            <RowDefinition Height="45.3*" />
                            <RowDefinition Height="4.2*" />
                        </Grid.RowDefinitions>
                        <transitions:TransitionPresenter Grid.Row="1" TransitionSelector="{Binding ImageTransitionSelector}" Content="{Binding ImageView}" />

<!-- This is the line that brings the background, i've tried to replace the screenshot first to see if it works. -->
                        <ContentControl Content="{Binding}" ContentTemplate="{StaticResource ImageTemplate}" />
                        <!--<transitions:TransitionPresenter Grid.Row="3"  TransitionSelector="{Binding ImageVideoTransitionSelector}" Content="{Binding ImageVideoView}" IsContentVideo="true" />-->
                    </Grid>
                    <transitions:TransitionPresenter Grid.Column="2" TransitionSelector="{Binding GameDetailsTransitionSelector}" Content="{Binding GameDetailsView}" />
                </Grid>
            </Grid>
        </Grid>
    </Canvas>
</UserControl>

 

Edited December 1, 2017 by PhillsDoodles
Found another issue on my code and don't wanna double post.

[CriticalCid]

Yes, the DataBinding approach works as well but I would suggest to use a more dynamic version for it. Your current code is fine if you have a manageable amount of platforms or just want it for specific platforms, but it gets really messy the more platforms you add and you would also need to add every new platform manually. So I highly suggest to use this code here instead:

<TextBlock x:Name="BackgroundPlatformName" Visibility="Collapsed">
	<TextBlock.Text>
		<MultiBinding StringFormat="{}pack://siteoforigin:,,,/Themes/retrorama/Images/Theme/Gamelist/{0}.jpg">
			<Binding Path="SelectedPlatform.Name" />
		</MultiBinding>
	</TextBlock.Text>
</TextBlock>
<Image Source="{Binding Text, ElementName=BackgroundPlatformName, FallbackValue='pack://siteoforigin:,,,/Themes/retrorama/Images/Theme/Gamelist/Default.jpg'}" Opacity="100" Stretch="Fill" RenderOptions.BitmapScalingMode="HighQuality" />

What this code does is to create a hidden TextBlock which gets populated with the correct path for the image as it uses a multibinding method to insert the name of the currently selected platform as a variable. The image element on the other hand just points to the content of the TextBox to get the file path from there. You can also specify a fallback value which gets used as default file path when there doesn't exist a file named like the platform title, because otherwise you would just get a black screen if you hit a platform you have no image for.

Also a small tip regarding "Active" vs. "Selected": If you don’t need to show data or images instantly than you should always use the “Active” instead of the “Selected” tag. “Selected” is a known performance killer and if you call a lot of them in your View then you can really bring BigBox down when you navigate really fast through your collection or when the attract mode kicks in. So try to avoid "Selected" when it's not really necessary.

[PhillsDoodles]

Wow! awesome! thanks a lot, i'm gonna try it
Edit: It works like a charm! Thanks a lot!

Edited December 1, 2017 by PhillsDoodles
Switch the code that CriticalCid provided

[PhillsDoodles]

Hello!

Is there a way to make the image size relative to its grid like it can be done on the grids definition?

I had used MaxWidth and MaxHeight but the image appears in different size when i switch the resolution and i want it to looks the same in different resolutions.

Thanks in advance.

[CriticalCid]

I wouldn't give the image a specific size and just set the stretch property to fill the grid.

[PhillsDoodles]

Yup, i think it's best to divide the grid cell and use RowSpan and CollumSpan to resize them.
Thanks a lot!

[Jason Carr]

@PhillsDoodles Just feasted my eyes on this: 

Wow!

[PhillsDoodles]

Thanks a lot Jason! i'm glad you guys enjoy it!

[shinra358]

On 12/1/2017 at 11:27 AM, CriticalCid said:

Yes, the DataBinding approach works as well but I would suggest to use a more dynamic version for it. Your current code is fine if you have a manageable amount of platforms or just want it for specific platforms, but it gets really messy the more platforms you add and you would also need to add every new platform manually. So I highly suggest to use this code here instead:

<TextBlock x:Name="BackgroundPlatformName" Visibility="Collapsed">
	<TextBlock.Text>
		<MultiBinding StringFormat="{}pack://siteoforigin:,,,/Themes/retrorama/Images/Theme/Gamelist/{0}.jpg">
			<Binding Path="SelectedPlatform.Name" />
		</MultiBinding>
	</TextBlock.Text>
</TextBlock>
<Image Source="{Binding Text, ElementName=BackgroundPlatformName, FallbackValue='pack://siteoforigin:,,,/Themes/retrorama/Images/Theme/Gamelist/Default.jpg'}" Opacity="100" Stretch="Fill" RenderOptions.BitmapScalingMode="HighQuality" />

What this code does is to create a hidden TextBlock which gets populated with the correct path for the image as it uses a multibinding method to insert the name of the currently selected platform as a variable. The image element on the other hand just points to the content of the TextBox to get the file path from there. You can also specify a fallback value which gets used as default file path when there doesn't exist a file named like the platform title, because otherwise you would just get a black screen if you hit a platform you have no image for.

Also a small tip regarding "Active" vs. "Selected": If you don’t need to show data or images instantly than you should always use the “Active” instead of the “Selected” tag. “Selected” is a known performance killer and if you call a lot of them in your View then you can really bring BigBox down when you navigate really fast through your collection or when the attract mode kicks in. So try to avoid "Selected" when it's not really necessary.

In your code, what does the {0} mean?

[PhillsDoodles]

it returns the platform name. So, if i'm on Arcade platform, it will return Arcade.jpg and show the image as background.

[shinra358]

Excellent! Thanks, I needed that.

Do you know how to do a randomized version? (randomly selecting from a series of images like arcade-01.png, arcade-02.png, arcade-03.png) with said code?

Edited December 12, 2017 by shinra358

[mcfilmmakers]

You need to set it up with a multi converter 

[shinra358]

Is that xaml only without code behind? If so, can you integrate it with the above code and show it?

[mcfilmmakers]

What you want to do require and if/and statement and that can only be done code behind.

[steambowser]

Heya. Apologies if this is the incorrect place to post this, but I have an extremely simple question:

For Bigbox, is there a way to make the height of the game boxes smaller in the "wall" view?
I can't seem to find an option for this, so it seems the only solution would be to edit the skin.

If possible, I'd like my Steam banners to be closer to each other in this view:


Thanks in advance! And sorry again if this is the wrong place to ask.

[y2guru]

@Jason Carr Hey Jason, I could of sworn you posted a tip detailing a method that can enable the theme creator to enforce a given resolution, I cannot find it anywhere :-(  If I'm not mistaken can you link it... pretty please.

[Rincewind]

It's in the ThemeSettings.xml in the theme folder, just change the one you want to force use with 'true'

	<Force16X9AspectRatio>false</Force16X9AspectRatio>
    <Force4X3AspectRatio>false</Force4X3AspectRatio>

 

[y2guru]

Ah ok, it’s the aspect ratio... that will still come in handy!  Cheers @Rincewind

[Sithel]

I've done some searching and can't seem to find the issue I'm having.

Looking in the .pdf notes I see this:

SelectedGame.StarRating
The selected game’s Star Rating; integer value between 0 and 5
<TextBlock Text="{Binding Path=SelectedGame.StarRating}" Foreground="White" />

I see we can set the star rating in halves but setting the integer to something like 2.5 will not output a 2.5 rating. It seems to round down to a 2.