How to fix the canvas and Tool bar while scrolling

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

Answers


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>

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>

Need Your Help

Round down and group by decade php mysql

php mysql

I know its probably a very stupid question, but is there a simple way to round down from a date format like such:

Programmatically setting the record pointer in a C# DataGridView

c# .net winforms datagridview

How do I programmatically set the record pointer in a C# DataGridView?