XAML Tips and Tricks

[viking]

Sorry @Retro808 , I don't have the answer, but another question ...

 

2 questions in fact !

#01 
I have a problem with the HorizontalWheelCoverFactory, with Device image.
All visuals are blurry and highly compressed !! 
I test with 550x550px PNG for 250Ko.
I dont understand why !? I dont have fancy adjustment or visual : 

ImageType="Device" 
CurveAmount="0" 
CameraZPosition="2.65" 
VisibleCount="8" 
PageSize="8" 
ItemZPosition="1.0" 
SelectedItemZPosition="1.5" 
Spacing="1.0"

@Jason Carr or @Grila any idea ?

 

#02
With the new (and awesome) theme manager in BB, how to manage custom fonts ?
The best way would be the built-in code, that the user doesn't have to install them by hand.
Possible? An example of code?

Thx !!!!

[Retro808]

@viking No worries. I cannot figure out my issue so theme is in limbo for now. 

1 hour ago, viking said:

 

@Jason Carr or @Grila any idea ?

 

#02
With the new (and awesome) theme manager in BB, how to manage custom fonts ?
The best way would be the built-in code, that the user doesn't have to install them by hand.
Possible? An example of code?

Thx !!!!

Not sure if this might help your #2 but I did see @eatkinola posted a tip on how to do something for font resource so users do not have to install. It is back on page 10 in this thread. Linked below. 

Font Resource Library

[jayjay]

Could I get an explanation and maybe a quick example of how this works please? I know what Action<string> is, im wondering if I can use an OSK  in my user control, Iv tried but cant get it to display on screen?

public void ShowOnScreenKeyboard(string text, Action<string> onFinished)
{
              
}

Im half way through a user control that requires keyboard input, when I realised keyboard input is disabled lol duh. 

[Jason Carr]

On 3/4/2019 at 8:38 AM, Retro808 said:

Non-skilled coder here needing some help. I have made a Startup theme that will play fullscreen video. Using MediaElement which I see from the thread is probably not the best, but figure since it is fullscreen only I should be ok. I can get the theme to work as intended to play the platform specific video by pulling the active game's platform. The problem is I cannot get a fallback to play a default video in cases where the user may not have a platform video. The code I am using I see used in BigBox themes, but I only get a black screen when the platform video is not present. Any advice?

    <!-- Video -->	
			<TextBlock x:Name="VideoFileName" Visibility="Collapsed">
				<TextBlock.Text>
					<MultiBinding StringFormat="{}pack://siteoforigin:,,,/StartupThemes/Video Full/Videos/{0}.mp4">
						<Binding Path="NonPlaylistNonCategoryPlatformTitle" />
					</MultiBinding>
				</TextBlock.Text>
			</TextBlock>
			<MediaElement Grid.RowSpan="5" Grid.ColumnSpan="5" Source="{Binding Text, ElementName=VideoFileName, FallbackValue='pack://siteoforigin:,,,/StartupThemes/Video Full/Videos/Startup.mp4'}" />		

 

Sorry for the delay on this @Retro808, but I have a full solution for everything here finally:

 

[Jason Carr]

I just created a new forum section for "Custom Theme Tutorials" with the above tutorial in it. If anyone wants to, feel free to create some tutorials there.

[Jason Carr]

On 3/5/2019 at 3:35 AM, viking said:

Sorry @Retro808 , I don't have the answer, but another question ...

 

2 questions in fact !

#01 
I have a problem with the HorizontalWheelCoverFactory, with Device image.
All visuals are blurry and highly compressed !! 
I test with 550x550px PNG for 250Ko.
I dont understand why !? I dont have fancy adjustment or visual : 

ImageType="Device" 
CurveAmount="0" 
CameraZPosition="2.65" 
VisibleCount="8" 
PageSize="8" 
ItemZPosition="1.0" 
SelectedItemZPosition="1.5" 
Spacing="1.0"

@Jason Carr or @Grila any idea ?

 

#02
With the new (and awesome) theme manager in BB, how to manage custom fonts ?
The best way would be the built-in code, that the user doesn't have to install them by hand.
Possible? An example of code?

Thx !!!!

The images in wheels are cached and compressed based on the user's CoverFlow image quality setting in Big Box, so you probably just need to increase that.

There's already a decent solution for custom fonts available (see @Retro808's link above), but I'm going to work on a simpler solution that works for startup themes as well.

[Jason Carr]

On 3/14/2019 at 12:08 PM, jayjay said:

Could I get an explanation and maybe a quick example of how this works please? I know what Action<string> is, im wondering if I can use an OSK  in my user control, Iv tried but cant get it to display on screen?

public void ShowOnScreenKeyboard(string text, Action<string> onFinished)
{
              
}

Im half way through a user control that requires keyboard input, when I realised keyboard input is disabled lol duh. 

