Jump to content
LaunchBox Community Forums
Jason Carr

XAML Tips and Tricks

Recommended Posts

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

  • Like 1

Share this post


Link to post
Share on other sites
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

Share this post


Link to post
Share on other sites
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.

  • Like 1

Share this post


Link to post
Share on other sites
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!

  • Like 1

Share this post


Link to post
Share on other sites
Posted (edited)
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 by Undertherainbow

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites
Posted (edited)

@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 by Undertherainbow

Share this post


Link to post
Share on other sites
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

 

Share this post


Link to post
Share on other sites

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

  • Like 1

Share this post


Link to post
Share on other sites

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" /> 

 

 

Share this post


Link to post
Share on other sites

OK guys, I have a quick question:

In my COLORFUL theme, PlatformView, I use an animated GIF. This one
Colorful_PlatformWheel_IconStart.gif.61da0a1daf184862d7eae4abd8d2a687.gifAnimated 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 by viking

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites
3 hours ago, viking said:

OK guys, I have a quick question:

In my COLORFUL theme, PlatformView, I use an animated GIF. This one
Colorful_PlatformWheel_IconStart.gif.61da0a1daf184862d7eae4abd8d2a687.gifAnimated 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.

Share this post


Link to post
Share on other sites

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.

  • Like 1

Share this post


Link to post
Share on other sites

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 by viking
Update code exemple

Share this post


Link to post
Share on other sites

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>

 

Share this post


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