How to make use of the ViewBox control to make the application re-sizable?

Question

ViewBox seems to be the go to tool if you want your application to be re-sizable, however, I still cannot get my head around on how to properly use it.

Here's my current code (this approach was recommended by a colleague)

<Window x:Class="WpfApp3.MainWindow"
    WindowState="Maximized"
    Width="{DynamicResource {x:Static SystemParameters.MaximizedPrimaryScreenWidthKey}}" 
    Height="{DynamicResource {x:Static SystemParameters.MaximizedPrimaryScreenHeightKey}}">

<Viewbox Stretch="UniformToFill">
    <Grid Background="Peru"
          Height="1080"
          Width="15000">

        <Grid Background="Bisque"
              HorizontalAlignment="Left"
              Width="{DynamicResource {x:Static SystemParameters.MaximizedPrimaryScreenWidthKey}}" >

        </Grid>
    </Grid>
</Viewbox>

</Window>

The approach is the following:

• Wrap everything in a ViewBox with Stretch property set to UniformToFill , such that the aspect ratio of inner-elements in preserved
• For the outer most grid, set the Width to some arbitrary huge number and Height to some arbitrary small number
• We now have a huge rectangle going off screen to the right, while the height is the height of the window
• Create a second grid and horizontally align it the the left
• Put all other elements in this grid

Problems

• The width of the second grid is set to the width of the primary screen, but because of the ViewBox and its stretch property the width if cut off, so I cannot really use it, as all the elements will be slightly-aligned to the left of the screen

Current layout

Questions

• Is this the recommended way of creating dynamic / re-sizable applications in WPF?
• Is this the correct way of using the ViewBox control?
• How can I fix my problem?
• Are there other solutions to using the ViewBox control?

Answer 1

I had this issue when I was trying to make a telerik grid re-sizable. Using a viewbox is the recommended way of creating re-sizable applications in WPF. I've found that using a dock panel is better than margins because it holds the control in place, while the viewbox controls the sizing. You can also add a grid with rows / columns if you need multiple controls. I'm very new to development, so this may not be best practice, however it works for our applications.

``<Viewbox
    Stretch="Fill"
        Grid.Row="1"
        Grid.Column="1">
            <DockPanel Height="300">
                <Grid>
                    *User controls*
                </Grid>
            </DockPanel>
</Viewbox>``