XAML Tips and Tricks

PanteraZombie · May 14, 2021

Has there been a recent change in the platform logo image identifier in xaml? It's been a little while now that I've noticed my platform logos no longer showing in the top left corner of my startup theme. I customized the GridBlocked startup theme if that matters...

Edit: So I've noticed that the platform logo DOES appear on the startup screen while in BigBox.... but it doesn't show while in LaunchBox. Any idea how or why that might be happening? It's not a huge deal... at least it's working in BigBox, but I can't figure out why that would be... for some reason I'm thinking I could be missing something simple. I tested a few different platforms while in BigBox, and tried those same platforms while in LaunchBox... it's strange.

Edited May 18, 2021 by PanteraZombie

Jason Carr · May 19, 2021

On 5/13/2021 at 11:42 PM, PanteraZombie said:

Has there been a recent change in the platform logo image identifier in xaml? It's been a little while now that I've noticed my platform logos no longer showing in the top left corner of my startup theme. I customized the GridBlocked startup theme if that matters...

Edit: So I've noticed that the platform logo DOES appear on the startup screen while in BigBox.... but it doesn't show while in LaunchBox. Any idea how or why that might be happening? It's not a huge deal... at least it's working in BigBox, but I can't figure out why that would be... for some reason I'm thinking I could be missing something simple. I tested a few different platforms while in BigBox, and tried those same platforms while in LaunchBox... it's strange.

I think this is a known issue, probably due to how we use and process images in LaunchBox vs. Big Box. I'm sure it can be fixed, but it hasn't been a priority as of yet. If you can report a bug for it though on BitBucket, I'd appreciate it.

PanteraZombie · May 19, 2021

26 minutes ago, Jason Carr said:

I think this is a known issue, probably due to how we use and process images in LaunchBox vs. Big Box. I'm sure it can be fixed, but it hasn't been a priority as of yet. If you can report a bug for it though on BitBucket, I'd appreciate it.

Thanks for the reply Jason, will do!

superrob3000 · July 5, 2021

Is IBigBoxThemeElementPlugin supported in a marquee view? I made a dll that implements IBigBoxThemeElementPlugin and works fine when using it in a games wheel view. However, when used in a games marquee view, OnSelectionChanged() never gets called. Is that not possible?

faeran · July 6, 2021

18 hours ago, superrob3000 said:

Is IBigBoxThemeElementPlugin supported in a marquee view? I made a dll that implements IBigBoxThemeElementPlugin and works fine when using it in a games wheel view. However, when used in a games marquee view, OnSelectionChanged() never gets called. Is that not possible?

I don't believe that there's plugin support in the marquee view at this time. I do know that the marquee view is more limited than others.

Moleburt · July 19, 2021

I was wondering if anyone could help me. I would like to combine the curved wheel with pointer from the Unified theme, with the background (with addons) of the Unified Refried theme, my attempts to combine them have resulted in errors. Not really sure where to start with it, seems like it would likely be pretty simple to someone who knows what they’re looking at

faeran · July 19, 2021

16 hours ago, Moleburt said:

I was wondering if anyone could help me. I would like to combine the curved wheel with pointer from the Unified theme, with the background (with addons) of the Unified Refried theme, my attempts to combine them have resulted in errors. Not really sure where to start with it, seems like it would likely be pretty simple to someone who knows what they’re looking at

Hi @Moleburt. While it seems like this should be easy, the complication really comes with the addons of the Unified Refried theme. The way it works, you would have to potentially edit hundreds of files in order to successfully change over the wheel from all the custom views that are in the theme. However, if we ignore that for now and we just concentrate on 1 games view, that will give you an idea of how to do this.

I'm going to assume you have both themes installed, which will make things a bit easier. Here's an example of how you would migrate the Unified wheel and pointer to the WheelGamesView.xaml file.

Go into the Unified Games View xaml file

