Question

我正在研究Windows Phone 7开发和我希望创建的应用程序需要创建一个视图（实际上是一个不同宽度的矩形/区域的网格），它们可以垂直和水平滚动，但第一列是锁定的从任何水平滚动。

为了尝试和详细说明，第一个“水平锁定”区域是固定宽度，并且第二个区域中的每个“行”都有一个“徽标”。第二个区域可以水平和垂直滚动...垂直滚动将两个区域一起滚动，因此徽标始终与第二个区域中的数据行相关联。

我以为我可以嵌入多个scrollviewer控件，但这似乎不太可能。

有没有人有任何想法如何或如果可能？

示例：

+-----+--------------------------------+
|  1  |    |          |      |         |
+-----+--------------------------------+
|  2  |         |         |      |     |
+-----+--------------------------------+
|  3  |  |          |     |    |       |
+-----+--------------------------------+
|  4  |         |         |        |   |
+-----+--------------------------------+
|  5  |     |   |     |          |     |
+-----+--------------------------------+

因此，当整个屏幕垂直滚动时，上面的编号部分始终与右侧的其余内容保持对齐。水平滚动仅影响右侧区域。

Answer 1

试试这个XAML代码。它使用了两个ScrollViewer，对我有用......

<phone:PhoneApplicationPage 
    x:Class="SamplePhoneApp.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="768"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    SupportedOrientations="Portrait" Orientation="Portrait"
    shell:SystemTray.IsVisible="True">

    <ScrollViewer ScrollViewer.VerticalScrollBarVisibility="Visible" ScrollViewer.HorizontalScrollBarVisibility="Disabled">
        <Grid x:Name="LayoutRoot" Background="Transparent">
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="200" />
                <ColumnDefinition Width="*" />
            </Grid.ColumnDefinitions>

            <Border Grid.Column="0" Grid.Row="0" Height="200" Background="DarkSeaGreen">
                <TextBlock Text="1." Height="200" />
            </Border>
            <Border Grid.Column="0" Grid.Row="1" Height="200" Background="Magenta">
                <TextBlock Text="2." Height="200" />
            </Border>
            <Border Grid.Column="0" Grid.Row="2" Height="200" Background="Bisque">
                <TextBlock Text="3." Height="200" />
            </Border>
            <Border Grid.Column="0" Grid.Row="3" Height="200" Background="BurlyWood">
                <TextBlock Text="4." Height="200" />
            </Border>
            <Border Grid.Column="0" Grid.Row="4" Height="200" Background="CadetBlue">
                <TextBlock Text="5." Height="200" />
            </Border>

            <ScrollViewer Grid.Row="0" Grid.RowSpan="5" Grid.Column="1" 
                      ScrollViewer.VerticalScrollBarVisibility="Disabled"
                      ScrollViewer.HorizontalScrollBarVisibility="Visible">
                <StackPanel>
                    <StackPanel Height="200" Orientation="Horizontal">
                        <Border Height="200" Width="300" Background="Red">
                            <TextBlock Text="abc" />
                        </Border>
                        <Border Height="200" Width="150" Background="Aqua">
                            <TextBlock Text="abc" />
                        </Border>
                        <Border Height="200" Width="250" Background="Cornsilk">
                            <TextBlock Text="abc" />
                        </Border>
                    </StackPanel>

                    <StackPanel Height="200" Orientation="Horizontal">
                        <Border Height="200" Width="140" Background="DarkCyan">
                            <TextBlock Text="abc" />
                        </Border>
                        <Border Height="200" Width="300" Background="CornflowerBlue">
                            <TextBlock Text="abc" />
                        </Border>
                        <Border Height="200" Width="190" Background="DarkOrange">
                            <TextBlock Text="abc" />
                        </Border>
                    </StackPanel>

                    <StackPanel Height="200" Orientation="Horizontal">
                        <Border Height="200" Width="200" Background="Red">
                            <TextBlock Text="abc" />
                        </Border>
                        <Border Height="200" Width="250" Background="Aqua">
                            <TextBlock Text="abc" />
                        </Border>
                        <Border Height="200" Width="250" Background="Cornsilk">
                            <TextBlock Text="abc" />
                        </Border>
                    </StackPanel>

                    <StackPanel Height="200" Orientation="Horizontal">
                        <Border Height="200" Width="140" Background="DarkCyan">
                            <TextBlock Text="abc" />
                        </Border>
                        <Border Height="200" Width="400" Background="CornflowerBlue">
                            <TextBlock Text="abc" />
                        </Border>
                        <Border Height="200" Width="190" Background="DarkOrange">
                            <TextBlock Text="abc" />
                        </Border>
                    </StackPanel>

                    <StackPanel Height="200" Orientation="Horizontal">
                        <Border Height="200" Width="200" Background="Red">
                            <TextBlock Text="abc" />
                        </Border>
                        <Border Height="200" Width="150" Background="Aqua">
                            <TextBlock Text="abc" />
                        </Border>
                        <Border Height="200" Width="300" Background="Cornsilk">
                            <TextBlock Text="abc" />
                        </Border>
                    </StackPanel>
                </StackPanel>
            </ScrollViewer>
        </Grid>
    </ScrollViewer>
</phone:PhoneApplicationPage>

如何在Windows Phone 7上创建拆分滚动区域

1 个答案: