XAML Tips and Tricks

[JoeViking245]

or maybe "{Binding CurrentTime, StringFormat=h:mm tt}"

 

[Mr. RetroLust]

Yeah I'll leave that clock alone, the code isn't being accepted, I'll just get used to 12 hrs as I shouldn't be forcing 24hrs in a theme

[Mr. RetroLust]

1 minute ago, JoeViking245 said:

or maybe "{Binding CurrentTime, StringFormat=h:mm tt}"

 

That is excepted by Big Box indeed but hh:mm still displays 12hrs, it's probably overwritten by language settings code

[neil9000]

Surely its best to just let the users language settings decide?

[Mr. RetroLust]

Just now, neil9000 said:

Surely its best to just let the users language settings decide?

Yeah indeed lol

[JoeViking245]

11 minutes ago, Mr. RetroLust said:

but hh:mm still displays 12hrs

Maybe a moot point now, but if that does work, change hh to HH.  hh being 12hr format and HH being 24hr.

[Mr. RetroLust]

28 minutes ago, JoeViking245 said:

Maybe a moot point now, but if that does work, change hh to HH.  hh being 12hr format and HH being 24hr.

Thanks! I'll try it out tonight, I could just use it for my own system or offer it as an alternative if it works, i'll let you know!

[Mr. RetroLust]

@JoeViking245 It didn't work either, though the code is accepted (no errors) it still displays the 12hr clock, I think Big Box overwrites it with it's own defaults.

[Undertherainbow]

On 6/21/2016 at 6:24 PM, Jason Carr said:

Hey everybody, post your XAML tips and tricks to share with other theme creators here. For starters, here's how to add an image with a relative path: 

<Image Source="pack://siteoforigin:,,,/Themes/CleanHardware/img/white-corner.png" RenderOptions.BitmapScalingMode="HighQuality" />

Note that the "pack://siteoforigin:,,," is basically replaced with the LaunchBox folder path. Also note the forward slashes instead of backslashes.

 

This is troubling me. If i may point out that it is not "relative path" but an absolute?

relative path would be

<Image Source="/Themes/CleanHardware/img/white-corner.png" RenderOptions.BitmapScalingMode="HighQuality" />

relative to the starting location of app (solution)

So in case of actual themes it would be

<ResourceDictionary Source="/Styles/HorizontalListBoxStyle.xaml" />

relative path is much more convenient.

 

https://docs.microsoft.com/en-us/dotnet/framework/wpf/app-development/pack-uris-in-wpf

Edited August 20, 2019 by Undertherainbow

[Grila]

40 minutes ago, Undertherainbow said:

 

This is troubling me. If i may point out that it is not "relative path" but an absolute?

relative path would be

<Image Source="/Themes/CleanHardware/img/white-corner.png" RenderOptions.BitmapScalingMode="HighQuality" />

relative to the starting location of app (solution)

So in case of actual themes it would be

<ResourceDictionary Source="/Styles/HorizontalListBoxStyle.xaml" />

relative path is much more convenient.

 

https://docs.microsoft.com/en-us/dotnet/framework/wpf/app-development/pack-uris-in-wpf

It's not an absolute path, it's relative to where Launchbox is installed.

Say you have two installs:

C:\Launchbox

Z:\Foo\Bar\Launchbox

 

Therefore the code you're having trouble understanding (<Image Source="pack://siteoforigin:,,,/Themes/CleanHardware/img/white-corner.png" RenderOptions.BitmapScalingMode="HighQuality" />) translates to this on each install and the theme works as intended:

C:\Launchbox\Themes\CleanHardware\img\white-corner.png

Z:\Foo\Bar\Launchbox\Themes\CleanHardware\img\white-corner.png

 

An absolute path would be the following (and would only work for the first install location, the second would fail to load the image):

<Image Source="C:\Launchbox\Themes\CleanHardware\img\white-corner.png" RenderOptions.BitmapScalingMode="HighQuality" />

 

It's just the way you have to do it with WPF. WPF has many quirks and nuances that don't make much sense, but must be followed.

[Undertherainbow]

@Grila Might depend what u look as source of origin. From origin of app in visual studio its where solution is located. Not the exe which is bundled the theme with. When looking from solution to get to exe one would have to go back couple times ../,,/

using relative pathing

Table 1: Absolute Pack URIs in Markup