Open: \LaunchBox\Themes\Unified\Views\WheelGamesView.xaml

Grab the following code snippets

The Wheel Code

		<!-- WHEEL -->
			<coverFlow:FlowControl x:Name="FlowControl" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Grid.Column="4" Grid.ColumnSpan="3" Grid.Row="0" Grid.RowSpan="8" CoverFactory="{Binding CoverFactory}" ImageType="Clear Logos"
				CurveAmount="-3.5" CameraZPosition="2.8" VisibleCount="16" PageSize="6" Spacing="0.95" ItemZPosition="0.5" SelectedItemZPosition="1.4" Panel.ZIndex="2"  RotationAmount="12">
                <coverFlow:FlowControl.Opacity>100</coverFlow:FlowControl.Opacity>
				<coverFlow:FlowControl.Effect>
					<DropShadowEffect BlurRadius="10" Direction="-90" RenderingBias="Quality" ShadowDepth="1" />
				</coverFlow:FlowControl.Effect>
            </coverFlow:FlowControl>

The Pointer Code

					<!-- POINTER -->
			<TextBlock x:Name="PointerFileName" Visibility="Collapsed">
				<TextBlock.Text>
					<MultiBinding StringFormat="{}pack://siteoforigin:,,,/Themes/Unified/Images/Theme/Pointer/{0}.png">
						<Binding Path="KnownPlatformOrPlaylistTitle" />
					</MultiBinding>
				</TextBlock.Text>
			</TextBlock>
			<Viewbox Grid.Column="4" Grid.ColumnSpan="3" Grid.Row="2" Grid.RowSpan="2" Panel.ZIndex="1" HorizontalAlignment="Right" VerticalAlignment="Center" >
				<Image x:Name="Pointer" Source="{Binding Text, ElementName=PointerFileName, FallbackValue='pack://siteoforigin:,,,/Themes/Unified/Images/Theme/Pointer/_Default.png'}" Opacity="100" RenderTransformOrigin="1,0.5" RenderOptions.BitmapScalingMode="HighQuality" >
					<Image.RenderTransform>
						<ScaleTransform x:Name="PointerSize" ScaleX="1" ScaleY="1" />
					</Image.RenderTransform>
				</Image>
			</Viewbox>

The Pointer Animation Code

          <!-- POINTER -->
          <DoubleAnimationUsingKeyFrames Storyboard.TargetName="PointerSize" Storyboard.TargetProperty="(ScaleTransform.ScaleX)" >
            <EasingDoubleKeyFrame KeyTime="0:0:0.0" Value="1"/>
            <EasingDoubleKeyFrame KeyTime="0:0:0.15" Value="1"/>
            <EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="0.75"/>
          </DoubleAnimationUsingKeyFrames>
          <DoubleAnimationUsingKeyFrames Storyboard.TargetName="PointerSize" Storyboard.TargetProperty="(ScaleTransform.ScaleY)" >
            <EasingDoubleKeyFrame KeyTime="0:0:0.0" Value="1"/>
            <EasingDoubleKeyFrame KeyTime="0:0:0.15" Value="1"/>
            <EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="0.75"/>
          </DoubleAnimationUsingKeyFrames>
          <DoubleAnimationUsingKeyFrames Storyboard.TargetName="Pointer" Storyboard.TargetProperty="(Image.Opacity)" >
            <EasingDoubleKeyFrame KeyTime="0:0:0.0" Value="1"/>
            <EasingDoubleKeyFrame KeyTime="0:0:0.8" Value="1"/>
            <EasingDoubleKeyFrame KeyTime="0:0:1.6" Value="0.15"/>
          </DoubleAnimationUsingKeyFrames>

Now go into the Unified Refresh Games View xaml file

Open: \LaunchBox\Themes\Unified Refried\Views\WheelGamesView.xaml

