Using Viewbox for Automatic Control Scaling in Windows Phone
Join the DZone community and get the full member experience.
Join For FreePresenting content of varied size can often be tricky. For example, displaying names of metro stations with fixed font size, and it always is a fixed font size, can result in a part of the text being clipped off. Or if you use text wrapping, a large block of text can extend way beyond your intended design. Trimming might help, but you cannot always do that.
Consider the following page:
It uses a very simple layout – two equally wide columns. Notice how the default font might be too small for the text on the left and how variation in button captions create problems for buttons on the right. We would like to increase font size for the text on the right, but it is hard to anticipate how large the text would be. Or if there are large words in the text, they might “bleed” onto the right side. As for the buttons, you would want the entire text to be seen.
So how do we do that? Luckily, there is a control that will auto scale any content we give it – Viewbox
. Whatever content you give it, Viewbox
will auto scale it, either up or down, to fill the space the Viewbox
control would normally take. The XAML for the above page looked like this:
<Border BorderBrush="Red" BorderThickness="1" HorizontalAlignment="Center" VerticalAlignment="Center"> <TextBlock Text="{Binding FullName}" TextAlignment="Right"/> </Border> <StackPanel Grid.Column="1"> <StackPanel.Resources> <Style TargetType="Button"> <Setter Property="Width" Value="200" /> <Setter Property="Height" Value="80" /> <Setter Property="Margin" Value="10"/> </Style> </StackPanel.Resources> <Button Content="Pick 1" /> <Button Content="or 2" /> <Button Content="or any large number" /> <Button Content="first line second line" /> </StackPanel>
We wrap the problematic control inside the Viewbox
control. The final XAML should look like this:
<Viewbox> <Border BorderBrush="Red" BorderThickness="1"> <TextBlock Text="{Binding FullName}" TextAlignment="Right"/> </Border> </Viewbox> <StackPanel Grid.Column="1"> <StackPanel.Resources> <Style TargetType="Button"> <Setter Property="Width" Value="200" /> <Setter Property="Height" Value="80" /> <Setter Property="Margin" Value="10"/> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="Button"> <Grid> <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Margin="{TemplateBinding Margin}"> <Viewbox> <ContentPresenter Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}" Margin="{TemplateBinding Padding}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" /> </Viewbox> </Border> </Grid> </ControlTemplate> </Setter.Value> </Setter> </Style> </StackPanel.Resources> <Button Content="Pick 1" /> <Button Content="or 2" /> <Button Content="or any large number" /> <Button Content="first line second line" /> </StackPanel>
The TextBlock
on the left was wrapped in the Viewbox
control while the control template for the buttons was modified to put the content inside another Viewbox
. The final result can be seen on the image below.

Text scales correctly when using Viewbox control
As you can see from the image, text is now fully visible in the buttons while the text on the left is now scaled up to fill the allocated space. This isn’t full-proof solution because you still need to account for differences between the smallest and the largest text. You could pad the text on both size with spaces, just to ensure that short text doesn’t become really large.
Published at DZone with permission of Toni Petrina, DZone MVB. See the original article here.
Opinions expressed by DZone contributors are their own.
Trending
-
What Is JHipster?
-
Using Render Log Streams to Log to Papertrail
-
DevOps Midwest: A Community Event Full of DevSecOps Best Practices
-
Incident Response Guide
Comments