XAML Tips and Tricks

[eatkinola]

12 minutes ago, faeran said:

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.

True dat. Viewbox and Grid gets you 95% of the way to resolution independence. I created AutoscaleTextBlock for the other 5%.

[viking]

Yes, the whole theme is built on a grid. The whole structure and images: everything works well and adapts to the resolution of the screen.

I'm not a specialist, but my grid is based on Canvas, not on a Viewport. In fact, I kept the structure of the Default Theme. (Maybe I say something stupid!)

My "size" problem is only for the FontSize.
I want to fix the font size in the code, according to a resolution set in "UserControl" (or elsewhere).
And that all "zoom" simply to fit the screen. (720px, 1080px, 4K) No placement change !

Like that :

[faeran]

Does this help?

<Canvas>

     <Grid>

          <Grid>

               <Grid.ColumnDefinitions>

                    <ColumnDefinition width="5*" />

                    <ColumnDefinition width="5*" />

                    <ColumnDefinition width="5*" />

               </Grid.ColumnDefinitions>

               <Viewbox Grid.Column="1">

                    <Textblock Text="texty text" FontSize="500" />

               </Viewbox>

          </Grid>

     </Grid>

</Canvas>

 

[viking]

@faeran This is exactly the principle used in my theme. Like the default theme.

But it doen't work. The grid are perfectly scaled, but not the text.
No matter the resolution of the screen, the text remains at  FontSize="500". (for exemple)

I want to fixe FontSize, according a fix screen resolution. And all that simply zooms together, depending the reel screen resolution.
A simple zoom in/out effect, with all in place. Not a responsive effect which reorganizes the elements according to the available space.

For now, I have this principle (like Default Theme) :

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

<Canvas Name="Canvas">
  <Grid Height="{Binding ElementName=Canvas, Path=ActualHeight}" Width="{Binding ElementName=Canvas, Path=ActualWidth}">
    <Grid.ColumnDefinitions>
		<ColumnDefinition Width="5*" />
		<ColumnDefinition Width="5*" />
		<ColumnDefinition Width="5*" />
    </Grid.ColumnDefinitions>
    
    <TextBlock Text="BIG TEXT" FontSize="67" Grid.Column="1" />
    <TextBlock Text="small text" FontSize="25" Grid.Column="2" />
  </Grid>
</Canvas>

Result:
The grid, spaces, ... everything fits very well to any screen resolution. Good.
Except the text, which remains fixed to the sizes given by FontSize = "xx",   design for a resolution of 1080p.
Result : too big in 720p   /  good in 1080p   /   too small in 4K

An idea of how to do that?

@Jason Carr ?

Edited April 2, 2019 by viking

[faeran]

What happens if you do this with the code? Text will size to the Column width. All you have to do is adjust the ColumnDefinitions to your liking.

 

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

<Canvas Name="Canvas">
  <Grid Height="{Binding ElementName=Canvas, Path=ActualHeight}" Width="{Binding ElementName=Canvas, Path=ActualWidth}">
    <Grid.ColumnDefinitions>
		<ColumnDefinition Width="5*" />
		<ColumnDefinition Width="5*" />
		<ColumnDefinition Width="2*" />
    </Grid.ColumnDefinitions>
    
    <ViewBox Grid.Column="1">
    <TextBlock Text="BIG TEXT" FontSize="100" />
    </ViewBox>
    <ViewBox Grid.Column="2">
    <TextBlock Text="small text" FontSize="100" />
    </ViewBox>
  </Grid>
</Canvas>

 

[viking]

@faeran With your example, the text fits and fill its grid area.
Unfortunately, it doen't keep the proportion fixed in the code. It erases the TextSize = "xx" to fill the space.

And it doesn't seem to work on vertical scroll text.

Edited April 2, 2019 by viking

[faeran]

You are correct. It fills the space of the grid that it's in, adjusting the size of the text to fill inside of it.

It will also stay in the same spot, and be the same size, as long as the aspect ratio stays the same. So 720p, 1080p, 4k, the text will remain the same size, and in the same spot, on all of those. Give it a test.

As soon as the aspect ratio changes, all your grids will re-adjust to different sizes, and therefore affect the size, and placement of the text.

Unfortunately, viewboxes won't work with vertical scrolling text, or any text that has more than 1 line.

[y2guru]

@eatkinola @viking @faeran  @Rincewind I have an alpha version of my editor for you guys to play around with, i would like you to mess around with the Text UI element within the editor and see what you think.

I'll send the alpha .zip file shortly (my router speeds are crap at the moment)

[y2guru]

12 minutes ago, y2guru said:

@eatkinola @viking @faeran  @Rincewind I have an alpha version of my editor for you guys to play around with, i would like you to mess around with the Text UI element within the editor and see what you think.

