如何为我的内容添加垂直滚动答案

【问题标题】：How to add vertical scrolling to my content如何为我的内容添加垂直滚动
【发布时间】：2014-01-19 08:04:16
【问题描述】：

谁能帮我在我的项目中执行垂直滚动？我无法这样做，有人可以帮助我启用它吗？这是我的 xaml 代码

    <Grid x:Name="LayoutRoot" Background="Black">
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="*"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>

    <!--TitlePanel contains the name of the application and page title-->
    <StackPanel Grid.Row="0" Margin="12,17,0,28">
        <TextBlock Text="Launchers" Grid.ColumnSpan="2" Margin="9,-12,-236,0" Style="{StaticResource PhoneTextTitle1Style}" Height="85" Foreground="White" FontWeight="ExtraBold" FontStretch="SemiCondensed"/>
    </StackPanel>

    <!--ContentPanel - place additional content here-->
    <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0"/>
        <toolkit:HubTile x:Name="GuidanceButton" HorizontalAlignment="Left"  
         VerticalAlignment="Top" Grid.Column="0" Grid.Row="1"  Background="#FF12AFC7" GroupTag="StaticHubTile" Tap="Button_gridbut_Click" Margin="30,10,0,0" Size="Medium" Source="/Images/sharemedium.png" />
        <toolkit:HubTile x:Name="JourneyButton" HorizontalAlignment="Left" VerticalAlignment="Top" Grid.Column="0" Grid.Row="1" Grid.RowSpan="2" Background="#FF12AFC7" GroupTag="StaticHubTile" Height="169" Width="169" Margin="72,230,-1,0" Grid.ColumnSpan="2" Tap="Button_gridbut_Click" Source="/Images/facebook.png"/>
        <toolkit:HubTile HorizontalAlignment="Right" VerticalAlignment="Top" Grid.Column="0" Grid.Row="2" Background="#FF298391" GroupTag="StaticHubTile" Size="Small" Margin="0,99,-1,0" Height="82" Width="82"/>
        <toolkit:HubTile HorizontalAlignment="Right" VerticalAlignment="Top" Grid.Column="1" Grid.Row="1" Background="#FF298391" GroupTag="StaticHubTile" Size="Small" Margin="0,45,148,0" Height="82" Width="82"/>
        <toolkit:HubTile x:Name="searchButton" HorizontalAlignment="Right" VerticalAlignment="Top" Grid.Column="1" Grid.Row="1" Background="#FF12AFC7" GroupTag="StaticHubTile" Size="Default" Margin="0,137,61,0" Grid.RowSpan="2" Height="169" Width="169" Tap="Button_gridbut_Click" Source="/Images/camera.png" />
        <toolkit:HubTile HorizontalAlignment="Right" VerticalAlignment="Top" Grid.Column="1" Grid.Row="2" Background="#FF298391" GroupTag="StaticHubTile" Size="Small" Margin="0,7,148,0" Height="82" Width="82"/>
        <toolkit:HubTile x:Name="routeButton1" HorizontalAlignment="Right" VerticalAlignment="Top" Grid.Column="1" Grid.Row="2" Background="#FF12AFC7" GroupTag="StaticHubTile" Size="Default" Margin="0,99,61,0" Grid.RowSpan="2" Height="169" Width="169" Tap="Button_gridbut_Click" Source="/Images/status.png" />
    </Grid>
</Grid>

【问题讨论】：

标签： c# xaml visual-studio-2012 windows-phone-8 vertical-scrolling

【解决方案1】：

如果您使用的是 winform，您可以这样做以设置具有垂直滚动功能的面板：

ScrollBar vScrollBar1 = new VScrollBar();
vScrollBar1.Dock = DockStyle.Right;
vScrollBar1.Scroll += (sender, e) => { panel1.VerticalScroll.Value = vScrollBar1.Value; };
panel1.Controls.Add(vScrollBar1);

另外你可以阅读这篇关于在面板中添加垂直滚动条的文章：

Vertical ScrollBar in C#

【讨论】：

我只想为我所有的hubtiles启用垂直滚动，因为在屏幕较小的手机中。该应用程序将无法提供足够的支持。那么，你能告诉我我可以在我的代码中执行哪些更改来满足需要吗？

【解决方案2】：

只需将滚动内容包装在滚动控件中，例如 ScrollViewer：

<!--ContentPanel - place additional content here-->
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0"/>
    <ScrollViewer>
        <toolkit:HubTile x:Name="GuidanceButton" HorizontalAlignment="Left"  
                         VerticalAlignment="Top" Grid.Column="0" Grid.Row="1"  Background="#FF12AFC7" GroupTag="StaticHubTile" Tap="Button_gridbut_Click" Margin="30,10,0,0" Size="Medium" Source="/Images/sharemedium.png" />
        <toolkit:HubTile x:Name="JourneyButton" HorizontalAlignment="Left" VerticalAlignment="Top" Grid.Column="0" Grid.Row="1" Grid.RowSpan="2" Background="#FF12AFC7" GroupTag="StaticHubTile" Height="169" Width="169" Margin="72,230,-1,0" Grid.ColumnSpan="2" Tap="Button_gridbut_Click" Source="/Images/facebook.png"/>
        <toolkit:HubTile HorizontalAlignment="Right" VerticalAlignment="Top" Grid.Column="0" Grid.Row="2" Background="#FF298391" GroupTag="StaticHubTile" Size="Small" Margin="0,99,-1,0" Height="82" Width="82"/>
        <toolkit:HubTile HorizontalAlignment="Right" VerticalAlignment="Top" Grid.Column="1" Grid.Row="1" Background="#FF298391" GroupTag="StaticHubTile" Size="Small" Margin="0,45,148,0" Height="82" Width="82"/>
        <toolkit:HubTile x:Name="searchButton" HorizontalAlignment="Right" VerticalAlignment="Top" Grid.Column="1" Grid.Row="1" Background="#FF12AFC7" GroupTag="StaticHubTile" Size="Default" Margin="0,137,61,0" Grid.RowSpan="2" Height="169" Width="169" Tap="Button_gridbut_Click" Source="/Images/camera.png" />
        <toolkit:HubTile HorizontalAlignment="Right" VerticalAlignment="Top" Grid.Column="1" Grid.Row="2" Background="#FF298391" GroupTag="StaticHubTile" Size="Small" Margin="0,7,148,0" Height="82" Width="82"/>
        <toolkit:HubTile x:Name="routeButton1" HorizontalAlignment="Right" VerticalAlignment="Top" Grid.Column="1" Grid.Row="2" Background="#FF12AFC7" GroupTag="StaticHubTile" Size="Default" Margin="0,99,61,0" Grid.RowSpan="2" Height="169" Width="169" Tap="Button_gridbut_Click" Source="/Images/status.png" />
    </ScrollViewer>
</Grid>

另外，删除最后一个 RowDefinition，因为您没有使用它，它会将您的视图分成两半。

【讨论】：