Scroll bars with zoom in and zoom out on XAML canvas

Question

I have a canvas that will have images created from the code behind, and my xaml looks below    

<ScrollViewer HorizontalScrollBarVisibility="Visible"  VerticalScrollBarVisibility="Visible" >
    <WrapPanel >
        <Grid ScrollViewer.HorizontalScrollBarVisibility="Visible" >
            <Grid.RowDefinitions>
                <RowDefinition Height="25" />
                <RowDefinition Height="20" />
                <RowDefinition Height="*" />
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="350"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>

            <Menu x:Name="menu1" Grid.Row="0" BorderBrush="AliceBlue" VerticalAlignment="Top" FontFamily="Comic Sans MS" DockPanel.Dock="Top" RenderTransformOrigin="0.48,3.04" >
                <MenuItem Header="_File" Width="92" FontSize="16" FontWeight="Normal" FontFamily="Century Gothic" >

                    <MenuItem Header="_Print"/>
                    <MenuItem Header="_Print Preview"/>
                    <MenuItem Header="_Exit"/>

                </MenuItem>
            </Menu>

            <ToolBar x:Name="toolBar1" Grid.Row="1" Grid.RowSpan="2" BorderBrush="Red"  BorderThickness="3" Margin="0,0,0,900"   Height="30" VerticalAlignment="Top" DockPanel.Dock="Top" >
                <Button x:Name="Zoomin" Click="menuItemZoomin_Click" HorizontalAlignment="Left" Margin="1" Width="90"  FontSize="16" FontWeight="SemiBold" Height="55" RenderTransformOrigin ="0.917,0.587" IsHitTestVisible="True" IsEnabled="True" FontFamily="Century Gothic" Content="Zoom In" />
                <Button x:Name="Zoomout" Click="menuItemZoomout_Click" HorizontalAlignment="Left" Margin="1" Width="90" FontSize="16" FontWeight="SemiBold" RenderTransformOrigin="0.917,0.587" Height="55" FontFamily="Century Gothic" Content="Zoom Out"/>
                <!--<Button x:Name="Print" Click="PrintBtn_Click" HorizontalAlignment="Left" Margin="1" Width="90" FontSize="16" FontWeight="SemiBold" RenderTransformOrigin="0.917,0.587" Height="55" FontFamily="Century Gothic" Content="Print"/>-->
            </ToolBar>



            <Canvas x:Name="cvsWarehouse"  Grid.Row="1"  Focusable="True" ScrollViewer.CanContentScroll="True"  ScrollViewer.HorizontalScrollBarVisibility="Visible" ScrollViewer.VerticalScrollBarVisibility="Visible"    MouseWheel="Canvas_MouseWheel"  RenderTransformOrigin="0.5,0.5" Margin="15,144,122,151" Grid.ColumnSpan="2"  >
                <Canvas.LayoutTransform>
                    <TransformGroup>
                        <ScaleTransform x:Name ="st1" ScaleX="{Binding Value, ElementName=uiScaleSlider}"
                            ScaleY="{Binding Value, ElementName=uiScaleSlider}"  />
                        <TranslateTransform Y="100" />
                    </TransformGroup>

                </Canvas.LayoutTransform>
            </Canvas>
        </Grid>
    </WrapPanel>

cvsWarehouse is a real canvas, where a lot of work for the code works when creating images, and the output window looks as shown below.

When it is maximized, it does not show scrollbars. I'm going crazy like crazy and try my best, but still I can’t solve the problem. I want to scroll to the end of the canvas. There are also more images, but wrappanel or layout conversion doesn't work. It also zooms in and out, but until it shows me the scroll bars.

This is what I mean when I say that the content is still below

.

Answer 1

, - (LayoutTransform ?). ScrollViewer (, ). scrollviewer . , , Canvas - ScrollViewer.CanContentScroll = "True" ScrollViewer.HorizontalScrollBarVisibility = "" ScrollViewer.VerticalScrollBarVisibility = "". , ScrollViewer, .