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>
Solution
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.
OTHER TIPS
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.