2011-02-02 56 views
3

我有一個列表框控件,使用具有文本塊和圖像的用戶控件添加項目。無法滾動WP7中的列表框

<UserControl 
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
mc:Ignorable="d" 
FontFamily="{StaticResource PhoneFontFamilyNormal}" 
FontSize="{StaticResource PhoneFontSizeNormal}" 
Foreground="{StaticResource PhoneForegroundBrush}" 
d:DesignHeight="52" d:DesignWidth="480"> 

<Grid x:Name="LayoutRoot" Background="{StaticResource PhoneChromeBrush}"> 
    <TextBlock Height="30" HorizontalAlignment="Left" Margin="12,10,0,0" Name="Index_itemtext" Text="" VerticalAlignment="Top" Width="145" /> 
    <Image Height="34" HorizontalAlignment="Right" Margin="0,6,55,0" Source="blue_triangle.png" Name="IndexList_itemImage" Stretch="Uniform" VerticalAlignment="Top" Width="66" /> 
    <Line Height="10" HorizontalAlignment="Left" Margin="0,38,0,0" Name="seperator_line" Stroke="White" StrokeThickness="2" VerticalAlignment="Top" Width="480" Stretch="Fill" Fill="#FFF5E9E9" /> 
</Grid> 

而且列表框XAML:

<Grid x:Name="LayoutRoot" Background="Transparent"> 
    <Grid.RowDefinitions> 
     <RowDefinition Height="768"/> 
     <RowDefinition Height="0*" /> 
    </Grid.RowDefinitions> 

    <Grid Opacity="5" VerticalAlignment="Top" Grid.Row="0"> 
     <Grid.Background> 
      <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"> 
       <GradientStop Color="#FF282828" Offset="0.366" /> 
       <GradientStop Color="#FE848484" Offset="1" /> 
      </LinearGradientBrush> 
     </Grid.Background> 

     <Button Content="Top" Grid.Column="0" HorizontalAlignment="Left" Grid.Row="0" VerticalAlignment="Top" Height="72" Name="Top_btn" Width="114" BorderBrush="{x:Null}" Click="topbutton_Click" Style="{StaticResource ButtonStyle1}" >    
      <Button.Background> 
       <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"> 
        <GradientStop Color="#FF908585" Offset="0.11" /> 
        <GradientStop Color="#FF342E2E" Offset="1" /> 
       </LinearGradientBrush> 
      </Button.Background> 
     </Button> 

     <Button Content="Back" Height="72" Grid.Column="1" Grid.Row="0" Name="Back_btn" Width="104" HorizontalAlignment="Right" HorizontalContentAlignment="Center" Margin="0" BorderBrush="{x:Null}" Click="backbutton_Click" Style="{StaticResource ButtonStyle1}" > 
      <Button.Background> 
       <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"> 
        <GradientStop Color="#FF908585" Offset="0.11" /> 
        <GradientStop Color="#FF342E2E" Offset="1" /> 
       </LinearGradientBrush> 
      </Button.Background> 
     </Button> 
    </Grid> 

      <ListBox Name="Index_list" ScrollViewer.VerticalScrollBarVisibility="Visible" VerticalContentAlignment="Top" SelectionChanged="on_selection" Margin="0,78,0,0" Height="Auto"> 
     <ListBoxItem Style="{StaticResource ListBoxItemStyle}"> 


     </ListBoxItem> 
    </ListBox> 



</Grid> 

現在,當我添加項目到列表中,垂直滾動不走,直到列表框的最後一個項目/底部不可到達的,即它回到第一排,從最後一項選擇停止:

for (int i = 0; i < gridSize; i++) 
      { 
       listbox_item list_item = new listbox_item(); 
       list_item.Index_itemtext.FontSize = 25; 
       list_item.Index_itemtext.Text = index[i]; 
       list_item.IndexList_itemImage.Source = new BitmapImage(new Uri("some.png", UriKind.Relative)); 
       list_item.seperator_line.StrokeThickness = 5; 
       list_item.Margin = new Thickness(0, 0, 0, 5); 
       Index_list.Items.Add(list_item); 
      } 

也列表行在橫向模式下不佔用設備的寬度,而要求是行項目隨着設備寬度的變化而變寬。有人可以幫助解決這些問題嗎?

回答

3

把你迄今在示例項目中展示的代碼放在一個示例項目中,我沒有遇到滾動描述的問題,所以我假設頁面上還有其他元素以及ListBox正在影響佈局和滾動。

如上所述,定位更改的問題與固定寬度元素有關,您可以使用星號寬度列來解決該問題,如在Windows Phone開發人員博客中討論的Automatic Rotation Support or Automatic Multi-Orientation Layout Support for Windows Phone

另一點值得做的是,除非你確實有涉及您已經創建了listbox_itemUserControl這個項目的一些邏輯,你可以通過指定ListBoxItemTemplate財產實行佈局,然後你可以簡單地創建數據對象列表並將它們綁定到ItemsSource屬性。例如。

<ListBox x:Name="Index_list" 
     HorizontalContentAlignment="Stretch" 
     Margin="0,78,0,0" 
     SelectionChanged="on_selection" 
     VerticalContentAlignment="Top"> 
    <ListBox.ItemTemplate> 
    <DataTemplate> 
     <Grid Background="{StaticResource PhoneChromeBrush}"> 
      <!-- Column definitions here. --> 
      <TextBlock Height="30" HorizontalAlignment="Left" Text="{Binding Label}" VerticalAlignment="Top" /> 
      <Image Height="34" HorizontalAlignment="Right" Margin="0,6,55,0" Source="{Binding ImagePath}" Stretch="Uniform" VerticalAlignment="Top" Width="66" /> 
      <Line Height="10" HorizontalAlignment="Stretch" Margin="0,38,0,0" Stroke="White" StrokeThickness="2" VerticalAlignment="Top" Stretch="Fill" Fill="#FFF5E9E9" /> 
     </Grid> 
    </DataTemplate> 
    </ListBox.ItemTemplate> 
</ListBox> 
0

關於橫向問題 - 您正在設置所有UserControl元素的Width屬性 - 因此它們不會自動縮放。

關於滾動問題,您能否重新解釋這個問題 - 對不起,但我不確定我是否理解這個問題 - 「垂直滾動直到最後一項纔會執行,即它返回到第一行,項目選擇「對我沒有意義 - 對不起

+0

對不起 - 仍然不清楚。 「不能滾動」是什麼意思?你的意思是「用戶不能滾動列表框」?或者你的意思是「我想以編程方式選擇當前顯示的項目」? – Stuart 2011-02-02 08:50:06

+0

我的意思是,當用戶滾動列表來拉動列表的最後一項時,它不會到達列表中的最後一項。 – Shaireen 2011-02-02 08:50:54

0

方法ListBox.ScrollIntoView允許您滾動列表框來查看特定項目。另外,如果您選擇了WP7列表框,它會自動滾動到視圖中。

關於與行對你的問題,你需要設置ListBoxItemsStyle如下:

<Style x:Key="ListBoxItemStyle" TargetType="ListBoxItem"> 
     <Setter Property="HorizontalContentAlignment" Value="Stretch"/> 
     <Setter Property="HorizontalAlignment" Value="Stretch"/> 
    </Style> 

,並刪除你的模板裏面硬編碼的寬度。