I'll send the alpha .zip file shortly (my router speeds are crap at the moment)

adding @ea4492 and @neil9000

[eatkinola]

Hey @viking. Try the AutoscaleTextBlock in Ao.Bigbox.Themer:

1. Download latest version of themer plugin: https://forums.launchbox-app.com/files/file/1747-aobigbox-customs/

2. Place the plugin in your theme's Plugins directory.

3. Add this to your xaml file:

<!-- included near the top of the xaml file -->
...
    xmlns:aoc="clr-namespace:Ao.Bigbox.Controls;assembly=Ao.Bigbox.Themer.v3_9_3">
...

<!-- example use -->
<aoc:AutoscaleTextBlock Text="whatever" FontFamily="MyCoolFont" FontWeight="Normal" Foreground="Cyan"
                        TargetFontSize="32" TargetPadding="0,8,0,8" TargetScreenHeight="2160" />

The key properties are the TargetXxx properties -- they let you design to a target screen height, and the actual font size will be scaled automatically based on the actual screen height.

[Retro808]

@y2guru Can you add another? I would love to test it building a 4:3 theme for a new mini cab I built for my kids.

[SNAK3ATER]

3 minutes ago, eatkinola said:

Hey @viking. Try the AutoscaleTextBlock in Ao.Bigbox.Themer:

1. Download latest version of themer plugin: https://forums.launchbox-app.com/files/file/1747-aobigbox-customs/

2. Place the plugin in your theme's Plugins directory.

3. Add this to your xaml file:

<!-- included near the top of the xaml file -->
...
    xmlns:aoc="clr-namespace:Ao.Bigbox.Controls;assembly=Ao.Bigbox.Themer.v3_9_3">
...

<!-- example use -->
<aoc:AutoscaleTextBlock Text="whatever" FontFamily="MyCoolFont" FontWeight="Normal" Foreground="Cyan"
                        TargetFontSize="32" TargetPadding="0,8,0,8" TargetScreenHeight="2160" />

The key properties are the TargetXxx properties -- they let you design to a target screen height, and the actual font size will be scaled automatically based on the actual screen height.

That's really interesting @eatkinola

I'm using your themer in all of my themes and I have never came across this feature before, will give it a spin and let you know how it goes

P.S. What does the "TargetPadding" property do? should we edit the value or leave it as it is?

[eatkinola]

Just now, SNAK3ATER said:

P.S. What does the "TargetPadding" property do? should we edit the value or leave it as it is?

Sometimes you want padding around a TextBlock to space it a certain way, and if so you'd also want that to be automatically scaled.

[y2guru]

7 minutes ago, Retro808 said:

@y2guru Can you add another? I would love to test it building a 4:3 theme for a new mini cab I built for my kids.

check your email

[viking]

14 hours ago, faeran said:

Unfortunately, viewboxes won't work with vertical scrolling text, or any text that has more than 1 line.

@faeran That's all my problem! For this theme, I use multiline text and scroll ...

@eatkinola It seems to be EXACTLY what I need !! I do some test immediately! ?

[y2guru]

3 minutes ago, viking said:

@faeran That's all my problem! For this theme, I use multiline text and scroll ...

@eatkinola It seems to be EXACTLY what I need !! I do some test immediately! ?

Check your email,  you have an alpha version of the theme editor (go to the very last message in the thread to pick up the latest build version), you can do all the scaling stuff using that, including scroll text etc..

[viking]

@y2guru Thx man ! 
I'm trying asap your system. For my current theme, I will finish it by hand. It already completed 99%

@eatkinola Your plugin works perfectly !!!! This TargetFontSize function should be integrated into BigBox out the box ! ?
However, I dont find how to apply this function to a simple vertical scroll text ... An idea???

 

[eatkinola]

8 hours ago, viking said:

@eatkinola Your plugin works perfectly !!!! This TargetFontSize function should be integrated into BigBox out the box ! ?
However, I dont find how to apply this function to a simple vertical scroll text ... An idea???

Great! About the vertical scroll text, you mean controls:ScrollableTextBlock? -- That would require some customization of that control which resides in the Unbroken.LaunchBox.Wpf DLL. Alternatively, a new custom control could possibly be made for Ao.Bigbox.Themer. I wonder if one of those auto-scaling solutions posted in stackoverflow that you mentioned would be helpful; I'll have to take a look.

[faeran]

8 hours ago, viking said:

 

@eatkinola Your plugin works perfectly !!!! This TargetFontSize function should be integrated into BigBox out the box ! ?
However, I dont find how to apply this function to a simple vertical scroll text ... An idea???

 

Pretty sure if I'm reading this correctly, you can find an example of this in both of the platform views in Retrotastic.

[garbanzo]

Can anyone tell me if it's possible to add the front cover of the currently selected game to the details pane, centered within the red box in this mockup?