How to relative scale size of User Control?

Question

How to relative scale size of User Control like image (in image editor).

Example (100%):

alt text http://stegnar.com/pic/normalPicture.png

Scaled down UC (70%):

alt text http://stegnar.com/pic/normalPicture70percent.png

Well I achieve this in picture editor, but I would like in WPF. :) I need this to adjust my application to different screen resolution, while nothing hiding (no scrollbars).

Answer 1

Use of Viewbox (as said by Milan Nankov) is a great idea. One thing that I must warn you is that it also zooms in or out other visual aspects as well.

For example, a Textbox with dimension 200 X 1000 is very different from a Textbox with dimension 20 X 100 zoomed in 10x.

WPF provides many layouting options which can change dimension of the controls according to the size of the container. But it doesn't change the size of the text. Viewbox overcomes this issue, but it introduces another issue. Check the image below which shows the same textbox in a viewbox before and after zooming.

One trick which could be used is to place every textblock in a viewbox. But I guess that would be an overkill, and I seriously don't having any backing for this trick. Please do check for yourself and reply whether it's practical or not.

Another trick could be to bind the control's height to the font size. We would be needing a converter in that case. Please refer to this reply.. Resize font in TextBox in Grid

Answer 2

you can place the whole container into a ViewBox

<Viewbox StretchDirection="Both" Stretch="Uniform">
  <Grid>...</Grid>
</Viewbox>

you don't have to place each single textblock in it!

Answer 3

You could try the ViewBox control that scales up/down its content so that it fills the available space.

<Window x:Class="WpfApplication1.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:WpfApplication1"
Title="Window1">
<Grid>
    <Viewbox StretchDirection="Both" Stretch="Uniform">
        <local:UserControl1 Height="600" Width="600"/>
    </Viewbox>
</Grid>