如何在滚动时修复画布和工具栏答案

【问题标题】：How to fix the canvas and Tool bar while scrolling如何在滚动时修复画布和工具栏
【发布时间】：2016-03-10 19:39:59
【问题描述】：

我不知道如何让菜单栏、工具栏和画布固定它们的位置。滚动时它们不应该移动。我有一个 WPF 窗口，其中有一个菜单栏、一个工具栏和两个画布。画布 1 在 XAML 中，画布 2 通过 vb.net 是动态的现在我想修复前三个。

菜单栏
工具栏
帆布 1

这是我的 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>

滚动右侧的栏不应移动这三个突出显示的... Image

【问题讨论】：

没有代码，令人困惑，没有真正的问题。快速修复它，因为这个问题很快就会结束。
克劳狄斯，我没有为这个问题编写任何代码。因为我不懂WPF。这就是在这里发布问题的原因。我只想将元素固定到窗口，使其在滚动时不会移动。
你能发布一些你迄今为止尝试过的导致问题的 xaml 吗？

标签： wpf vb.net canvas scroll menu

【解决方案1】：

在使用DockPanel 时，请务必注意顺序。您应该使用以下 XAML 作为起点并根据需要对其进行修改：

<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>

【讨论】：

我确实尝试了您的示例，但它没有动态加载我的最后一个画布。相反，它显示全部为空。但是，如果没有加载画布，我无法滚动和测试工具栏和菜单栏是固定的还是移动的......
@nysu 动态加载与我或您的代码无关。 XAML 布局和背后的代码是不同的东西。
@nysu 仔细设置差异控件的正确名称。

【解决方案2】：

我认为这可能会让你的 UI 更接近你正在尝试做的事情。如果您让 XAML 更多地使用停靠面板，您可以获得更固定的 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>

【讨论】：

我确实更改了您提到的代码，但它没有显示我的动态画布。所以没有滚动条，因此我无法测试工具栏和菜单栏是否在滚动时移动
尝试将 cvsZoneColor 更改为网格。您还可以尝试在 cvsWarehouse 周围临时设置一个边框，以便更好地了解 UI 的加载方式以及问题可能出在哪里。