Here's an example of using the on-screen keyboard:

ShowOnScreenKeyboard("default text", resultingText => MessageBox.Show(resultingText));

That should show the on-screen keyboard, and then show a message box with what the user types. I've used an inline code format above, but you can also create a method with a string parameter, and then put the method name in for the second parameter instead if you wish.

[jayjay]

21 hours ago, Jason Carr said:

 

Thank you. I have it working. 

Could I make a request about the on screen keyboard for you to add to your never ending list please.

 

Could we (me) get...

When right or left arrow is held could the cursor move more than 1 character per key press.

or if easier...

When pressing the right arrow, when you reach the last character in the text the cursor will loop back to the beginning of the text. The left arrow doesn't have the same behavior. It will stop at the beginning of the text and not loop to the end of the text.

Would help with long strings.

 

Also another issue I  have... i'll try explain the best I can, maybe its something im not doing right.

When activating the on screen keyboard, my user control listview loses focus and the on screen keyboard takes the focus.

I have to use "mylistview.focus() etc etc" within the onFinished method to regain focus back to the listview. Which works fine.

 

The issue I have is with using a physical keyboard when the on screen keyboard is displayed...

 

I press back space on the physical keyboard to delete all text.

I press back space again which will close the on screen keyboard.

I then cant regain focus back to the listview.

 

Obviously you wont be finding these requests at the top of any community poll. And im not in any rush at all. Maybe you could add these requests to your not so important list of a million things to do. Please.

[Jason Carr]

@jayjay I'll add those OSK requests to my list. Focus is a funny thing in Big Box; generally I don't rely on focus at all, because all inputs happen globally to the app and Big Box just knows where to send them. My recommendation would be to use the OnEnter, OnEscape, OnUp, OnDown, OnLeft, OnRight, OnPageDown, and OnPageUp methods of the IBigBoxThemeElementPlugin interface to detect when inputs occur, and then use that info to change the selection without forcing focus on the control.

[deliyuerek85]

I have a question. I hope this is the right thread for it.

How can I add a transition to a custom image? This is the code what I have so far:

<TextBlock x:Name="PlatformIcon1" Visibility="Collapsed">
	<TextBlock.Text>
		<MultiBinding StringFormat="{}pack://siteoforigin:,,,/Themes/Deliyuerek/Images/Icons/Platforms/{0}.png">
			<Binding Path="ActivePlatform.Name" />
		</MultiBinding>
	</TextBlock.Text>
</TextBlock>

<Image DockPanel.Dock="Right" Source="{Binding Text, ElementName=PlatformIcon1}" Margin="0,-13,5,0" RenderOptions.BitmapScalingMode="HighQuality" />

I want the image to fade but I don't know how to assign the transition. I hope someone can help.

 

[Jason Carr]

7 minutes ago, deliyuerek85 said:

I have a question. I hope this is the right thread for it.

How can I add a transition to a custom image? This is the code what I have so far:

<TextBlock x:Name="PlatformIcon1" Visibility="Collapsed">
	<TextBlock.Text>
		<MultiBinding StringFormat="{}pack://siteoforigin:,,,/Themes/Deliyuerek/Images/Icons/Platforms/{0}.png">
			<Binding Path="ActivePlatform.Name" />
		</MultiBinding>
	</TextBlock.Text>
</TextBlock>

<Image DockPanel.Dock="Right" Source="{Binding Text, ElementName=PlatformIcon1}" Margin="0,-13,5,0" RenderOptions.BitmapScalingMode="HighQuality" />

I want the image to fade but I don't know how to assign the transition. I hope someone can help.

 

Unfortunately you can't use the built-in transitions system, but you can add your own animations/transitions. There are some good examples in the Unified and Unified Redux themes. You can take a look at the animations that move the boxes and CDs in the wheel views.

[deliyuerek85]

5 minutes ago, Jason Carr said:

Unfortunately you can't use the built-in transitions system, but you can add your own animations/transitions. There are some good examples in the Unified and Unified Redux themes. You can take a look at the animations that move the boxes and CDs in the wheel views.

Hmm ok.

Animations are a bit complicated for me. But I will have a look. Thanks.

[garbanzo]

How can I change what text is displayed on the Subline beneath boxes in LaunchBox?

In the BoxesContentView.xaml I found these lines - the Text="{Binding Description}" bit seems to correspond with Subline.

BoxesContentView.xaml

<controls:OutlinedTextBlock Visibility="{Binding SublineOutlineVisibility}" Opacity="{Binding TextOutlineOpacity}" Text="{Binding Description}" FontSize="12" TextWrapping="Wrap" Margin="0,5,0,3" Stroke="Black" StrokeThickness="{Binding SubTextOutlineThickness}" Grid.Row="2" TextAlignment="{Binding TextAlignment}" />
<TextBlock Visibility="{Binding SublineVisibility}" Text="{Binding Description}" Foreground="{Binding FadedForegroundBrush}" FontSize="12" TextWrapping="Wrap" Margin="0,5,0,3" Grid.Row="2" TextAlignment="{Binding TextAlignment}" />

