none
ScrollViewer 滚动条 RRS feed

  • 问题

  • 我在ScrollViewer里写了一个textblock, 编译后滚动条出现在webview上,textblock不能滚动,如何让滚动条滚动的时候textblock和webview同时滚动?

     <ScrollViewer
               HorizontalScrollBarVisibility="Disabled" VerticalScrollBarVisibility="Auto"
                ScrollViewer.HorizontalScrollMode="Disabled" ScrollViewer.VerticalScrollMode="Enabled"
                ScrollViewer.ZoomMode="Disabled">
    <Grid>

     <RowDefinition Height="Auto"/>
     <RowDefinition Height="*"/>

    <Textblock Text="{binding Title}" />
    <Webview x:Name="detailview"  Grid.Row="1" />

    </Grid>

    </ScrollViewer>



    2014年6月17日 2:01

答案

  • 你好,我看过你的代码,大概清楚你的问题在哪了。

    1,首先你给两行定义的高度为auto和*,同时也没有给TextBlock或者WebView设定高度,这样ScrollViewer会自动调整高度。

    所以你需要给两个东西设定高度,这样才能让ScrollBar显示,我这里设定的是ScrollViewer高度为600,而Gird的高度加起来为800,那么ScollBar必然出现:

            <ScrollViewer
                HorizontalScrollBarVisibility="Disabled" VerticalScrollBarVisibility="Auto"
                 ScrollViewer.HorizontalScrollMode="Disabled" ScrollViewer.VerticalScrollMode="Enabled"
                 ScrollViewer.ZoomMode="Disabled" Height="600">
                <Grid>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto"/>
                        <RowDefinition Height="*"/>
                    </Grid.RowDefinitions>
                    <TextBlock Height="400" Text="asdsadasdasdas" />
                    <WebView Height="400" x:Name="detailview"  Grid.Row="1" Source="http://www.microsoft.com" />
    
                </Grid>
    
            </ScrollViewer>

    2,我估计你说的问题是发生在鼠标处于WebView范围内,这个时候鼠标的事件都会被WebView所捕捉,并且被WebView处理掉,也就出现了你所说的滑动的时候TextBlock不动的情况。

    --James


    <THE CONTENT IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, WHETHER EXPRESS OR IMPLIED>
    Thanks
    MSDN Community Support

    Please remember to "Mark as Answer" the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.

    2014年6月18日 10:04
    版主
  • 这个略微有点难度,不过还是可以通过JavaScript注入的方式来获取。

    使用下面语句来获取:

                string[] arguments = { "document.documentElement.clientWidth.toString()" };
                var height = await webview.InvokeScriptAsync("eval", arguments);

    -James


    <THE CONTENT IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, WHETHER EXPRESS OR IMPLIED>
    Thanks
    MSDN Community Support

    Please remember to "Mark as Answer" the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.

    2014年6月20日 0:27
    版主

全部回复

  • 你好,

    你可能需要重新排版,让滚动条与WebView控件不重叠。

    另外,我不是很明白你说让滚动条滚动的时候TextBlock和WebView同时滚动的意思?如果需要的话,可以把ScrollViewer的HorizontalOffset绑定给TextBlock或者WebView就行啦。不过可能还需要一个Convertor类来帮忙。

    --James


    <THE CONTENT IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, WHETHER EXPRESS OR IMPLIED>
    Thanks
    MSDN Community Support

    Please remember to "Mark as Answer" the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.


    2014年6月17日 8:12
    版主
  • 我的意思是滚动条向上滚动的时候 textblock的内容 和 webview的内容一同向上滚动。
    2014年6月17日 10:46
  • 那也很简单,吧TextBlock和WebView放在一个Grid或者StackPanel下,然后把这个容器放在ScrollView里面,就可以一起向上滚动啦。

    --James


    <THE CONTENT IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, WHETHER EXPRESS OR IMPLIED>
    Thanks
    MSDN Community Support

    Please remember to "Mark as Answer" the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.

    2014年6月18日 6:52
    版主
  • 你看我发帖时写的代码,就是这样写的,可是滚动的时候textblock不动,滚动条出现在webview里面
    2014年6月18日 7:25
  • 你好,我看过你的代码,大概清楚你的问题在哪了。

    1,首先你给两行定义的高度为auto和*,同时也没有给TextBlock或者WebView设定高度,这样ScrollViewer会自动调整高度。

    所以你需要给两个东西设定高度,这样才能让ScrollBar显示,我这里设定的是ScrollViewer高度为600,而Gird的高度加起来为800,那么ScollBar必然出现:

            <ScrollViewer
                HorizontalScrollBarVisibility="Disabled" VerticalScrollBarVisibility="Auto"
                 ScrollViewer.HorizontalScrollMode="Disabled" ScrollViewer.VerticalScrollMode="Enabled"
                 ScrollViewer.ZoomMode="Disabled" Height="600">
                <Grid>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto"/>
                        <RowDefinition Height="*"/>
                    </Grid.RowDefinitions>
                    <TextBlock Height="400" Text="asdsadasdasdas" />
                    <WebView Height="400" x:Name="detailview"  Grid.Row="1" Source="http://www.microsoft.com" />
    
                </Grid>
    
            </ScrollViewer>

    2,我估计你说的问题是发生在鼠标处于WebView范围内,这个时候鼠标的事件都会被WebView所捕捉,并且被WebView处理掉,也就出现了你所说的滑动的时候TextBlock不动的情况。

    --James


    <THE CONTENT IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, WHETHER EXPRESS OR IMPLIED>
    Thanks
    MSDN Community Support

    Please remember to "Mark as Answer" the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.

    2014年6月18日 10:04
    版主
  • 这样写确实解决了问题,但是这样webview的内容很少的时候也出现滚动条,怎样获得webview内容的高度呢
    2014年6月19日 10:01
  • 这个略微有点难度,不过还是可以通过JavaScript注入的方式来获取。

    使用下面语句来获取:

                string[] arguments = { "document.documentElement.clientWidth.toString()" };
                var height = await webview.InvokeScriptAsync("eval", arguments);

    -James


    <THE CONTENT IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, WHETHER EXPRESS OR IMPLIED>
    Thanks
    MSDN Community Support

    Please remember to "Mark as Answer" the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.

    2014年6月20日 0:27
    版主
  • 用这个方法获得的高度比实际内容的高度小很多,为什么?
    2014年6月26日 6:58
  • 小很多?是固定的值还是几十或者几百px?


    <THE CONTENT IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, WHETHER EXPRESS OR IMPLIED>
    Thanks
    MSDN Community Support

    Please remember to "Mark as Answer" the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.

    2014年6月26日 7:00
    版主
  • 有的内容小几十像素,有的内容小几百上千像素
    2014年6月27日 3:13
  • 你好,

    我这里给你的代码有两个问题

    1,我们目的是为了获取高度,但是可能是我手误,写成了clientWidth,不知道你改了没有

    2,我昨天也看了一下这个问题,找到一个blog,感觉挺有用的: http://www.cnblogs.com/ConjurerYang/archive/2009/08/12/1544251.html, 你可以去看一下document.body.clientHeight 和 document.documentElement.clientHeight 的区别

    --James


    <THE CONTENT IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, WHETHER EXPRESS OR IMPLIED>
    Thanks
    MSDN Community Support

    Please remember to "Mark as Answer" the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.

    2014年6月27日 3:17
    版主