Find the Wheel code and replace it with the Unified one
Paste the pointer code just underneath the Wheel code
Find the following code <Storyboard x:Key="ChangeGame"> (appears closer to the top) and paste the pointer animation code underneath it

Save the file and load up Unified Refried to see the results. Just note, to see the results you'll have to temporarily rename or delete the following folder, as it will get in the way of you seeing the actual games view (it tries to load the view files inside of there): \LaunchBox\Themes\UnifiedRefresh\Views\WheelGamesView

Now you just need to do this for all the Game views you want to migrate the wheel over for, including any the platform specific views that are inside any of the following folders that you would want to use:

\LaunchBox\Themes\Unified Refried\Views\TextGamesView
\LaunchBox\Themes\Unified Refried\Views\Wheel2GamesView
\LaunchBox\Themes\Unified Refried\Views\Wheel3GamesView
\LaunchBox\Themes\Unified Refried\Views\Wheel4GamesView
\LaunchBox\Themes\Unified Refried\Views\WheelGamesView

You'll do something similar for platform views, just remember to grab the same kind of code from PlatformWheel1FiltersView.xaml and transfer it over to the Unified Refried version of the file.

Moleburt · July 19, 2021

@faeran Thanks! I will try all this out. I was able to get the wheel curved messing with the refried theme xml, but it didn’t look right. I was at least on the right track. I will post what my result looks like if it turns out!

Moleburt · July 20, 2021

So I got what I want like 95%, what I can’t for the life of me figure out is how to get the game logos to move slightly to the left next to the pointer, so that the largest logos touch just the tip of the pointer instead of over lapping. I’ve tried messing with the grid column and grid row, as well as the camera position. But I either end up with way to big, or way to small logos. I’ll attach a picture of what I’ve got, if I could just get the logos over slightly it would be perfect for what I want.

faeran · July 21, 2021

On 7/20/2021 at 12:57 AM, Moleburt said:

So I got what I want like 95%, what I can’t for the life of me figure out is how to get the game logos to move slightly to the left next to the pointer, so that the largest logos touch just the tip of the pointer instead of over lapping. I’ve tried messing with the grid column and grid row, as well as the camera position. But I either end up with way to big, or way to small logos. I’ll attach a picture of what I’ve got, if I could just get the logos over slightly it would be perfect for what I want.

You are on the right track. The wheel is placed in a grid and the grid determines its placement. If I remember correctly, the grid is created in a way that may make it hard to adjust without affecting other objects on the screen.

You could try to add margins to the wheel and see if you can nudge it over to the place that you want.

You would need to add this property to the wheel (if not already there):

Margin="-15,0,15,0"

The first number would adjust the left side, and the third number would adjust the right side. Play with the numbers until you have it in a place you like.

Moleburt · July 27, 2021

@faeran Thanks for all the help. I got it all sorted. Was actually pretty simple once you pointed me in the right direction with your first response. I added the Wheel and Pointer sections from the Unified theme XAML, but I also replaced the grid info in the Refried theme with the Unified grid info. Then it was just a matter of adjusting a couple little things so that the upper and lower “glass” extended to the end of the screen (I think I had to change the row or column setting from 7 to 8 or something like that). End result is exactly what I wanted, I’ll attach a couple images. Perfect blend of the 2 themes.

Hazuki · August 22, 2021

Hi all,

Yesterday I tried some xaml for the first time. I started working on a StartupTheme.
All was going fine so today I restarted from scratch and decided to up the resolution to 4K, I'm on a 1080 screen but why not make it in a higher resolution, if anyone ells wants to use it.

Anyway I set the res:

mc:Ignorable="d" d:DesignWidth="3840" d:DesignHeight="2160" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"

And I have 3 rows and 3 column.
Now if I set them like this that don't scale to my resolution and I can only see the top left corner of the theme.

<Grid.RowDefinitions>
   <RowDefinition Height="371" />
   <RowDefinition Height="1418" />
   <RowDefinition Height="371" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
   <ColumnDefinition Width="920" />
   <ColumnDefinition Width="2000" />
   <ColumnDefinition Width="920" />
</Grid.ColumnDefinitions>

If I add a * to the values it scales fine but the images don't.

I've got an image with MaxWidth="2000" MaxHeight="1418" that goes in Grid.Column="1" Grid.Row="1"
and then I want to add the fanart above that image:

<Image Source="{Binding BackgroundImagePath}" RenderOptions.BitmapScalingMode="HighQuality" Stretch="Uniform" Margin="0,50,0,0" HorizontalAlignment="Center" VerticalAlignment="Top" MaxWidth="1900" MaxHeight="1069" Grid.Column="1" Grid.Row="1" Canvas.ZIndex="1"></Image>

The MaxWidth, MaxHeight and Margin now seam to be base off of my screen resolution of 1080 and not the 4K I was planing for. If I half the values of MaxWidth, MaxHeight and Margin, The fanart will be where I want it. But if I then remove the * from the Columns and Row, and try it the fanart is way to small.

So what I want to know if there is a way to make the MaxWidth, MaxHeight and Margin be in relation to the d:DesignWidth and d:DesignHeight??

Sorry for the long question and thanks for any help

Fry · August 22, 2021

@Hazuki I think you want to use relative sizing of your grid rows and columns using * as you mentioned otherwise you're specifying absolute sizes and it will stretch off the screen like you said. I'm not 100% sure but can you try with VerticalAlignment set to stretch and remove the MaxWidth and MaxHeight properties? That should scale the height of your image to fill the vertical space as much as possible and then scale the width as much as possible while still keeping the original aspect ratio in tact.

If you use * on those row/column sizes and then run at 1080, then column 1, row 1 would be

at 4K: 2000x1418

at 1080: 1000x709

Then minus the 50 pixels off the top for your margin, your image would fill the height of 659 pixels and would scale the width accordingly.

FYI - the designHeight and designWidth won't matter in the final result, that's just for how the preview is displayed in visual studio.

Edited August 22, 2021 by Fry

Hazuki · August 23, 2021

Thank you Fry. So really its better if I just use values that match my resolution and have all images downscale from 4k. That actually makes it easier.

designHeight and designWidth, yee I should have figured that out, its in the name. ?

Anyway Thanks you so much

Edited August 23, 2021 by Hazuki

gvl · September 15, 2021

Hi eveyone!

I'm working on a Bigbox Theme and I'm so lost with this issue..... I would like to show a image depending if "ActiveGame.FrontImagePath" is portrait or landscape, i asume that i need to make a dll with a namespace and a Class to do that. I mean that i need read "ActiveGame.FrontImagePath" from Image Source property, compare Bitmap.Width agains Bitmap.Height .... something like this code:

        public static string ImgOrientation(Bitmap imagefront)
        {
            string Orientationimg;
            
          if (imagefront.Width = 0)
                Orientationimg = ("Portrait");
                return Orientationimg;

          else
            if (imagefront.Width >= imagefront.Height)
                Orientationimg = ("Landscape");
            else Orientationimg = ("Portrait");
            
            return Orientacionimg;
        }

.... and then in XAML, show a image called portrait.png if return is Portrait or landscape.png if return is Lanscape.

This is my idea, but I'm not sure if it is the right way or not.

Any help will be apreciated ....a working dll would be the best 😆😅

Thanks in advance.

Edited September 15, 2021 by gvl

y2guru · September 15, 2021

1 hour ago, gvl said:
Hi eveyone!

