none
在Grid外的ScrollViewer不能滚动 RRS feed

  • 问题

  • 代码如下
    <ScrollViewer VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Visible" Width="1280" Height="100">
            <Grid Name="theGrid" Width="1280" Height="100">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="200"/>
                    <ColumnDefinition Width="200"/>
                    <ColumnDefinition Width="200"/>
                    <ColumnDefinition Width="200"/>
                    <ColumnDefinition Width="200"/>
                    <ColumnDefinition Width="200"/>
                    <ColumnDefinition Width="200"/>
                    <ColumnDefinition Width="200"/>
                    <ColumnDefinition Width="200"/>
                    <ColumnDefinition Width="200"/>
                </Grid.ColumnDefinitions>
                <TextBlock Grid.Column="0" Text="100"/>
                <TextBlock Grid.Column="1" Text="200"/>
                <TextBlock Grid.Column="2" Text="300"/>
                <TextBlock Grid.Column="3" Text="400"/>
                <TextBlock Grid.Column="4" Text="500"/>
                <TextBlock Grid.Column="5" Text="600"/>
                <TextBlock Grid.Column="6" Text="700"/>
                <TextBlock Grid.Column="7" Text="800"/>
                <TextBlock Grid.Column="8" Text="900"/>
                <TextBlock Grid.Column="9" Text="1000"/>
                </Grid>
         </ScrollViewer>
    Grid的里面内容的宽度肯定大于1280, 为什么Scrollviewer拉不动?
    2012年7月24日 6:20

答案

  • Hi,

    问题出在你限制了Grid中的宽度1280。ScrollViewer里面包含的内容是Grid,而ScrollViewer的宽度是1280,Grid的宽度同样是1280,因此ScrollViewer就拉不动,因为显示的内容与定义的宽度是一样的。

    Grid比较侧重布局,如果想横向显示一行数据我推荐使用GridView,GridView里面已经实现了ScrollViewer如果超出范围会自动实现滚动条,你可以像下面这样写:

    <GridView Name="theGrid" Width="1280" Height="100">
                <GridView.ItemContainerStyle>
                    <Style TargetType="GridViewItem">
                        <Setter Property="Width" Value="200" />
                    </Style>
                </GridView.ItemContainerStyle>
                <TextBlock Text="100"/>
                <TextBlock Text="200"/>
                <TextBlock Text="300"/>
                <TextBlock Text="400"/>
                <TextBlock Text="500"/>
                <TextBlock Text="600"/>
                <TextBlock Text="700"/>
                <TextBlock Text="800"/>
                <TextBlock Text="900"/>
                <TextBlock Text="1000"/>
            </GridView>

    GridView的文档:

    http://msdn.microsoft.com/en-us/library/windows/apps/windows.ui.xaml.controls.gridview.aspx

    Hope this helps

     

    Aaron Xue [MSFT]
    MSDN Community Support | Feedback to us
    Get or Request Code Sample from Microsoft
    Please remember to mark the replies as answers if they help and unmark them if they provide no help.


    2012年7月25日 1:36
    版主
  • Hi,

    我找到了问题,问题在于有一个Path有命名"SelectedEarmark"并且上面状态改变的时候会改变这个Path的Fill属性的值,如果你注释掉它的话,找不到这个命名的对象当然会出错。我的建议是,对于原模板最好不要做删除操作,将它的Opacity设为0,之后下面添加控件来达到目的。


    Aaron Xue [MSFT]
    MSDN Community Support | Feedback to us
    Get or Request Code Sample from Microsoft
    Please remember to mark the replies as answers if they help and unmark them if they provide no help.

    2012年7月25日 9:40
    版主

