頁面滾動條窗口8

Question

我的問題是我只有gridview的滾動條，但沒有整個頁面的滾動條。 滾動條應位於頁面底部，水平。 我試圖將滾動條添加到底部，但沒有出現在頁面上。 我還發布了圖片鏈接，以使您更好地理解。 http://i40.tinypic.com/2rm0389.png抱歉，我只有一個鏈接，因為我在這里發布圖片需要10個信譽，所以非常糟糕。 提前致謝。

這是我的代碼（XAML），而不是整個頁面，底部是我的滾動條：

    <!-- Back button and page title -->
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>
        <Button x:Name="backButton" Click="GoBack" IsEnabled="{Binding Frame.CanGoBack, ElementName=pageRoot}" Style="{StaticResource BackButtonStyle}"/>
        <TextBlock x:Name="pageTitle" Text="Профиль" Grid.Column="1" IsHitTestVisible="false" Style="{StaticResource PageHeaderTextStyle}"/>
    </Grid>
    <Grid  Width="Auto" Margin="0,5,0,0" Grid.Row="1"
        >
        <Grid.ColumnDefinitions>
            <ColumnDefinition/>
            <ColumnDefinition Width="0*"/>
        </Grid.ColumnDefinitions>
        <Image Source="{Binding ProfileImage}" Stretch="UniformToFill" HorizontalAlignment="Left" Height="270" Margin="165,46,0,0" VerticalAlignment="Top" Width="225"/>
        <TextBlock Text="{Binding Name}" HorizontalAlignment="Left" Margin="165,5,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Height="41" Width="252" FontSize="22" FontWeight="Bold"/>
        <GridView x:Name="GridViewToFrinedsPhoto" Margin="461,0,0,0"
                              ItemsSource="{Binding Mode=TwoWay, Source={StaticResource groupedItemsViewSource}}" 
                              ItemTemplate="{StaticResource MyPhotoItemTemplate}"
                              SelectionMode="Single"
                              IsItemClickEnabled="True"

                              IsSwipeEnabled="false" ItemClick="GridViewToFrinedsPhoto_ItemClick">
            <GridView.ItemsPanel>
                <ItemsPanelTemplate>
                    <VirtualizingStackPanel Orientation="Horizontal"/>
                </ItemsPanelTemplate>
            </GridView.ItemsPanel>
            <GridView.GroupStyle>
                <GroupStyle>
                    <GroupStyle.HeaderTemplate>
                        <DataTemplate>
                            <Grid Margin="1,0,0,6">
                                <Button
                                x:Name="ColumnBtn"
                                AutomationProperties.Name="Group Title" AutomationProperties.LabeledBy="{Binding Title}"
                                Style="{StaticResource TextPrimaryButtonStyle}" Click="Button_Click_1">
                                    <StackPanel Orientation="Horizontal">
                                        <TextBlock Text="{Binding Title}" Margin="3,-7,10,10" Style="{StaticResource GroupHeaderTextStyle}" />
                                        <TextBlock Text="{StaticResource ChevronGlyph}" FontFamily="Segoe UI Symbol" Margin="0,-7,0,10" Style="{StaticResource GroupHeaderTextStyle}"/>
                                    </StackPanel>
                                </Button>
                            </Grid>
                        </DataTemplate>
                    </GroupStyle.HeaderTemplate>
                    <GroupStyle.Panel>
                        <ItemsPanelTemplate>
                            <VariableSizedWrapGrid Orientation="Vertical" Margin="0,0,80,0"/>
                        </ItemsPanelTemplate>
                    </GroupStyle.Panel>
                </GroupStyle>
            </GridView.GroupStyle>

        </GridView>
        <ScrollBar VerticalAlignment="Bottom" HorizontalAlignment="Center" Width="Auto" RenderTransformOrigin="0.588,-0.824" Visibility="Visible" Margin="0,0,0,603" Orientation="Horizontal" /> -- HERE IS MY SCROLLBAR, DOESN'T WORK :[

    </Grid>
</Grid>

Answer 1

我的最終代碼，希望對其他人有所幫助，感謝MSDN的Vishal Kaushik，我使用了scrollviewer和grid容器

<common:LayoutAwarePage
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:VKClient.Views"
xmlns:common="using:VKClient.Common"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:vkControls="using:VKClient.VkControls"
xmlns:Controls="using:Callisto.Controls"
x:Name="pageRoot"
x:Class="VKClient.Views.ProfileViewPage"
DataContext="{Binding DefaultViewModel, RelativeSource={RelativeSource Mode=Self}}"
mc:Ignorable="d">

<common:LayoutAwarePage.Resources>

    <ResourceDictionary>
        <ResourceDictionary.MergedDictionaries>
            <ResourceDictionary 
              Source="../Resources/MyStyles.xaml"/>

        </ResourceDictionary.MergedDictionaries>
        <CollectionViewSource x:Name="groupedItemsViewSource"
                              Source="{Binding Items, Mode=TwoWay}"
                          IsSourceGrouped="True"
                          ItemsPath="Items"/>
    </ResourceDictionary>


</common:LayoutAwarePage.Resources>

<!--
    This grid acts as a root panel for the page that defines two rows:
    * Row 0 contains the back button and page title
    * Row 1 contains the rest of the page layout
-->

<common:LayoutAwarePage.BottomAppBar>
    <AppBar x:Name="BottomAppBar2" Padding="10,0,10,0">
        <Grid>
            <StackPanel Orientation="Horizontal" HorizontalAlignment="Left">
                <Button x:Name="MyProfileButton" Style="{StaticResource MyProfileAppBarButtonStyle}" Click="MyProfileClicked" />
                <Button x:Name="MyFriendsButton" Style="{StaticResource MyFriendsAppBarButtonStyle}" Click="MyFriendsClicked"/>
                <Button x:Name="MyPhotoButton" Style="{StaticResource MyPhotoAppBarButtonStyle}" Click="MyPhotoClicked" />
                <Button x:Name="MyVideosButton" Style="{StaticResource MyVideoesAppBarButtonStyle}" Click="MyVideoesClicked"/>
                <Button x:Name="MyAudioButton" Style="{StaticResource MyAudioAppBarButtonStyle}" Click="MyAudioClicked"/>
                <Button x:Name="MyGroupsButton" Style="{StaticResource MyGroupsAppBarButtonStyle}" Click="MyGroupsClicked"/>
           <!--     <Button x:Name="MyMessagesButton" Style="{StaticResource MyMessagesAppBarButtonStyle}" Click="MyMessagesClicked"/>
                <Button x:Name="MyNewsButton" Style="{StaticResource MyNewsAppBarButtonStyle}" Click="MyNewsClicked"

                /> -->

            </StackPanel>

        </Grid>
    </AppBar>
</common:LayoutAwarePage.BottomAppBar>

