none
canvas如何增加滚动条?并且鼠标右键按住不放移动可以控制canvas的滚动条拖动? RRS feed

  • 问题

  • 我利用canvas实现鼠标对canvas内部指定元素的位置拖动。但拖动到canvas边缘时,并不会出现滚动条。我尝试在canvas上级设置ScrollViewer 并且设置 HorizontalScrollBarVisibility="Visible" VerticalScrollBarVisibility="Visible"。然后又测试了一下,把canvas内部指定元素往边缘处拖动。超出边缘的部分,并没有出现滚动条。

    使用的xaml代码

     <Border Margin="5"  Background="AntiqueWhite"  BorderThickness="1" BorderBrush="blue">
                <ScrollViewer HorizontalScrollBarVisibility="Visible" VerticalScrollBarVisibility="Visible">
                  <Canvas x:Name="canvas" Background="White">
                    </Canvas>
                </ScrollViewer>
                   
              
            </Border>

    我想要令canvas出现滚动条,并且在鼠标右键在canvas上右键按住不放的情况下,通过鼠标移动控制canvas的横向滚动条和纵向滚动条的位置。

    这是测试的演示效果,没有出现滚动条

    想要达到的目标效果:

    在wpf中,利用canvas和其他控件如何实现上面gif动画里演示效果?




    • 已编辑 Trian555 2022年11月10日 11:07
    2022年11月10日 11:05

答案

  • 你可以参考下面的示例。

    其中Canvas尺寸要比ScrollViewer(Border/Window)的尺寸大。

    <Border Margin="5"  Background="AntiqueWhite"  BorderThickness="1" BorderBrush="blue">
           <ScrollViewer x:Name="scrollViewer" HorizontalScrollBarVisibility="Visible" VerticalScrollBarVisibility="Visible"
                         PreviewMouseLeftButtonDown="scrollViewer_PreviewMouseLeftButtonDown"
                         PreviewMouseLeftButtonUp="scrollViewer_PreviewMouseLeftButtonUp"
                         PreviewMouseMove="scrollViewer_PreviewMouseMove" PreviewMouseWheel="scrollViewer_PreviewMouseWheel">
                <Canvas x:Name="canvas" Background="White" Width="1000" Height="800">
                    <TextBox x:Name="tb" Text="hello" Width="100" Height="50" Background="AliceBlue"/>
                    <TextBox x:Name="tb1" Text="hello" Margin="300" Width="100" Height="50" Background="AliceBlue"/>
                    <TextBox x:Name="tb2" Text="hello" Margin="500,200" Width="100" Height="50" Background="AliceBlue"/>
                    <TextBox x:Name="tb3" Text="hello" Margin="500,600" Width="100" Height="50" Background="AliceBlue"/>
                </Canvas>
           </ScrollViewer>
    
         </Border>

    MainWindow.xaml.cs:

     public partial class MainWindow : Window
        {
            public MainWindow()
            {
                InitializeComponent();
            }
            Point scrollMousePoint = new Point();
            double hOff = 1;
            double vOff = 1;
            private void scrollViewer_PreviewMouseLeftButtonDown(object sender, MouseButtonEventArgs e)
            {
                scrollMousePoint = e.GetPosition(scrollViewer);
                hOff = scrollViewer.HorizontalOffset;
                vOff = scrollViewer.VerticalOffset;
                scrollViewer.CaptureMouse();
            }
    
            private void scrollViewer_PreviewMouseMove(object sender, MouseEventArgs e)
            {
                if (scrollViewer.IsMouseCaptured)
                {
                    scrollViewer.ScrollToHorizontalOffset(hOff + (scrollMousePoint.X - e.GetPosition(scrollViewer).X));
                    scrollViewer.ScrollToVerticalOffset(vOff + (scrollMousePoint.Y - e.GetPosition(scrollViewer).Y));
                }
            }
    
            private void scrollViewer_PreviewMouseLeftButtonUp(object sender, MouseButtonEventArgs e)
            {
                scrollViewer.ReleaseMouseCapture();
            }
    
            private void scrollViewer_PreviewMouseWheel(object sender, MouseWheelEventArgs e)
            {
                scrollViewer.ScrollToHorizontalOffset(scrollViewer.HorizontalOffset + e.Delta);
                scrollViewer.ScrollToHorizontalOffset(scrollViewer.VerticalOffset + e.Delta);
            }
        }

    结果如图:


    MSDN Community Support
    Please remember to click "Mark as Answer" the responses that resolved your issue, and to click "Unmark as Answer" if not. This can be beneficial to other community members reading this thread. If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.


    2022年11月11日 6:53