全部回复

  • Hi,

    问题出在你限制了Grid中的宽度1280。ScrollViewer里面包含的内容是Grid,而ScrollViewer的宽度是1280,Grid的宽度同样是1280,因此ScrollViewer就拉不动,因为显示的内容与定义的宽度是一样的。

    Grid比较侧重布局,如果想横向显示一行数据我推荐使用GridView,GridView里面已经实现了ScrollViewer如果超出范围会自动实现滚动条,你可以像下面这样写:

    <GridView Name="theGrid" Width="1280" Height="100">
                <GridView.ItemContainerStyle>
                    <Style TargetType="GridViewItem">
                        <Setter Property="Width" Value="200" />
                    </Style>
                </GridView.ItemContainerStyle>
                <TextBlock Text="100"/>
                <TextBlock Text="200"/>
                <TextBlock Text="300"/>
                <TextBlock Text="400"/>
                <TextBlock Text="500"/>
                <TextBlock Text="600"/>
                <TextBlock Text="700"/>
                <TextBlock Text="800"/>
                <TextBlock Text="900"/>
                <TextBlock Text="1000"/>
            </GridView>

    GridView的文档:

    http://msdn.microsoft.com/en-us/library/windows/apps/windows.ui.xaml.controls.gridview.aspx

    Hope this helps

     

    Aaron Xue [MSFT]
    MSDN Community Support | Feedback to us
    Get or Request Code Sample from Microsoft
    Please remember to mark the replies as answers if they help and unmark them if they provide no help.


    2012年7月25日 1:36
    版主
  • 谢谢, Ok了

    另外我想问一下GridView, 当一个item被选中的时候, 会有一个勾,

    如果我想改变勾的位置, 并且把这个勾改成其他图, 比如用个png图片代替

    该怎么做呢?

    2012年7月25日 2:05
  • Hi,

    Metro中控制一些特殊状态时候的表现使用的是VisualState。具体的做法可以参考这个FAQ。

    http://social.msdn.microsoft.com/Forums/zh-CN/metroappzhcn/thread/67b1f1c1-ff3f-490d-9b53-f2118ae82090

    输出GridViewItem的模板找到被选中时候的效果,然后换乘你想要的效果。

    Hope this helps


    Aaron Xue [MSFT]
    MSDN Community Support | Feedback to us
    Get or Request Code Sample from Microsoft
    Please remember to mark the replies as answers if they help and unmark them if they provide no help.

    2012年7月25日 4:44
    版主
  • 谢谢,我从Blend导出GridView的ItemContainerStyle, 大致看了下内容,修改了下面这段代码

    <Border x:Name="SelectedCheckMarkOuter" HorizontalAlignment="Right" IsHitTestVisible="False" Margin="4" Padding="{TemplateBinding BorderThickness}" VerticalAlignment="Top"> <Grid x:Name="SelectedCheckMark" Height="20" Opacity="0" Width="30"> <!-- <Path x:Name="SelectedEarmark" Data="M0,0 L40,0 L40,40 z" Fill="{StaticResource ListViewItemSelectedBackgroundThemeBrush}" Stretch="Fill"/> <Path Data="F1 M133.1,17.9 L137.2,13.2 L144.6,19.6 L156.4,5.8 L161.2,9.9 L145.6,28.4 z" Fill="{StaticResource ListViewItemCheckThemeBrush}" FlowDirection="LeftToRight" HorizontalAlignment="Right" Height="13" Margin="0,5.5,5.5,0" Stretch="Fill" VerticalAlignment="Top" Width="15"/>--> <Grid.Background> <ImageBrush ImageSource="Assets/check.png"/> </Grid.Background> </Grid> </Border>

    我把前面的2个path注释掉了,改成下面的代码

    <Grid.Background>
              <ImageBrush ImageSource="Assets/check.png"/>
    </Grid.Background>

    但是运行的时候, 当鼠标移动到GridView上面的时候, 程序自动退出了。。。。

    能帮我看看原因么?

    2012年7月25日 6:37
  • Hi,

    我找到了问题,问题在于有一个Path有命名"SelectedEarmark"并且上面状态改变的时候会改变这个Path的Fill属性的值,如果你注释掉它的话,找不到这个命名的对象当然会出错。我的建议是,对于原模板最好不要做删除操作,将它的Opacity设为0,之后下面添加控件来达到目的。


    Aaron Xue [MSFT]
    MSDN Community Support | Feedback to us
    Get or Request Code Sample from Microsoft
    Please remember to mark the replies as answers if they help and unmark them if they provide no help.

    2012年7月25日 9:40
    版主
  • 终于解决了, 谢谢
    2012年7月26日 1:44