WPF ViewBox Zoom

Question

Is there a way to zoom a viewbox content, excpet for one control? I have a viewbox with a grid, and in this grid I have some controls and I'm trying to zoom all the controls in the viewbox except one, is it possible?

Many thanks, Paulo

Answer 1

You can use a grid to add layers to your layout. That way, you can zoom one set of items, and leave another set un-zoomed.

<Grid>
  <Viewbox>
    <!-- Controls to zoom -->
  </Viewbox>
  <!-- Control to exclude from zoom -->
</Grid>

The order of the view box and the other controls in XAML will depend upon which layer appears on top.

If that doesn't quite do what you want, leave a comment and I'll revisit the answer.

EDIT You want the unzoomed control to be positioned relative to the (0,0) of the Viewbox. That will happen in this situation because both children of the grid are in cell (0,0) which means that their top-left corners are aligned. Can you give an example of what you have in XAML, and what's wrong with it (perhaps edit your original question)?

Here's some XAML to try:

<Page
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  Background="Green">
  <Grid HorizontalAlignment="Center" VerticalAlignment="Center">
    <Viewbox>
      <Rectangle Fill="Yellow" Width="10" Height="10" />
    </Viewbox>
    <TextBlock>I am positioned at (0,0)</TextBlock>
    <TextBlock Margin="50,50">I am positioned at (50,50)</TextBlock>
  </Grid>
</Page>

That gives a layout like this:

http://img20.imageshack.us/img20/2045/layout1m.png

But note that when the height is reduced, the grid becomes wider than the view box, and so the content is layed out like this:

http://img20.imageshack.us/img20/9397/layout2i.png

I guess that's not what you want. In that case, you use a canvas and go for something like this:

<Page
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  Background="Green">
  <Grid HorizontalAlignment="Center" VerticalAlignment="Center">
    <Viewbox>
      <Rectangle Fill="Yellow" Width="10" Height="10" />
    </Viewbox>
    <Canvas>
      <TextBlock>I am positioned at (0,0)</TextBlock>
      <TextBlock Margin="50,50">I am positioned at (50,50)</TextBlock>
    </Canvas>
  </Grid>
</Page>

Which looks like this:

http://img20.imageshack.us/img20/6743/layout3i.png