File	Absolute pack URI
Resource file - local assembly	"pack://application:,,,/ResourceFile.xaml"
Resource file in subfolder - local assembly	"pack://application:,,,/Subfolder/ResourceFile.xaml"
Resource file - referenced assembly	"pack://application:,,,/ReferencedAssembly;component/ResourceFile.xaml"
Resource file in subfolder of referenced assembly	"pack://application:,,,/ReferencedAssembly;component/Subfolder/ResourceFile.xaml"
Resource file in versioned referenced assembly	"pack://application:,,,/ReferencedAssembly;v1.0.0.0;component/ResourceFile.xaml"
Content file	"pack://application:,,,/ContentFile.xaml"
Content file in subfolder	"pack://application:,,,/Subfolder/ContentFile.xaml"
Site of origin file	"pack://siteoforigin:,,,/SOOFile.xaml"
Site of origin file in subfolder	"pack://siteoforigin:,,,/Subfolder/SOOFile.xaml"

Table 2 illustrates the various relative pack URIs that you can specify in markup.

Table 2: Relative Pack URIs in Markup

File	Relative pack URI
Resource file in local assembly	"/ResourceFile.xaml"
Resource file in subfolder of local assembly	"/Subfolder/ResourceFile.xaml"
Resource file in referenced assembly	"/ReferencedAssembly;component/ResourceFile.xaml"
Resource file in subfolder of referenced assembly	"/ReferencedAssembly;component/Subfolder/ResourceFile.xaml"
Content file	"/ContentFile.xaml"
Content file in subfolder	"/Subfolder/ContentFile.xaml"

Edited August 20, 2019 by Undertherainbow

[Grila]

2 minutes ago, Undertherainbow said:

@Grila Might depend what u look as source of origin. From origin of app in visual studio its where solution is located. Not the exe which is bundled the theme with.

 

Site of Origin Pack URIs

The pack URI for a site of origin file uses the following authority and path:

• Authority: siteoforigin:///.

• Path: The name of the site of origin file, including its path relative to the location from which the executable assembly was launched.

The following example shows the pack URI for a XAML site of origin file, stored in the location from which the executable assembly is launched.

pack://siteoforigin:,,,/SiteOfOriginFile.xaml

The following example shows the pack URI for a XAML site of origin file, stored in subfolder that is relative to the location from which the application's executable assembly is launched.

pack://siteoforigin:,,,/Subfolder/SiteOfOriginFile.xaml

 

[Grila]

It doesn't matter how we look at it, it matters how WPF looks at it.

[Retro808]

I need help getting a textblock to show a defined text when a metadata fields is empty. For example if the Rating field for a game is empty I want to text to display "Unrated" (chosen to differentiate from the actual "Not Rated" in the dropdown options for that field). I have tried TargetNullValue and FallbackValue in numerous fashions. None of which will show any text if the field is empty for a game. In Visual Studio the fallbackvalue will display text in the design window so I at least know the syntax works. It just does not display in the Pause Theme I am tinkering with. Frustrating thing is I know it is probably simple, but I cannot get this to work. Any help would be deeply appreciated. 

<TextBlock Text="{Binding Path=SelectedGame.Rating, FallbackValue='Unrated'}" HorizontalAlignment="Center" Foreground="#0000cd" FontSize="29" FontFamily="LAUNCHBOX_ROOT_FOLDER/PauseThemes/Double Panel/Fonts/Prototype.ttf#Prototype" /> 

 

 

[viking]

OK guys, I have a quick question:

In my COLORFUL theme, PlatformView, I use an animated GIF. This one : 
Animated GIF handles transparency very poorly. So I included the green background in the GIF.

Now, I want to have this same animation effect, but with a reel transparency management, to be able to modify the background color in theme code.
So, I did some research ... But none worked!

Animated SVG ? Animation is not managed in XAML. But even when fixed, the file does not appear in my view. Jason, it's embedded in the BigBox code? (see link)
APNG ? Libraries seem to exist. Almost identical to that for the animated GIF (see the link). But does not seem to be embedded in BigBox code.
WEBP ? Not supported in XAML yet.

I am a little lost there. Ideas? Tracks?
@Jason Carr @Grila @eatkinola or any code master ??

Here is a animated SVG I create for test : Bouton_Onde_animOK_SVG.svg
Here is a animated aPNG I create for test : Colorful_PlatformWheel_IconStart_anim.zip

Edited September 23, 2019 by viking

[Rincewind]

I'm not an expert at Storyboards but if you used a "." or a font with a circle then maybe you could add ScaleX / ScaleY plus Opacity to get the same effect, you would have the top one static then 2 underneath with the animation.

[Mr. RetroLust]

3 hours ago, viking said:

OK guys, I have a quick question:

In my COLORFUL theme, PlatformView, I use an animated GIF. This one : 
Animated GIF handles transparency very poorly. So I included the green background in the GIF.

Now, I want to have this same animation effect, but with a reel transparency management, to be able to modify the background color in theme code.
So, I did some research ... But none worked!

Animated SVG ? Animation is not managed in XAML. But even when fixed, the file does not appear in my view. Jason, it's embedded in the BigBox code? (see link)
APNG ? Libraries seem to exist. Almost identical to that for the animated GIF (see the link). But does not seem to be embedded in BigBox code.
WEBP ? Not supported in XAML yet.