I'm working on a Bigbox Theme and I'm so lost with this issue..... I would like to show a image depending if "ActiveGame.FrontImagePath" is portrait or landscape, i asume that i need to make a dll with a namespace and a Class to do that. I mean that i need read "ActiveGame.FrontImagePath" from Image Source property, compare Bitmap.Width agains Bitmap.Height .... something like this code:
        public static string ImgOrientation(Bitmap imagefront)
        {
            string Orientationimg;
            
          if (imagefront.Width = 0)
                Orientationimg = ("Portrait");
                return Orientationimg;

          else
            if (imagefront.Width >= imagefront.Height)
                Orientationimg = ("Landscape");
            else Orientationimg = ("Portrait");
            
            return Orientacionimg;
        }
.... and then in XAML, show a image called portrait.png if return is Portrait or landscape.png if return is Lanscape.

This is my idea, but I'm not sure if it is the right way or not.

Any help will be apreciated ....a working dll would be the best 😆😅

Thanks in advance.

On the right track yes, your example code would be inside a converter so that you would leverage it within your view, the result would dictate what you do, in this case display orientation.png (converter result.png)

Edited September 15, 2021 by y2guru

bbweiners · November 8, 2021

Hi guys,

I've posted an image of a theme issue I'm currently having.

There appears to be a black border on the right and left side of my images using the new FlowControl. It also doesn't appear to be correctly putting a border around the currently selected image.

I've made several themes using the same settings in WallViews and have not had this issue. It only affects the Platform/Filters views. Any idea's? I've attached the code as well.

<coverFlow:FlowControl x:Name="FlowControl" Grid.Column="1" Grid.ColumnSpan="3" Grid.Row="3" Grid.RowSpan="1" NavigationRows="0"
       Rows="1" ItemSpacing="-0.175,0" Endless="True" SelectedScale="1,1">
<coverFlow:FlowControl.Camera>
<OrthographicCamera Position="0,0,5" LookDirection="0,0,-1" NearPlaneDistance=".1" FarPlaneDistance="1000" Width="9.5"/>
</coverFlow:FlowControl.Camera>
<coverFlow:FlowControl.FlowTemplate>
<DataTemplate>
<coverFlow:FlowContext>
<Border BorderThickness="5">
<Border.Style>
<Style TargetType="Border">
<Setter Property="BorderBrush" Value="Transparent"/>
<Setter Property="Opacity" Value="1"/>
<Style.Triggers>
<DataTrigger Binding="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type coverFlow:FlowContext}}, Path=IsItemSelected}" Value="True">
<Setter Property="BorderBrush" Value="#ffffff"/>
</DataTrigger>
<DataTrigger Binding="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type coverFlow:FlowContext}}, Path=IsRowSelected}" Value="True">
<Setter Property="Opacity" Value="1"/>
</DataTrigger>
</Style.Triggers>
</Style>
</Border.Style>
<coverFlow:FlowImage ImageType="Banner"/>
</Border>
</coverFlow:FlowContext>
</DataTemplate>
</coverFlow:FlowControl.FlowTemplate>
       <coverFlow:FlowControl.Effect>
       <DropShadowEffect Color="#000000" ShadowDepth="0" BlurRadius="8" Opacity="1" RenderingBias="Performance"/>
       </coverFlow:FlowControl.Effect>
</coverFlow:FlowControl>

faeran · November 10, 2021

On 11/8/2021 at 4:01 PM, bbweiners said:

Hi guys,

I've posted an image of a theme issue I'm currently having.

There appears to be a black border on the right and left side of my images using the new FlowControl. It also doesn't appear to be correctly putting a border around the currently selected image.

I've made several themes using the same settings in WallViews and have not had this issue. It only affects the Platform/Filters views. Any idea's? I've attached the code as well.

<coverFlow:FlowControl x:Name="FlowControl" Grid.Column="1" Grid.ColumnSpan="3" Grid.Row="3" Grid.RowSpan="1" NavigationRows="0"
       Rows="1" ItemSpacing="-0.175,0" Endless="True" SelectedScale="1,1">
