DZone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
Refcards Trend Reports Events Over 2 million developers have joined DZone. Join Today! Thanks for visiting DZone today,
Edit Profile Manage Email Subscriptions Moderation Admin Console How to Post to DZone Article Submission Guidelines
View Profile
Sign Out
Refcards
Trend Reports
Events
Zones
Culture and Methodologies Agile Career Development Methodologies Team Management
Data Engineering AI/ML Big Data Data Databases IoT
Software Design and Architecture Cloud Architecture Containers Integration Microservices Performance Security
Coding Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Partner Zones AWS Cloud
by AWS Developer Relations
Culture and Methodologies
Agile Career Development Methodologies Team Management
Data Engineering
AI/ML Big Data Data Databases IoT
Software Design and Architecture
Cloud Architecture Containers Integration Microservices Performance Security
Coding
Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance
Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Partner Zones
AWS Cloud
by AWS Developer Relations
Building Scalable Real-Time Apps with AstraDB and Vaadin
Register Now

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

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

Using Viewbox for Automatic Control Scaling in Windows Phone

Toni Petrina user avatar by
Toni Petrina
·
May. 19, 13 · Interview
Like (0)
Save
Tweet
Share
6.40K Views

Join the DZone community and get the full member experience.

Join For Free

Presenting 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:

Simple page without using Viewbox

Simple page using a bunch of controls with default styles

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.

Simple page using Viewbox control

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.

Windows Phone Scaling (geometry)

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

Partner Resources

X

ABOUT US

  • About DZone
  • Send feedback
  • Careers
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • Become a Contributor
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 600 Park Offices Drive
  • Suite 300
  • Durham, NC 27709
  • support@dzone.com

Let's be friends: