2014-03-07 72 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」

現在我可以滾動所有列表框,並且可以在滾動查看器中添加許多項目。

謝謝大家給予寶貴的提示..!

相關問題