TheSHEEEP
Topic Author
Posts: 37
Joined: 13 Sep 2012, 10:52

[SOLVED] Relative sizes outside of grid?

16 Aug 2013, 11:20

Hey,

I know that you can define relative sizes for the content of grids.
However, that really only scales the containers, not their content.
So, if I had a TextBlock with FontSize="14" it would be okay for a resolution of 1280x800 or so, but when the user resizes the application to 1960*something, it would be unreadably small.
And vice versa, if the user resizes the application to a smaller resolution, the text in the TextBox will be cut off, as it is too big.
Having to create several xamls for different resolution would be kinda weird, given that scalability without quality loss is the biggest strength of vector based graphics :)

So we need a solution to specify all sizes in a relative manner.
Actually, if all size-related attributes could feature the "x*" notation, that would be best.
Last edited by TheSHEEEP on 16 Aug 2013, 14:18, edited 1 time in total.
 
User avatar
ai_enabled
Posts: 221
Joined: 18 Jul 2013, 05:28
Contact:

Re: Relative sizes outside of grid?

16 Aug 2013, 11:35

Hi. You can place the Grid inside of the Viewbox control and set Stretch="Uniform". The Viewbox will scale its child proportionally to the available size. But it will save the aspect ratio of Grid, so it maybe not look so good on monitor with different aspect ration. But you can use another solution - anchor controls to the screen corners, to do this you can create many Viewbox'es (per corner) inside one Grid (root). Do not forgot to set horizontal/vertical alignment of each Viewbox to stretch mode.
AtomicTorch Studio Pte. Ltd. http://atomictorch.com
 
TheSHEEEP
Topic Author
Posts: 37
Joined: 13 Sep 2012, 10:52

Re: Relative sizes outside of grid?

16 Aug 2013, 11:43

Interesting.

Could you give a code (xaml) example for that?

Edit:
NVM, I found this to be very helpful:
http://wpftutorial.net/ViewBox.html

So, you basically wrap whatever you want to be scaled correctly inside a ViewBox and it will be scaled correctly.

Different aspect ratios are a different problem, of course, you have to be careful with it. But I think when you only wrap single elements (like TextBlocks) in a ViewBox, and not the whole grid, it should be less problematic.
 
User avatar
ai_enabled
Posts: 221
Joined: 18 Jul 2013, 05:28
Contact:

Re: Relative sizes outside of grid?

16 Aug 2013, 12:06

TheSHEEEP
yes, you can try in Kaxaml:
<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
   <Grid Background="Black" ShowGridLines="True">
      <Grid.RowDefinitions>
         <RowDefinition Height="*"/>
         <RowDefinition Height="3*"/>
         <RowDefinition Height="*"/>
      </Grid.RowDefinitions>
      <Grid.ColumnDefinitions>
         <ColumnDefinition Width="*"/>
         <ColumnDefinition Width="3*"/>
         <ColumnDefinition Width="*"/>
      </Grid.ColumnDefinitions>
      <Label Content="Test"/>
      <Viewbox Grid.Column="0" Grid.Row="0" Stretch="Uniform">
         <Grid>
            <Rectangle Fill="Green" />
            <Label Content="Top left" />
         </Grid>
      </Viewbox>
      <Viewbox Grid.Column="0" Grid.Row="2" Stretch="Uniform">
         <Grid Background="Yellow">
            <Label Content="Bottom left"/>
         </Grid>
      </Viewbox>
      <Viewbox Grid.Column="2" Grid.Row="0" Stretch="Uniform">
         <Grid Background="Red">
            <Label Content="Top right"/>
         </Grid>
      </Viewbox>
      <Viewbox Grid.Column="2" Grid.Row="2" Stretch="Uniform">
         <Grid Background="Blue">
            <Label Content="Bottom right"/>
         </Grid>
      </Viewbox>
      <Viewbox Grid.Column="1" Grid.Row="1" Stretch="Uniform">
         <Grid Background="White">
            <Label Content="Center"/>
         </Grid>
      </Viewbox>
   </Grid>
</Page>
Result:
Image
Image

First image looks truncated because of forum width limit.
AtomicTorch Studio Pte. Ltd. http://atomictorch.com
 
User avatar
jsantos
Site Admin
Posts: 2903
Joined: 20 Jan 2012, 17:18
Contact:

Re: [SOLVED] Relative sizes outside of grid?

18 Aug 2013, 19:00

We should probably document the ViewBox better in our tutorials because it is very useful container in WPF.

By the way, there is a blurriness problem with text that is rendered inside a ViewBox. We are working to solve it.

Who is online

Users browsing this forum: sfernandez and 0 guests