[UWP] ScrollViewer里面有Canvas [英] [UWP]ScrollViewer with Canvas inside it

问题描述

我正在研究如何在其中使用带有Canvas的ScrollViewer。我在MainPage.xaml中有这段代码

Hi, i`m researching how to use ScrollViewer with Canvas inside it. I have this code in MainPage.xaml

    <ScrollViewer MaxHeight="600">
        <Canvas x:Name="rootCanvas"/>
    </ScrollViewer>

此代码在MainPage.xaml.cs

And this code in MainPage.xaml.cs

 public sealed partial class MainPage : Page
    {
        public MainPage()
        {
            this.InitializeComponent();
            this.Loaded += this.OnLoaded;
        }

        private void OnLoaded(object sender, RoutedEventArgs e)
        {
            for (int i = 0; i < 5; i++)
            {
                var button = new Button()
                {
                    Width = 150,
                    Height = 150,
                    Content = "Button" + i,
                    VerticalAlignment = VerticalAlignment.Top,
                    Margin = new Thickness(0, 150*i + 40 * i, 0, 0)
                };

                this.rootCanvas.Children.Add(button);
            }
        }
    }

但是ScrollViewer不会在其中滚动内容，因为它的内容是Canvas。我如何制作 
$

如果滚动浏览器的内容为Canvas？

But ScrollViewer doesn`t scroll content inside it, because it`s content Canvas. How can i make 

scrollviewer to work, if it`s content Canvas?

链接到源：  https://1drv.ms/u/s！ AkGGsZX1H9dr1UMaBbDu252Ejq0Q

Link to source: https://1drv.ms/u/s!AkGGsZX1H9dr1UMaBbDu252Ejq0Q

感谢您的回复！

推荐答案

你好，Valery Tkachov！
$


你必须动态设置属性rootCanvas的高度和宽度，因为默认值是NaN。这就是ScrollViewer不滚动内容的原因，例如内容宽度和haight = 0.



例如你的onLoad方法必须是这样的： 

Hello, Valery Tkachov!

You have to dynamically set properties Height and Width for rootCanvas, becouse as default value is NaN. That`s why ScrollViewer not scroll content, like content width and haight = 0.

For example your onLoad method have to be like this: 

private void OnLoaded(object sender, RoutedEventArgs e)
{
    this.rootCanvas.Width = 0;            
    this.rootCanvas.Height = 0;            
    for (int i = 0; i < 50; i++)            
    {                
        var button = new Button()                
        {                    
            Width = 150,                  
            Height = 150,                    
            Content = "Button" + i,                    
            VerticalAlignment = VerticalAlignment.Top,  
            Margin = new Thickness(0, 150 * i + 40 * i, 0, 0)
        };    
           
        this.rootCanvas.Children.Add(button);    
    
        this.rootCanvas.Height = this.rootCanvas.Height += button.Height;
        this.rootCanvas.Width = this.rootCanvas.Width += button.Width;
    }
}

这篇关于[UWP] ScrollViewer里面有Canvas的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！