2014-03-07 69 views
0

在我的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

+0

你不能滚动到第二个'ListBox'或它不在吗?对'ListBox'也设置'Grid.Row =“0”'没有效果。 'ScrollViewer'是'Grid'的直接子节点,'ListBox'是'ScrollViewer'的子节点'StackPanel'的子节点。在你的情况下,整个'ScrollViewer'将在第一行 – dkozl

+0

ListBox *是一种显示项目列表的方式,并且通常每个列表需要**一个**列表框。 –

+0

@ user2845346,因为你设置了'Height =“Auto”'你的'ScrollViewer'被赋予尽可能多的空间,因为它需要增长以容纳所有的孩子,因此你将看不到滚动条。 – dkozl

回答

1

对于每一个列表框设置属性:

ScrollViewer.VerticalScrollBarVisibility="Disabled" 
0

我看到2个选项:

可以合并/ CONCAT在后台两个列表,然后在视图中显示它。

var result = list1.Concat(list2); 

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

+0

嗨@aloisdg。感谢您的回复。并感谢提示。 PivotItem。这对我来说是新的。我会学习,而不是我会执行。你能否为我提供** PivotItem **的任何样本?请。 –

+0

检查谷歌'pivotitem示例'或检查[本文](http://blogs.msdn.com/b/stephanc/archive/2010/05/09/windows-phone-7-pivot-control-sample。aspx)或者只是在VS中打开一个新的模板PivotPage。 – aloisdg

+0

谢谢aloisdg .. !! –

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”

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

谢谢大家给予宝贵的提示..!

相关问题