XAML Tips and Tricks

[viking]

@eatkinola @faeran I just took a look at Retrotastic.
And YESSSSSS !!! This is it !

Is here your code : 
 

<aoc:AutoscaleTextBlock Name="ScrollNotes" TargetFontSize="20" TargetScreenHeight="1080" FontFamily="{StaticResource ExoFont}" Foreground="WhiteSmoke" Grid.Row="6" Grid.Column="1">
                    <Canvas ClipToBounds="True" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Width="{Binding ElementName=ScrollNotes, Path=ActualWidth}" Height="{Binding ElementName=ScrollNotes, Path=ActualHeight}">
                        <controls:ScrollableTextBlock Text="{Binding Path=Notes}" Width="{Binding ElementName=ScrollNotes, Path=ActualWidth}" TextWrapping="Wrap" ScrollBeginDelay="8" ScrollSpeed="3" ScrollAutoReverse="True" ScrollEndDelay="8" ReverseScrollSpeed="0.5">
                            <controls:ScrollableTextBlock.Effect>
                                <DropShadowEffect BlurRadius="0" Direction="255" ShadowDepth="1" Color="#000000" RenderingBias="Quality" />
                            </controls:ScrollableTextBlock.Effect>
                        </controls:ScrollableTextBlock>
                    </Canvas>
                </aoc:AutoscaleTextBlock>

And it works perfectly !!!
Now, ALL my text is responsive !! thanks guys ?

[viking]

OK, new blocking point for me ... ?

I'm trying to animate the platform video. With a simple TranslateTransform on X.
 - State 1: Video centered, fullscreen.
 - State 2: video slide to the right by 25%
A simple slide to the right.

But impossible to use the percentage.
So I'm in the same situation as for the text. I have to give a pixel value, which is only valid for a single screen resolution.

Here is my current code. It works fine, but only for 1080p. In other resolution, the video goes too far or not sow.

<UserControl d:DesignHeight="1080"
             d:DesignWidth="1920" />

<UserControl.Resources>
  <!-- ANIMATION - PLATFORM VIDEO - RIGHT SLIDE -->
  <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="X" Storyboard.TargetName="PlatformVideoAnim">
  	<EasingDoubleKeyFrame KeyTime="0:0:0.0" Value="0" />
  	<EasingDoubleKeyFrame KeyTime="0:0:2.0" Value="350">
</UserControl.Resources>
    
<Canvas Name="Canvas">
  <Grid Height="{Binding ElementName=Canvas, Path=ActualHeight}" Width="{Binding ElementName=Canvas, Path=ActualWidth}">
    <Grid.ColumnDefinitions>
    	<ColumnDefinition Width="5*" />
    	<ColumnDefinition Width="5*" />
    </Grid.ColumnDefinitions>
    
    
    <Grid ClipToBounds="False" Grid.Column="0" Grid.ColumnSpan="12" Grid.Row="0" Grid.RowSpan="11" >
    	<transitions:TransitionPresenter x:Name="PlatformVideo" TransitionSelector="{Binding ImageVideoTransitionSelector}" 
                                         Content="{Binding ImageVideoView}" IsContentVideo="True" Visibility="Visible" Margin="0,0,0,0"
                                         Width="{Binding ElementName=Canvas, Path=ActualWidth}" Height="{Binding ElementName=Canvas, Path=ActualHeight}">
                    <transitions:TransitionPresenter.RenderTransform>
                        <TranslateTransform x:Name="PlatformVideoAnim" X="0" />
                    </transitions:TransitionPresenter.RenderTransform>
        </transitions:TransitionPresenter>
    </Grid>
    
    
  </Grid>
</Canvas>

I searched everywhere on the internet, but I cannt find any clear answer. Some talk about creating a converter. But I dont know how to do that!
Any ideas to give a relative value to X that works for any resolution?????

[eatkinola]

3 hours ago, viking said:

Some talk about creating a converter. But I dont know how to do that! Any ideas to give a relative value to X that works for any resolution?????

I do something similar in one of my themes. It requires a converter when is also in the themer dll. I'll send you an example later when home.

[eatkinola]

@viking: here's an example of what I mentioned ^^ -- aox:DimensionW3840Converter is the key. You specify the dimension assuming 4K display (3840 pixels wide), and the converter scales this dimension according to the actual display width. This is an example of one of my styles used to define a storyboard where something flies in from the left side of the screen:

xmlns:aox="clr-namespace:Ao.Bigbox.Converters;assembly=Ao.Bigbox.Themer.v3_9_3"
...
<aox:DimensionW3840Converter x:Key="DimensionW3840Converter" />
...
<sys:Double x:Key="AO3840_FlyinOffsetLeft">-500</sys:Double>
<sys:Double x:Key="AO3840_FlyinOffsetLeftBounce">40</sys:Double>
...
<Storyboard x:Key="AOSelectedFlyin_L" TargetName="GridFlyLeft">
    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="RenderTransform.(TranslateTransform.X)">
        <LinearDoubleKeyFrame KeyTime="0:0:0.00" Value="{Binding Source={StaticResource AO3840_FlyinOffsetLeft}, Converter={StaticResource DimensionW3840Converter}}" />
        <LinearDoubleKeyFrame KeyTime="0:0:1.70" Value="{Binding Source={StaticResource AO3840_FlyinOffsetLeft}, Converter={StaticResource DimensionW3840Converter}}" />
        <LinearDoubleKeyFrame KeyTime="0:0:1.85" Value="{Binding Source={StaticResource AO3840_FlyinOffsetLeftBounce}, Converter={StaticResource DimensionW3840Converter}}" />
        <LinearDoubleKeyFrame KeyTime="0:0:1.90" Value="0" />
    </DoubleAnimationUsingKeyFrames>
</Storyboard>

 

[viking]

@eatkinola Man ! Your plugin is amazing !
It works perfectly !!!

If it can help others, here is how I adapted it to my theme:

<UserControl xmlns:aox="clr-namespace:Ao.Bigbox.Converters;assembly=Ao.Bigbox.Themer.v3_9_3"
             xmlns:sys="clr-namespace:System;assembly=mscorlib"/>

<UserControl.Resources>
  <aox:DimensionW3840Converter x:Key="DimensionW3840Converter"/>
  <sys:Double x:Key="ConvertVideoSlideRight">722</sys:Double>

	<Storyboard x:Key="ChangePlatform">

    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="X" TargetName="PlatformVideoAnim">
        <EasingDoubleKeyFrame KeyTime="0:0:0.00" Value="0" />
        <EasingDoubleKeyFrame KeyTime="0:0:1.00" Value="{Binding Source={StaticResource ConvertVideoSlideRight}, Converter={StaticResource DimensionW3840Converter}}" />
    </DoubleAnimationUsingKeyFrames>

	</Storyboard>
</UserControl.Resources>

By the way, I have almost finished my new theme. Around 90%. ?

[jayjay]

I have a question that I hope the few guys/girls who know their stuff wouldn't mind answering. Im not the most technically minded so please bear with me. I dont need an in depth answer, although that would be appreciated, but a simple yes or no will suffice.

 

I have created a platform view xaml... Launchbox/Themes/Custom Theme/Views/Custom Views/My Custom Platform.xaml.

This XAML has 1 textblock that is binded to a property in my USERCONTROL, the namespace is declared in the xaml etc etc.

In bigbox, I press OnPageUp(), the text block changes to "hello", OnPageDown() = "goodbye" etc etc.

Iv done this using a static property changed event.

All I read is statics are bad mmkay.

Anyway I want to create something that will have lots of objects, these objects will change on user input etc etc mainly cached images.

I understand creating lots of static objects that could continuously change is not a good idea.

So my question is, are static properties and events the only way I can update the Platform xaml elements from my user control?

Would appreciate a yes or no, or maybe a few words to point me in the right direction. If its a no I'll give it another go.

 

Edited April 5, 2019 by jayjay

[bbweiners]

Does anyone know if it's possible to have a directory with image files that you could have randomly selected from? That way if you have multiple images you'd like to use in a view you could have them be chosen at random from a directory rather than assigning a static image.

Thanks!

[jayjay]

12 hours ago, bbweiners said:

Does anyone know if it's possible to have a directory with image files that you could have randomly selected from? That way if you have multiple images you'd like to use in a view you could have them be chosen at random from a directory rather than assigning a static image.

Thanks!

RandomImageSelector.zip

Don't know if this will help you. Its a usercontrol. It will select a random png from Launchbox/images/random image selector. You will need to sort out the height and width etc etc. I included the source and a textgamesview. 

Edited April 6, 2019 by jayjay

[bbweiners]

12 hours ago, jayjay said:

RandomImageSelector.zip 277.08 kB · 2 downloads

Don't know if this will help you. Its a usercontrol. It will select a random png from Launchbox/images/random image selector. You will need to sort out the height and width etc etc. I included the source and a textgamesview. 

Hey @jayjay,

Thanks for this. Unfortunately I can't get it to work.

I put the RandomImageSelector.dll in my theme plugins folder.

I added     xmlns:ris="clr-namespace:RandomImageSelector;assembly=RandomImageSelector"    to UserControls

I added     <ris:RandomImage HorizontalAlignment="Center" VerticalAlignment="Center" Grid.Column="1" Grid.ColumnSpan="1" Grid.Row="1" Grid.RowSpan="1"/>    to my HorizontalWheel2GamesView.xaml    (I also have the grid stuff setup).

I threw some image files in the root of RandomImageSelector directory, which resides in the root of my theme folder as well as Launchbox/Images.

I threw some more images in every subfolder that is titled RandomImageSelector.

So what am I doing wrong? Am I completely off (most likely)?

Thanks

[jayjay]

1 hour ago, bbweiners said:

 

Did you try putting the png's in launchbox/Images/Random Image Selector? 

 

[bbweiners]

10 minutes ago, jayjay said:

Did you try putting the png's in launchbox/Images/Random Image Selector? 

 

I didn't have spaces in the directory, Random Image Selector. This is awesome! Thanks!

[viking]

Hello community. I have a new question! ?

On my theme, Platform page, I want to put the max player number.
With 2 lines of text:
 - Binding: MaxControllers
 - Fixed text: "Player"

The code is simple and it works well:

<TextBlock Text="{Binding Path=ActivePlatform.MaxControllers}" x:Name="TotalPlayersCount" />
<TextBlock Text="Player" x:Name="TotalPlayersText" />

But I would like to add to the fixed text:

• If the number of controller :  unknown or 1 = "Player"
• If the number of controller :  2 or more = "Players"    (with an S)

How to do that? Any ideas ?

[wallmachine]

Hey, I was just wondering if I could some help with clear logos and making them uniform.

I'm using a font to type out the platform name so that means longer names will end up being tiny and shorter names will end up massive in BigBox...

Example in the video below you can see in the platform view they are not uniform but in the game view they look uniform. 

 

[wallmachine]

Edit: Setting MaxVerticalImageResolutionOverride fixed it but no idea whats the default value... What values should this be incremented by whats the maximum etc and if possible can i please have a bit more explanation than "Used to override the user’s default CoverFlow image quality settings. Omit this property to use the default settings (recommended for most scenarios). Cached images will be resized to this vertical resolution."

hey@Jason Carr any idea why the middle logo is blurry in the platform view but not the game view..

code:

<coverFlow:FlowControl x:Name="FlowControl" ImageType="Clear Logo" CameraZPosition="5.5" CurveAmount="7" ItemZPosition="2.0" PageSize="6" SelectedItemZPosition="3.8" Spacing="3" VisibleCount="14">
	<coverFlow:FlowControl.CoverFactory>
		<coverFlow:HorizontalWheelCoverFactory />
	</coverFlow:FlowControl.CoverFactory>
</coverFlow:FlowControl>

 

Edited April 15, 2019 by wallmachine

[Jason Carr]

On 4/13/2019 at 6:02 AM, wallmachine said:

Edit: Setting MaxVerticalImageResolutionOverride fixed it but no idea whats the default value... What values should this be incremented by whats the maximum etc and if possible can i please have a bit more explanation than "Used to override the user’s default CoverFlow image quality settings. Omit this property to use the default settings (recommended for most scenarios). Cached images will be resized to this vertical resolution."

hey@Jason Carr any idea why the middle logo is blurry in the platform view but not the game view..

code:

<coverFlow:FlowControl x:Name="FlowControl" ImageType="Clear Logo" CameraZPosition="5.5" CurveAmount="7" ItemZPosition="2.0" PageSize="6" SelectedItemZPosition="3.8" Spacing="3" VisibleCount="14">
	<coverFlow:FlowControl.CoverFactory>
		<coverFlow:HorizontalWheelCoverFactory />
	</coverFlow:FlowControl.CoverFactory>
</coverFlow:FlowControl>

 

Here are the default settings based on the user's configuration:

{ "100", Strings.ValueLowestFastest },
{ "200", Strings.ValueLowFaster },
{ "400", Strings.ValueMediumFast },
{ "600", Strings.ValueHighSlower },
{ "800", Strings.ValueHighestSlowest }

 

[Rogerooo]

Can we bind custom fields? How do you use them? I would like to attribute a field for file size but couldn't find a way to display it on my theme. 

[Jason Carr]

On 4/27/2019 at 3:03 PM, Rogerooo said:

Can we bind custom fields? How do you use them? I would like to attribute a field for file size but couldn't find a way to display it on my theme. 

I actually have this on my to-do list, but unfortunately there's no way currently to show custom fields without building a plugin.

[Rogerooo]

5 hours ago, Jason Carr said:

I actually have this on my to-do list, but unfortunately there's no way currently to show custom fields without building a plugin.

I see, no worries then, I was just curious about them. Thanks for the reply and keep up the great work, love the new startup screen feature.

[Jair]

How do you customize the game startup and shutdown screens that show up when you start and close a game? I don't know which view file has that information and I didn't see anything about it in the documentation. Also, I've got my platform list done fine, but while the list is correctly top-aligned for platforms and categories, for all the others such as genre, status, developer, etc. that use the same view file the list is vertically-centered instead. How can I fix it so it's top-aligned like the main platforms list view? Thanks!

[Rogerooo]

3 hours ago, Jair said:

How do you customize the game startup and shutdown screens that show up when you start and close a game? I don't know which view file has that information and I didn't see anything about it in the documentation. Also, I've got my platform list done fine, but while the list is correctly top-aligned for platforms and categories, for all the others such as genre, status, developer, etc. that use the same view file the list is vertically-centered instead. How can I fix it so it's top-aligned like the main platforms list view? Thanks!

They are located inside the "StartupThemes" folder, a separate folder from the main "Themes" one. Check Launchbox's root directory. The new pause screens also have their own folder, "PauseThemes".