<Grid Style="{StaticResource LayoutRootStyle}" Background="{StaticResource AccentBrush}">
    <Grid.RowDefinitions>
        <RowDefinition Height="140"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>

    <!-- Horizontal scrolling grid used in most view states -->

    <!-- Vertical scrolling list only used when snapped -->


    <!-- Back button and page title -->
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>
        <Button x:Name="backButton" Click="GoBack" IsEnabled="{Binding Frame.CanGoBack, ElementName=pageRoot}" Style="{StaticResource BackButtonStyle}"/>
        <TextBlock x:Name="pageTitle" Text="Профиль" Grid.Column="1" IsHitTestVisible="false" Style="{StaticResource PageHeaderTextStyle}"/>
    </Grid>
    <Grid  Width="Auto" Margin="0,5,0,0" Grid.Row="1">
        <Grid.ColumnDefinitions>
            <ColumnDefinition/>
            <ColumnDefinition Width="0*"/>
        </Grid.ColumnDefinitions>
        <ScrollViewer HorizontalScrollMode="Auto" HorizontalScrollBarVisibility="Auto"
                      VerticalScrollMode="Disabled" VerticalScrollBarVisibility="Disabled">
            <Grid Width="Auto">
                <Controls:LiveTile HorizontalAlignment="Left" Margin="20,101,0,0" VerticalAlignment="Top" Width="109" Height="137" Background="LightGreen">
                    <Controls:LiveTile.ItemTemplate>
                        <DataTemplate>
                            <Grid Margin="5">
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="Auto" />
                                    <RowDefinition Height="*" />
                                    <RowDefinition Height="Auto" />
                                </Grid.RowDefinitions>

                                <Button Style="{StaticResource MyGroupsAppBarButtonStyle}" Margin="0,0,0,41" Grid.RowSpan="2"/>

                                <HyperlinkButton 
                                    HorizontalAlignment="Right"
                                    Foreground="LightGray"
                                    Click="GroupClicked" Height="129" Grid.RowSpan="2" Width="90" />
                            </Grid>
                        </DataTemplate>
                    </Controls:LiveTile.ItemTemplate>

                </Controls:LiveTile>
                <Controls:LiveTile HorizontalAlignment="Left" Margin="20,273,0,0" VerticalAlignment="Top" Width="109" Height="151" Background="Violet">
                    <Controls:LiveTile.ItemTemplate>
                        <DataTemplate>
                            <Grid Margin="5">
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="Auto" />
                                    <RowDefinition Height="*" />
                                    <RowDefinition Height="Auto" />
                                </Grid.RowDefinitions>
                                <Button Style="{StaticResource MyAudioAppBarButtonStyle}" Margin="0,0,0,41" Grid.RowSpan="2"/>

                                <HyperlinkButton
                                    HorizontalAlignment="Right"

                                    Foreground="LightGray"
                                    FontSize="9" FontWeight="Bold" Click="ProfileAudios" Height="139" Grid.RowSpan="2" Width="99" />
                            </Grid>
                        </DataTemplate>
                    </Controls:LiveTile.ItemTemplate>
                </Controls:LiveTile>
                <Image Source="{Binding ProfileImage}" Stretch="UniformToFill" HorizontalAlignment="Left" VerticalAlignment="Top" Height="270" Margin="165,46,0,0" Width="225"/>
                <TextBlock Text="{Binding Name}" Margin="165,5,0,577" TextWrapping="Wrap" HorizontalAlignment="Left" Height="41" Width="252" FontSize="22" FontWeight="Bold"/>
                <GridView x:Name="GridViewToFrinedsPhoto" Margin="461,0,0,0"
                    ItemsSource="{Binding Mode=TwoWay, Source={StaticResource groupedItemsViewSource}}" 
                    ItemTemplate="{StaticResource MyPhotoItemTemplate}"
                    SelectionMode="Single"
                    IsItemClickEnabled="True"

                    IsSwipeEnabled="false" ItemClick="GridViewToFrinedsPhoto_ItemClick">
                    <GridView.ItemsPanel>
                        <ItemsPanelTemplate>
                            <VirtualizingStackPanel Orientation="Horizontal"/>
                        </ItemsPanelTemplate>
                    </GridView.ItemsPanel>
                    <GridView.GroupStyle>
                        <GroupStyle>
                            <GroupStyle.HeaderTemplate>
                                <DataTemplate>
                                    <Grid Margin="1,0,0,6">
                                        <Button
                                            x:Name="ColumnBtn"
                                            AutomationProperties.Name="Group Title" AutomationProperties.LabeledBy="{Binding Title}"
                                            Style="{StaticResource TextPrimaryButtonStyle}" Click="Button_Click_1">
                                            <StackPanel Orientation="Horizontal">
                                                <TextBlock Text="{Binding Title}" Margin="3,-7,10,10" Style="{StaticResource GroupHeaderTextStyle}" />
                                                <TextBlock Text="{StaticResource ChevronGlyph}" FontFamily="Segoe UI Symbol" Margin="0,-7,0,10" Style="{StaticResource GroupHeaderTextStyle}"/>
                                            </StackPanel>
                                        </Button>
                                    </Grid>
                                </DataTemplate>
                            </GroupStyle.HeaderTemplate>
                            <GroupStyle.Panel>
                                <ItemsPanelTemplate>
                                    <VariableSizedWrapGrid Orientation="Vertical" Margin="0,0,80,0"/>
                                </ItemsPanelTemplate>
                            </GroupStyle.Panel>
                        </GroupStyle>
                    </GridView.GroupStyle>

                </GridView>
            </Grid>  
        </ScrollViewer>
    </Grid>



</Grid>