<coverFlow:FlowControl.Camera>
<OrthographicCamera Position="0,0,5" LookDirection="0,0,-1" NearPlaneDistance=".1" FarPlaneDistance="1000" Width="9.5"/>
</coverFlow:FlowControl.Camera>
<coverFlow:FlowControl.FlowTemplate>
<DataTemplate>
<coverFlow:FlowContext>
<Border BorderThickness="5">
<Border.Style>
<Style TargetType="Border">
<Setter Property="BorderBrush" Value="Transparent"/>
<Setter Property="Opacity" Value="1"/>
<Style.Triggers>
<DataTrigger Binding="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type coverFlow:FlowContext}}, Path=IsItemSelected}" Value="True">
<Setter Property="BorderBrush" Value="#ffffff"/>
</DataTrigger>
<DataTrigger Binding="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type coverFlow:FlowContext}}, Path=IsRowSelected}" Value="True">
<Setter Property="Opacity" Value="1"/>
</DataTrigger>
</Style.Triggers>
</Style>
</Border.Style>
<coverFlow:FlowImage ImageType="Banner"/>
</Border>
</coverFlow:FlowContext>
</DataTemplate>
</coverFlow:FlowControl.FlowTemplate>
       <coverFlow:FlowControl.Effect>
       <DropShadowEffect Color="#000000" ShadowDepth="0" BlurRadius="8" Opacity="1" RenderingBias="Performance"/>
       </coverFlow:FlowControl.Effect>
</coverFlow:FlowControl>

Hi @bbweiners. Thanks for posting this, as it uncovered a caching issue which will be fixed in the next beta, which will solve the issue with the black bars.

However, you may want to add SelectOffsetProperty to your wheel so that the selected item will always appear on top.

<coverFlow:FlowControl x:Name="FlowControl" Grid.Column="1" Grid.ColumnSpan="3" Grid.Row="3" Grid.RowSpan="1" NavigationRows="0"
        Rows="1" ItemSpacing="-0.175,0" Endless="True" SelectedScale="1,1" SelectedOffsetProperty="0,0,1">

bbweiners · November 11, 2021

3 hours ago, faeran said:
Hi @bbweiners. Thanks for posting this, as it uncovered a caching issue which will be fixed in the next beta, which will solve the issue with the black bars.

However, you may want to add SelectOffsetProperty to your wheel so that the selected item will always appear on top.
<coverFlow:FlowControl x:Name="FlowControl" Grid.Column="1" Grid.ColumnSpan="3" Grid.Row="3" Grid.RowSpan="1" NavigationRows="0"
        Rows="1" ItemSpacing="-0.175,0" Endless="True" SelectedScale="1,1" SelectedOffsetProperty="0,0,1">

Thanks @faeran! I've found a couple more bugs with the new FlowControl.

1. In PlatformView you are not able to navigate up and down, only left and right.

2. In WallGamesView the endless looping doesn't work properly, it has significant drawing/animation errors.

Thanks!

Edited November 11, 2021 by bbweiners

ksherfinski · November 17, 2021

On 7/9/2016 at 6:41 PM, Jason Carr said:

Hi all, I've been waiting to focus on this until after we get the official version out. Ultimately the issue you guys are running into I think is that the editor(s) aren't able to reference the classes inside of LaunchBox.exe and BigBox.exe. UserControlStyle, for instance is part of BigBox.exe. So if we can manage to figure out how to get the editor to pull resources from LaunchBox.exe and BigBox.exe, then that should fix those issues. It may be as easy as copying those files into the same folder as the XAML files, but it probably depends on the editor. Shortly after the release on Monday I'll be looking into the best visual editor to use as well as hopefully doing a tutorial. I didn't want to do that stuff without making sure everything was nailed down first in an official release.

Hey Jason,

I know this is a super old thread, but did you ever figure out a way to make those classes available for reference in VS or a WSIWYG xaml editor?

XAML Tips and Tricks

Recommended Posts

Link to comment

Share on other sites

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Popular Posts

imdavid555

Supreme

elborra

Posted Images

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation