How to fix the canvas and Tool bar while scrolling

Question

I do not have an idea of how to make the menu bar, tool bar, and canvas fix their positions. While scrolling they shouldn't move. I have a WPF window where I have a menu bar and a tool bar and two canvases. Canvas 1 is in XAML and canvas 2 is dynamic through vb.net Now I want to fix the first three.

• Menu bar
• Tool bar
• Canvas 1

Here is my XAML:

   <ScrollViewer HorizontalScrollBarVisibility="Visible"    VerticalScrollBarVisibility="Visible" >
    <DockPanel>
       <Grid ScrollViewer.HorizontalScrollBarVisibility="Visible" >
            <Grid.RowDefinitions>
                <RowDefinition Height="25" />
                <RowDefinition Height="25" />
                <RowDefinition Height="*" />
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="350"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>
            <Menu x:Name="menu1" BorderBrush="AliceBlue" VerticalAlignment="Top" FontFamily="Comic Sans MS" >
                <MenuItem Header="_File" Width="92" FontSize="16" FontWeight="Normal" FontFamily="Century Gothic" >
                    <MenuItem Header="Location" FontSize="16">
                        <MenuItem Header="01" />
                        <MenuItem Header="02"/>
                        <MenuItem Header="03"/>
                        <MenuItem Header="04"/>
                        <MenuItem Header="05"/>
                        <MenuItem Header="06"/>
                        <MenuItem Header="07"/>
                        <MenuItem Header="08"/>
                        <MenuItem Header="09"/>
                        <MenuItem Header="10"/>
                        <MenuItem Header="11"/>
                        <MenuItem Header="12"/>
                        <MenuItem Header="13"/>
                        <MenuItem Header="14"/>
                    </MenuItem>
                    <MenuItem Header="_Print"/>
                    <MenuItem Header="_Print Preview"/>
                    <MenuItem Header="_Exit"/>

                </MenuItem>
            </Menu>

           <ToolBar Grid.Row="1" x:Name="toolBar1" BorderBrush="Red"  BorderThickness="3" Margin="0,0,0,900" Grid.RowSpan="2"  Height="30" VerticalAlignment="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>
            <DockPanel>
                <Canvas x:Name="cvsZoneColor" DockPanel.Dock="Top"  >
                <Rectangle Width="25" Height="25"  Margin="60 60 60 950"  >
                    <Rectangle.Fill>
                        <SolidColorBrush>
                        <SolidColorBrush.Color>
                            <Color A="219" R="219" G="249" B="217" />
                        </SolidColorBrush.Color>
                        </SolidColorBrush>
                    </Rectangle.Fill>
                </Rectangle>
                <TextBlock Text="A" Margin="60 80 60 950" Width="20" Height="20" ></TextBlock>
                <Rectangle Width="25" Height="25"  Margin="90 60 70 990"  >
                    <Rectangle.Fill>
                        <SolidColorBrush>
                            <SolidColorBrush.Color>
                                <Color A="219" R="255" G="238" B="204" />
                            </SolidColorBrush.Color>
                        </SolidColorBrush>
                    </Rectangle.Fill>
                </Rectangle>
                <TextBlock Text="B" Margin="90 80 70 950" Width="20" Height="20" ></TextBlock>
                <Rectangle Width="25" Height="25"  Margin="120 60 70 990"  >
                    <Rectangle.Fill>
                        <SolidColorBrush>
                            <SolidColorBrush.Color>
                                <Color A="219" R="204" G="238" B="255" />
                            </SolidColorBrush.Color>
                        </SolidColorBrush>
                    </Rectangle.Fill>
                </Rectangle>
                <TextBlock Text="C" Margin="120 80 70 950" Width="20" Height="20" ></TextBlock>
                <Rectangle Width="25" Height="25"  Margin="150 60 70 990"  >
                    <Rectangle.Fill>
                        <SolidColorBrush>
                            <SolidColorBrush.Color>
                                <Color A="219" R="204" G="238" B="221" />
                            </SolidColorBrush.Color>
                        </SolidColorBrush>
                    </Rectangle.Fill>
                </Rectangle>
                <TextBlock Text="D" Margin="150 80 70 950" Width="20" Height="20" ></TextBlock>
                <Rectangle Width="25" Height="25"  Margin="180 60 70 990"  >
                    <Rectangle.Fill>
                        <SolidColorBrush>
                            <SolidColorBrush.Color>
                                <Color A="219" R="255" G="221" B="238" />
                            </SolidColorBrush.Color>
                        </SolidColorBrush>
                    </Rectangle.Fill>
                </Rectangle>
                <TextBlock Text="E" Margin="180 80 70 950" Width="20" Height="20" ></TextBlock>
                <Rectangle Width="25" Height="25" Margin="210 60 70 990"  >
                    <Rectangle.Fill>
                        <SolidColorBrush>
                            <SolidColorBrush.Color>
                                <Color A="219" R="255" G="238" B="255" />
                            </SolidColorBrush.Color>
                        </SolidColorBrush>
                    </Rectangle.Fill>
                </Rectangle>
                <TextBlock Text="F" Margin="210 80 70 950" Width="20" Height="20" ></TextBlock>
            </Canvas>
            </DockPanel>

            <Canvas x:Name="cvsWarehouse" Focusable="True" ScrollViewer.CanContentScroll="True"  ScrollViewer.HorizontalScrollBarVisibility="Visible" ScrollViewer.VerticalScrollBarVisibility="Visible"    MouseWheel="Canvas_MouseWheel"  Grid.Row="3" RenderTransformOrigin="0.5,0.5" Margin="0,150,0,0"  >
                    <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>
    </DockPanel>
</ScrollViewer>

Scrolling the bar on the right hand side shouldn't move these three highlighted ... Image

Answer 1

I think this might get you a UI closer to what it looks like you are trying to do. If you make the XAML to use the dock panel more, you can get a more fixed UI.

<DockPanel LastChildFill="True">
    <Menu x:Name="menu1" DockPanel.Dock="Top">
        <MenuItem Header="_File" >
        ...
    </Menu>
    <ToolBar x:Name="toolBar1" DockPanel.Dock="Top">
        ...
    </ToolBar>
    <Grid x:Name="cvsZoneColor" DockPanel.Dock="Top">
        <StackPanel Orientation="Vertical">
            <Rectangle Width="25" Height="25" Margin="60 0 60 0"  >
                ...
            </Rectangle>
            <TextBlock Text="A" Margin="60 0 60 0" Width="20" Height="20"/>
        </StackPanel>
        ...
    </Grid>
    <ScrollViewer DockPanel.Dock="Bottom">
        <Canvas x:Name="cvsWarehouse">
            ...
        </Canvas>
    </ScrollViewer>
</DockPanel>

Answer 2

While using DockPanel, it's important to keep note of order. You should use below XAML as your starting point and modify it for your needs :

<Window ...>
    <DockPanel LastChildFill="True">

        <Menu x:Name="menu1" BorderBrush="AliceBlue" VerticalAlignment="Top" FontFamily="Comic Sans MS" DockPanel.Dock="Top">
            <MenuItem Header="_File"  Width="92" FontSize="16" FontWeight="Normal" FontFamily="Century Gothic" >
                <MenuItem Header="Location" FontSize="16">
                    <MenuItem Header="01" />
                    <MenuItem Header="02"/>
                    <MenuItem Header="03"/>
                    <MenuItem Header="04"/>
                    <MenuItem Header="05"/>
                    <MenuItem Header="06"/>
                    <MenuItem Header="07"/>
                    <MenuItem Header="08"/>
                    <MenuItem Header="09"/>
                    <MenuItem Header="10"/>
                    <MenuItem Header="11"/>
                    <MenuItem Header="12"/>
                    <MenuItem Header="13"/>
                    <MenuItem Header="14"/>
                </MenuItem>
                <MenuItem Header="_Print"/>
                <MenuItem Header="_Print Preview"/>
                <MenuItem Header="_Exit"/>

            </MenuItem>
        </Menu>        

        <ToolBar x:Name="toolBar1" BorderBrush="Red"  BorderThickness="3" 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 Background="Pink" DockPanel.Dock="Bottom" Height="25">
                <TextBlock Text="Bottom"/>
            </Canvas>

        <ScrollViewer>
            <Canvas Background="Red" ScrollViewer.VerticalScrollBarVisibility="Visible">
                <Button Content="Press"/>
            </Canvas>
        </ScrollViewer>

    </DockPanel>
</Window>