[SOLVED] Relative sizes outside of grid?
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.
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.
-
- ai_enabled
- Posts: 231
- Joined:
- Contact:
Re: Relative sizes outside of grid?
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
Re: Relative sizes outside of grid?
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.
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.
-
- ai_enabled
- Posts: 231
- Joined:
- Contact:
Re: Relative sizes outside of grid?
TheSHEEEP
yes, you can try in Kaxaml:
Result:


First image looks truncated because of forum width limit.
yes, you can try in Kaxaml:
Code: Select all
<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>


First image looks truncated because of forum width limit.
AtomicTorch Studio Pte. Ltd. http://atomictorch.com
Re: [SOLVED] Relative sizes outside of grid?
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.
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: Ahrefs [Bot], Google [Bot] and 6 guests