I tried changing it to Text="{Binding PlatformReleaseDate}" but instead of displaying what I want it to display, it just blanked out the line.

I'm very new to this, and I'm just trying to button-mash my way through. Thanks for the help!

[Gill Figno]

I'm new to XAML and have no idea how to find or change a few things. I edited my start up screen how I wanted it, but my big box mode has a few issues that I can't figure out how to change. First, I wanted to put a box behind the game details screen, like the default game details screen, I've highlighted what I want in the first screen. The second issue I'm having is I have no idea how change the selection outline color and edit the release date to display only the release year. I've shown that on the second screenshot. I'm just using the default theme. Any help would be appreciated, thanks!

[bbweiners]

Hi,

I'm trying to create a theme where I have some auto sizing for the width of several things. The problem is I can't figure out how to use auto size and be able to have my column start at specific spot no matter the resolution it's being displayed on (scaling). All I can figure out is how to have it start at an absolute spot, so it won't scale properly. Does anyone know how I can get around this?

 

 

        <!-- RELEASE DATE/PLAYMODE/GENRE/RATING GRID -->
        <Grid Height="{Binding ElementName=Canvas, Path=ActualHeight}" Width="{Binding ElementName=Canvas, Path=ActualWidth}">
        
        <Grid.ColumnDefinitions>
        <ColumnDefinition Width="310" />
        <ColumnDefinition Width="auto" />
        <ColumnDefinition Width="30" />
        <ColumnDefinition Width="auto" />
        <ColumnDefinition Width="30" />        
        <ColumnDefinition Width="auto" />
        <ColumnDefinition Width="30" />
        <ColumnDefinition Width="auto" />
        <ColumnDefinition Width="30" />
        <ColumnDefinition Width="auto" />        
        </Grid.ColumnDefinitions>

        <Grid.RowDefinitions>
        <RowDefinition Height="1025*" />
        <RowDefinition Height="20*" />
        <RowDefinition Height="35*" />
        </Grid.RowDefinitions>

[viking]

To @Jason Carr @Grila and all the other code specialist !

OK, I have a question about font size management.
I would like the font sizes be fixed in the code, to fit the screen resolution. My next theme is designed for TV screens. And I would like the display to be correct from 720p to 4K.
It does not work out-the-box.

I searched everywhere on the internet and found nothing. Except this example.
https://stackoverflow.com/questions/3193339/tips-on-developing-resolution-independent-application
(first response)

But I do not know if it can work in BigBox. And if so, how to integrate? 
Plugin ? If so, how to create it?

Please HELP !!!  ?

[eatkinola]

3 hours ago, viking said:

OK, I have a question about font size management.
I would like the font sizes be fixed in the code, to fit the screen resolution. My next theme is designed for TV screens. And I would like the display to be correct from 720p to 4K.
It does not work out-the-box.

When I ran into this issue, I created two controls called AutoscaleTextBlock and AutoscaleListBox (for text lists). On these controls, I can set a TargetFontSize and TargetScreenHeight and design to these parameters. It will then scale the font size according to actual screen height. The solutions you reference on stackoverflow look very interesting and more generalizable than my approach. I don't have time to try out those solutions now, but I do have something that works if those ideas aren't effective.

[viking]

@eatkinola Yes, I am very interested in any solution for this trick!

The problem is that I do not know how to integrate all that into the code.
I do not even know how to create a BigBox plugin ...

If you want to share your solution (or another solid solution) and quickly documented the integration, it will be great! ?

[eatkinola]

1 minute ago, viking said:

If you want to share your solution (or another solid solution) and quickly documented the integration, it will be great! ?

Certainly, I'd be happy to share it. I recommend let's give others time to chime in as they might propose a better solution before embarking on using my solution. I'm at work now anyways and cannot post the library and code examples from here.

[faeran]

5 hours ago, viking said:

To @Jason Carr @Grila and all the other code specialist !

OK, I have a question about font size management.
I would like the font sizes be fixed in the code, to fit the screen resolution. My next theme is designed for TV screens. And I would like the display to be correct from 720p to 4K.
It does not work out-the-box.

I searched everywhere on the internet and found nothing. Except this example.
https://stackoverflow.com/questions/3193339/tips-on-developing-resolution-independent-application
(first response)

But I do not know if it can work in BigBox. And if so, how to integrate? 
Plugin ? If so, how to create it?

Please HELP !!!  ?

The only strictly XAML way that I found was to wrap textblocks up in a viewbox. Not great for every situation, but it works for most.