I am a little lost there. Ideas? Tracks?
@Jason Carr @Grila @eatkinola or any code master ??

Here is a animated SVG I create for test : Bouton_Onde_animOK_SVG.svg
Here is a animated aPNG I create for test : Colorful_PlatformWheel_IconStart_anim.zip

I'm not sure if @Hexxxer is still around but he created an animation in his Futurestate theme, search for "barglow" in styles and the xaml files, it transitions between two png files. It's also present in the Neon Deluxe Bigbox themes.

[viking]

Thx. Yes, they are storybord animation directly in XAML. I will probably have to go through that. But I would have liked outsourced the file. In SVG, PNG or other.

[viking]

Ok, ok. I did a test directly in XAML. Here is where I am:
 

        <Storyboard x:Key="ChangePlatform">
			<DoubleAnimation 
                  Storyboard.TargetName="PlayOnde" 
                  Storyboard.TargetProperty="(UIElement.Opacity)" 
                  BeginTime="0:0:5.0" From="1" To="0" Duration="0:0:1.0" RepeatBehavior="Forever" />
            <DoubleAnimation 
                  Storyboard.TargetName="PlayOnde" 
                  Storyboard.TargetProperty="Width" 
                  From="85" To="150" Duration="0:0:1.0" RepeatBehavior="Forever" />
            <DoubleAnimation 
                  Storyboard.TargetName="PlayOnde" 
                  Storyboard.TargetProperty="Height" 
                  From="85" To="150" Duration="0:0:1.0" RepeatBehavior="Forever" />
          </Storyboard>

<Canvas>
	<TextBlock x:Name="TriggerPointer" Text="{Binding Path=SelectedPlatform.Name, NotifyOnTargetUpdated=True}" Visibility="Hidden">
		<TextBlock.Triggers>
			<EventTrigger RoutedEvent="Binding.TargetUpdated">
				<BeginStoryboard Storyboard="{StaticResource ChangePlatform}"/>
			</EventTrigger>
		</TextBlock.Triggers>
	</TextBlock>

	<Ellipse x:Name="PlayOnde" Grid.Column="4" Grid.ColumnSpan="1" Grid.Row="6" Grid.RowSpan="3" Fill="White" Width="80" Height="80" Opacity="0" />

</Canvas>

It works. I have my pulse effect.
!! BUT !!
I can not manage my general fade-in. To stick to the theme general animation, this object must be invisible on my StoryBoard from 0:0:0.0 to 0:0:4.8.
Then, only after, start the infinite pulse loop seen above, in my code snippet.

EDIT : 
Adding a BeginTime on opacity, it works! ?... but only at the first launch.? 
When I change platform, the elipse remains visible. Its animation loop is not reset to 0.

Any idea ???

 

 

Edited September 23, 2019 by viking
Update code exemple

[Rincewind]

Here is a Pulse animation I am using I dont know if it will help, but this way maybe you could us a PNG instead and add the Opacity.

<TextBlock x:Name="PulseAnimate" Text="{Binding Path=Platform.Name, NotifyOnTargetUpdated=True}" Visibility="Collapsed">
	<TextBlock.Triggers>
		<EventTrigger RoutedEvent="Binding.TargetUpdated">
			<BeginStoryboard>
				<Storyboard x:Key="Pulse" RepeatBehavior="Forever">
					<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[1].(ScaleTransform.ScaleX)" Storyboard.TargetName="Image11img">
						<EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="1.05"/>
						<EasingDoubleKeyFrame KeyTime="0:0:1" Value="1"/>
						<EasingDoubleKeyFrame KeyTime="0:0:1.5" Value="1.05"/>
						<EasingDoubleKeyFrame KeyTime="0:0:2" Value="1"/>
						<EasingDoubleKeyFrame KeyTime="0:0:2.5" Value="1.05"/>
						<EasingDoubleKeyFrame KeyTime="0:0:3" Value="1"/>					
					</DoubleAnimationUsingKeyFrames>
					<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[1].(ScaleTransform.ScaleY)" Storyboard.TargetName="Image11img">
						<EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="1.05"/>
						<EasingDoubleKeyFrame KeyTime="0:0:1" Value="1"/>
						<EasingDoubleKeyFrame KeyTime="0:0:1.5" Value="1.05"/>
						<EasingDoubleKeyFrame KeyTime="0:0:2" Value="1"/>
						<EasingDoubleKeyFrame KeyTime="0:0:2.5" Value="1.05"/>
						<EasingDoubleKeyFrame KeyTime="0:0:3" Value="1"/>						
					</DoubleAnimationUsingKeyFrames>
				</Storyboard>
			</BeginStoryboard>
		</EventTrigger>
	</TextBlock.Triggers>
</TextBlock>