如何在Windows Phone 7中添加多个列表框

时间：2014-03-07 13:13:11

标签： c# windows-phone-7

在我的Windows Phone 7应用程序中，我必须添加多个列表框。我的要求是用户可以滚动页面查看所有项目。但我不知道如何在一个页面中添加多个列表框。我试过这样的。

  <Grid x:Name="testUIContainer" Grid.Row="1" Margin="2,0,2,0">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>
        <ScrollViewer VerticalScrollBarVisibility="Visible" 
              MaxWidth="477">
            <ScrollViewer.Content>
                <StackPanel Margin="0, 30, 0, 0 ">
                    <Rectangle  Height="50" Margin="0,0,0,0" Name="Header" Stroke="Black" StrokeThickness="1" Width="480" Grid.ColumnSpan="2" Fill="#FF01A1DB" />

                    <ListBox Grid.Row="0" ItemsSource="{Binding StudentDetails,Mode=TwoWay}" Margin="0,0,0,0" Name="listBox1" Width="476" BorderBrush="#00410D0D">
                        <ListBox.ItemTemplate>
                            <DataTemplate>
                                <Border BorderBrush="Gray" Padding="5" BorderThickness="1">
                                    <StackPanel Orientation="Horizontal" >
                                        <Border BorderBrush="Wheat" BorderThickness="1">
                                            <Image  Name="ListPersonImage" Source="{Binding PersonImage}" Height="100" Width="100" Stretch="Uniform" Margin="10,0,0,0"/>
                                        </Border>
                                        <TextBlock Text="{Binding FirstName}" Name="firstName" Width="200" Foreground="White" Margin="10,10,0,0" FontWeight="SemiBold" FontSize="22"  />
                                        <TextBlock Text="{Binding LastName}" Name="lastName" Width="200" Foreground="White" Margin="-200,50,0,0" FontWeight="SemiBold" FontSize="22"  />
                                        <TextBlock Text="{Binding Age}" Name="age" Width="200" Foreground="White" Margin="10,10,0,0" FontWeight="SemiBold" FontSize="22"  />

                                    </StackPanel>
                                </Border>
                            </DataTemplate>
                        </ListBox.ItemTemplate>
                    </ListBox>

                    <ListBox Grid.Row="1" ItemsSource="{Binding StudentDetails,Mode=TwoWay}" HorizontalAlignment="Left" Margin="0,0,0,0" Name="listBoxes1" Width="476" BorderBrush="#00410D0D">
                        <ListBox.ItemTemplate>
                            <DataTemplate>
                                <Border BorderBrush="Gray" Padding="5" BorderThickness="1">
                                    <StackPanel Orientation="Horizontal" >
                                        <Border BorderBrush="Wheat" BorderThickness="1">
                                            <Image  Name="ListPersonImage" Source="{Binding PersonImage}" Height="100" Width="100" Stretch="Uniform" Margin="10,0,0,0"/>
                                        </Border>
                                        <TextBlock Text="{Binding FirstName}" Name="firstName" Width="200" Foreground="White" Margin="10,10,0,0" FontWeight="SemiBold" FontSize="22"  />
                                        <TextBlock Text="{Binding LastName}" Name="lastName" Width="200" Foreground="White" Margin="-200,50,0,0" FontWeight="SemiBold" FontSize="22"  />
                                        <TextBlock Text="{Binding Age}" Name="age" Width="200" Foreground="White" Margin="10,10,0,0" FontWeight="SemiBold" FontSize="22"  />

                                    </StackPanel>
                                </Border>
                            </DataTemplate>
                        </ListBox.ItemTemplate>
                    </ListBox>

                </StackPanel>
            </ScrollViewer.Content>
        </ScrollViewer>
    </Grid>
</Grid>

但在这里我看不到第二个列表框。这仅是示例。我必须在页面中添加4到5个列表框。请让我知道如何在一个页面中添加多个列表框。或者还有其他选项来显示项目列表。

我的要求： - enter image description here

3 个答案:

答案 0 :(得分：1)

为每个列表框设置属性：

ScrollViewer.VerticalScrollBarVisibility="Disabled"

答案 1 :(得分：0)

我看到了两个选项：

您可以在后端合并/连接两个列表，然后在视图中显示它。

var result = list1.Concat(list2);

您可以使用其他用户界面。例如，PivotItem可能适用于您的情况。用户可以通过水平拇指移动从ListBox切换到另一个。

答案 2 :(得分：0)

