using Viewbox and ScrollBar together

See more:

Silverlight

Hello Guys,:rose:
I’m still studing silverlight, it’s great but I have to ask some question from you, please help me on that:
I have a table on a mssql database and it has some data which required to draw simple box.
In this project I have to utilize viewbox to be able to cover all boxes and zooming and of course the box count could be numerous (about 10000)so the scrollbars also necessary to see the boxes which are not in the current view.
I have been studied about the scrollbars and viewbox but the problem is when I add the viewbox, the boxes(rectangles) will expand on the screen and unable to set them correctly.:confused:
This is the code :

    <usercontrol x:class="viewbox.MainPage" xmlns:x="#unknown">
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    d:DesignHeight="300" d:DesignWidth="400">
   
    <viewbox stretch="UniformToFill" allowdrop="False">
       
            
            <grid x:name="LayoutRoot" removed="#FF98D8A3" showgridlines="True" width="Auto" horizontalalignment="Left" verticalalignment="Stretch">
        <grid.rowdefinitions>
                <rowdefinition height="50">

                </rowdefinition>
                <rowdefinition height="50">

                </rowdefinition>
                <rowdefinition height="50">

                </rowdefinition>

                <rowdefinition height="50">

                </rowdefinition>
                <rowdefinition height="50">

            </rowdefinition>
            <rowdefinition height="50">

            </rowdefinition>

        </grid.rowdefinitions>

        <grid.columndefinitions>
                <columndefinition width="70">

                </columndefinition>
                <columndefinition width="70">

                </columndefinition>
                <columndefinition width="70">

                </columndefinition>
                <columndefinition width="70">

                </columndefinition>
                <columndefinition width="70">

                </columndefinition>
                <columndefinition width="70">

                </columndefinition>
            </grid.columndefinitions>
        <rectangle fill="red" stroke="Black" grid.row="0" grid.column="0" width="20" height="20"></rectangle>
        <rectangle fill="Green" stroke="Black" grid.row="1" grid.column="0" width="20" height="20"></rectangle>
        <rectangle fill="Yellow" stroke="Black" grid.row="2" grid.column="0" width="20" height="20"></rectangle>
    
        <rectangle fill="red" stroke="Black" grid.row="0" grid.column="1" width="20" height="20"></rectangle>
        <rectangle fill="Green" stroke="Black" grid.row="1" grid.column="1" width="20" height="20"></rectangle>
        <rectangle fill="Yellow" stroke="Black" grid.row="2" grid.column="1" width="20" height="20"></rectangle>
    </grid>
 
    </viewbox>
   
</usercontrol>

Plz Some Code About The Following Schematic which allow me to use scrollbar: :laugh: