Viewbox in Cider designer hides all controls in the "box"

Question

When I place a Viewbox as the child element of a WPF window, the Cider Designer "hides" all interior controls with the text "Viewbox" only appearing on the display.

Why? Is there a problem with this layout? Are there better layouts to achieve scalable images on a canvas?

<Window x:Class="WpfApplication1.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Window1" Background="Green" Width="900" Height="700">
    <Viewbox Stretch="Uniform">
        <Canvas Height="600" Width="800">
            <Image Canvas.Left="74" Canvas.Top="83" Name="image1" Source="/WpfApplication1;component/bitmap20.bmp" />
            <Image Canvas.Left="84" Canvas.Top="103" Name="image2" Source="/WpfApplication1;component/bitmap21.bmp" />
            <Image Canvas.Left="94" Canvas.Top="123" Name="image3" Source="/WpfApplication1;component/bitmap22.bmp" />
            <Image Canvas.Left="104" Canvas.Top="143" Name="image4" Source="/WpfApplication1;component/bitmap23.bmp" />
            <Image Canvas.Left="114" Canvas.Top="163" Name="image5" Source="/WpfApplication1;component/bitmap24.bmp" />
            <Image Canvas.Left="124" Canvas.Top="183" Name="image6" Source="/WpfApplication1;component/bitmap25.bmp" />
            <Image Canvas.Left="134" Canvas.Top="203" Name="image7" Source="/WpfApplication1;component/bitmap26.bmp" />
            <Image Canvas.Left="144" Canvas.Top="223" Name="image8" Source="/WpfApplication1;component/bitmap27.bmp" />
        </Canvas>
    </Viewbox>
</Window>

I just fired up the Visual Studio 2010 beta and guess what - the elements in the view box are shown in the designer. So I guess that answers my question, i.e., the designer behavior is simply a limitation in the vs2008 tool set. — Bill, Jun 17 '09 at 10:23

score 0 · Answer 1 · answered Jun 17 '09 at 04:48

Is there a particular reason you're partial to Canvas?

You could just put the images directly in a Grid with Stretch="Uniform" like so:

  <Grid>  
    <Grid.ColumnDefinitions>
      <ColumnDefinition></ColumnDefinition>
...
      <ColumnDefinition></ColumnDefinition>
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
      <RowDefinition></RowDefinition>
...
      <RowDefinition></RowDefinition>
    </Grid.RowDefinitions>
    <Image Grid.Column="0" Grid.Row="0" Source="/WpfApplication1;component/bitmap20.bmp" Stretch="Uniform"></Image>
    <Image Grid.Column="0" Grid.Row="1" Source="/WpfApplication1;component/bitmap21.bmp" Stretch="Uniform"></Image>
    <Image Grid.Column="1" Grid.Row="0" Source="/WpfApplication1;component/bitmap22.bmp" Stretch="Uniform"></Image>
...
...
  </Grid>

and since Grid automatically stretches to the size of it's container, your images will grow/shrink automatically in the layout.

Thanks for the reply. The snippet was just a snippet; there are drawing elements like lines and rectangles (and custom shapes) on the canvas in the real application and not just a bunch of images — Bill, Jun 17 '09 at 10:22

score 0 · Accepted Answer · answered Jun 17 '09 at 14:14

You're right, it's just a limitation of VS2008. VS2010 fixes that.

In the meantime, I use the Expression Blend 3 Preview, which supports viewboxes and seems to work much faster than Visual's Cider too. I think the Blend 3 preview works till september 09.

Viewbox in Cider designer hides all controls in the "box"

2 Answers2