最后我找到了答案.. !! 

 <Grid Background="Transparent"  x:Name="testUIContainer" Margin="2,0,2,0">
    <Grid.RowDefinitions>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>

    <ScrollViewer Grid.Row="0" VerticalScrollBarVisibility="Visible">
        <ScrollViewer.Content>
            <StackPanel>
                <!--Name of the Person-->
                <Border BorderBrush="Chocolate" Padding="5" BorderThickness="2">
                    <StackPanel>
                        <Image Height="100" Width="100" Margin="-360,0,0,0" Source="/NewExample;component/Images/icon_man.png" />
                        <TextBlock Text="Name of the Person" Margin="50,-120,0,0" Width="300" Height="50" FontWeight="Bold" FontSize="26" />

                    </StackPanel>
                </Border>
                <!--Horizaondal list Box-->
                <ListBox Height="120" Margin="0,0,0,6" Name="imageListBox" ScrollViewer.VerticalScrollBarVisibility="Disabled" ScrollViewer.HorizontalScrollBarVisibility="Visible" Width="476" ItemsSource="{Binding StudentDetails, Mode=TwoWay}">
                    <ListBox.ItemTemplate>
                        <DataTemplate>
                            <Border BorderBrush="Gray" Padding="5" BorderThickness="1">
                                <StackPanel Orientation="Horizontal">
                                    <Border BorderBrush="Wheat" BorderThickness="1" Padding="5">
                                        <Image  Name="ListPersonImage" Source="{Binding PersonImage}" Height="100" Width="100" Stretch="Uniform" Margin="10,0,0,0"/>
                                    </Border>
                                </StackPanel>
                            </Border>
                        </DataTemplate>
                    </ListBox.ItemTemplate>
                    <ListBox.ItemsPanel >
                        <ItemsPanelTemplate>
                            <StackPanel Orientation="Horizontal"></StackPanel>
                        </ItemsPanelTemplate>
                    </ListBox.ItemsPanel>
                </ListBox>

                <!--List Box one.-->
                <ListBox  ItemsSource="{Binding StudentDetails,Mode=TwoWay}" Margin="0,0,0,0" Name="listBox1" Width="476" BorderBrush="#00410D0D" ScrollViewer.VerticalScrollBarVisibility="Disabled">
                    <ListBox.ItemTemplate>
                        <DataTemplate>
                            <Border BorderBrush="Gray" Padding="5" BorderThickness="1">
                                <StackPanel Orientation="Horizontal" >
                                    <Border BorderBrush="Wheat" BorderThickness="1">
                                        <Image  Name="ListPersonImage" Source="{Binding PersonImage}" Height="100" Width="100" Stretch="Uniform" Margin="10,0,0,0"/>
                                    </Border>
                                    <TextBlock Text="{Binding FirstName}" Name="firstName" Width="200" Foreground="White" Margin="10,10,0,0" FontWeight="SemiBold" FontSize="22"  />
                                    <TextBlock Text="{Binding LastName}" Name="lastName" Width="200" Foreground="White" Margin="-200,50,0,0" FontWeight="SemiBold" FontSize="22"  />
                                    <TextBlock Text="{Binding Age}" Name="age" Width="200" Foreground="White" Margin="10,10,0,0" FontWeight="SemiBold" FontSize="22"  />
                                </StackPanel>
                            </Border>
                        </DataTemplate>
                    </ListBox.ItemTemplate>
                </ListBox>


                <!--List Box two.-->
                <ListBox ItemsSource="{Binding StudentDetails,Mode=TwoWay}" HorizontalAlignment="Left" Margin="0,0,0,0" Name="listBoxes1" Width="476" BorderBrush="#00410D0D" ScrollViewer.VerticalScrollBarVisibility="Disabled">
                    <ListBox.ItemTemplate>
                        <DataTemplate>
                            <Border BorderBrush="Blue" Padding="5" BorderThickness="1">
                                <StackPanel Orientation="Horizontal" >
                                    <Border BorderBrush="Blue" BorderThickness="1">
                                        <Image  Name="ListPersonImage" Source="{Binding PersonImage}" Height="100" Width="100" Stretch="Uniform" Margin="10,0,0,0"/>
                                    </Border>
                                    <TextBlock Text="{Binding FirstName}" Name="firstName" Width="200" Foreground="White" Margin="10,10,0,0" FontWeight="SemiBold" FontSize="22"  />
                                    <TextBlock Text="{Binding LastName}" Name="lastName" Width="200" Foreground="White" Margin="-200,50,0,0" FontWeight="SemiBold" FontSize="22"  />
                                    <TextBlock Text="{Binding Age}" Name="age" Width="200" Foreground="White" Margin="10,10,0,0" FontWeight="SemiBold" FontSize="22"  />
                                </StackPanel>
                            </Border>
                        </DataTemplate>
                    </ListBox.ItemTemplate>
                </ListBox>
                <!--Similar Apps/Images.-->
                <Image Source="/NewExample;component/Images/Hydrangeas.jpg" Margin="0,0,0,0" />


            </StackPanel>
        </ScrollViewer.Content>
    </ScrollViewer>
</Grid>

我已禁用列表框ScrollViewer.VerticalScrollBarVisibility="Disabled" 这里只有一行定义。 ScrollViewer将在Grid.Row =“0”

中

现在我可以滚动所有列表框，并可以在滚动查看器中添加许多项目。

感谢所有人提供宝贵的建议.. !!

相关问题
最新问题