Jump to content
LaunchBox Community Forums

XAML Tips and Tricks


Recommended Posts

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>

 

  • Thanks 1
Link to comment
Share on other sites

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 by PhillsDoodles
Found another issue on my code and don't wanna double post.
Link to comment
Share on other sites

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.

  • Thanks 3
Link to comment
Share on other sites

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?

Link to comment
Share on other sites

  • 3 weeks later...

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:
5c06895a1d.png

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

Link to comment
Share on other sites

  • 4 weeks later...

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. 

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