DevStudent

Canvas

Stackpanel

Grid

ScrollViewer

Scrollviewer gives the ability to scroll the content.

Scrollviewer has to be used with stackpanel and gridview to show the content by scrolling.

<ScrollViewer Margin="50">

        <StackPanel  HorizontalAlignment="Left" VerticalAlignment="Top">
            <Rectangle Fill="Red" Width="300" Height="400"></Rectangle>
            <Ellipse Fill="Blue" Width="300" Height="400"></Ellipse>
            <Polygon Fill="Green" Width="300" Height="400" Points="0,0 275,0 275,200"></Polygon>
        </StackPanel>
    </ScrollViewer>

By default scrollviewer is vertical you can change it by specfying the scrollviewer direction.
We can also make scrollviewer visible only when the content is overflowing.

ViewBox

viewbox had a property called stretch. If stretch is uniform then the content inside it is automatically scaled to fit everything inside the walls of the container without changing the aspect ratio.|

If stretch is set to none then the content inside it will remain same with their original sizes.

If stretch is set to fill then the content will be stretched to occupy the entire container in which viewbox is present.

And finally uniformtofill is a combination of uniform and fill which fills the space with some elements uniformly.

Here is the code with three viewboxes inside gridview.
all the three viewboxes contain same stackpanel code but the way they are rendered is different because of the property stretch.

<Page
    x:Class="App1.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:App1"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">
    <Grid Background="Black">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="400"></ColumnDefinition>
            <ColumnDefinition Width="400"></ColumnDefinition>
            <ColumnDefinition Width="400"></ColumnDefinition>
        </Grid.ColumnDefinitions>

        <Viewbox Grid.Column="0" Stretch="None" >
            <StackPanel Orientation="Horizontal"  >
                <Rectangle Fill="Red" Width="300" Height="300"></Rectangle>
                <Ellipse Fill="Blue" Width="300" Height="300"></Ellipse>
                <Polygon Fill="Green" Width="300" Height="400" Points="0,0 275,0 275,200"></Polygon>
            </StackPanel>
        </Viewbox>
        <Viewbox Grid.Column="1" Stretch="Uniform" >
            <StackPanel Orientation="Horizontal"  >
                <Rectangle Fill="Red" Width="300" Height="300"></Rectangle>
                <Ellipse Fill="Blue" Width="300" Height="300"></Ellipse>
                <Polygon Fill="Green" Width="300" Height="400" Points="0,0 275,0 275,200"></Polygon>
            </StackPanel>
        </Viewbox>
        <Viewbox Grid.Column="2" Stretch="UniformToFill">
            <StackPanel Orientation="Horizontal"  >
                <Rectangle Fill="Red" Width="300" Height="300"></Rectangle>
                <Ellipse Fill="Blue" Width="300" Height="300"></Ellipse>
                <Polygon Fill="Green" Width="300" Height="400" Points="0,0 275,0 275,200"></Polygon>
            </StackPanel>
        </Viewbox>
    </Grid>
</Page>

xaml view box windows store apps example output