2013-03-02 66 views
0

了一段時間的測試後LongListMultiSelector改變項目寬度我已經注意到,這使得它的元素寬一點,如果在他們總共不超過屏幕高度,如果他們做短一點。LongListMultiSelector取決於其數量

以下是示出這種行爲的兩個圖像:

LongListMultiSelector的高度超過屏幕並有2的和屏幕邊緣之間的空間。
enter image description here

LongListMultiSelector的高度不超過屏幕,2和屏幕邊緣之間沒有空間。
enter image description here

這裏是我的XAML:

<toolkit:LongListMultiSelector ItemsSource="{Binding}"> 
    <toolkit:LongListMultiSelector.ItemTemplate> 
     <DataTemplate> 
      <Grid Margin="0,0,24,0"> 
       <Grid.ColumnDefinitions> 
        <ColumnDefinition Width="*" /> 
        <ColumnDefinition Width="Auto" /> 
       </Grid.ColumnDefinitions> 

       <TextBlock FontSize="30" Text="1" Grid.Column="0" /> 
       <TextBlock FontSize="30" Text="2" Grid.Column="1" /> 
      </Grid> 
     </DataTemplate> 
    </toolkit:LongListMultiSelector.ItemTemplate> 
</toolkit:LongListMultiSelector> 

我怎樣才能改變這種行爲,使得項目的寬度是相同的所有的時間?

回答

1

這是因爲,當含量大於屏幕高度大的滾動條獲取添加。您可以通過修改LongListMultiSelector模板內的基礎LongListSelector樣式來移除滾動條。

<phone:PhoneApplicationPage.Resources> 
    <Style x:Key="LongListSelectorStyle1" TargetType="phone:LongListSelector"> 
     <Setter Property="Background" Value="Transparent"/> 
     <Setter Property="Foreground" Value="{StaticResource PhoneForegroundBrush}"/> 
     <Setter Property="Template"> 
      <Setter.Value> 
       <ControlTemplate TargetType="phone:LongListSelector"> 
        <Grid Background="{TemplateBinding Background}" d:DesignWidth="480" d:DesignHeight="800"> 
         <VisualStateManager.VisualStateGroups> 
          <VisualStateGroup x:Name="ScrollStates"> 
           <VisualStateGroup.Transitions> 
            <VisualTransition GeneratedDuration="00:00:00.5"/> 
           </VisualStateGroup.Transitions> 
           <VisualState x:Name="Scrolling"> 
            <Storyboard> 
             <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="VerticalScrollBar"/> 
            </Storyboard> 
           </VisualState> 
           <VisualState x:Name="NotScrolling"/> 
          </VisualStateGroup> 
         </VisualStateManager.VisualStateGroups> 

         <!-- We change the default template here so that the scrollbar appears ON TOP of the content --> 
         <Grid Margin="{TemplateBinding Padding}"> 
          <ViewportControl x:Name="ViewportControl" VerticalAlignment="Top" HorizontalContentAlignment="Stretch"/> 
          <ScrollBar x:Name="VerticalScrollBar" Opacity="0" Margin="4,0,4,0" Orientation="Vertical" HorizontalAlignment="Right"/> 
         </Grid> 
        </Grid> 
       </ControlTemplate> 
      </Setter.Value> 
     </Setter> 
    </Style> 

    <ControlTemplate x:Key="LongListMultiSelectorControlTemplate1" TargetType="toolkit:LongListMultiSelector"> 
     <phone:LongListSelector x:Name="InnerSelector" 
      GridCellSize="{TemplateBinding GridCellSize}" 
      GroupFooterTemplate="{TemplateBinding GroupFooterTemplate}" 
      GroupHeaderTemplate="{TemplateBinding GroupHeaderTemplate}" 
      HideEmptyGroups="{TemplateBinding HideEmptyGroups}" 
      IsGroupingEnabled="{TemplateBinding IsGroupingEnabled}" 
      ItemsSource="{TemplateBinding ItemsSource}" 
      JumpListStyle="{TemplateBinding JumpListStyle}" 
      ListFooter="{TemplateBinding ListFooter}" 
      ListFooterTemplate="{TemplateBinding ListFooterTemplate}" 
      ListHeader="{TemplateBinding ListHeader}" 
      ListHeaderTemplate="{TemplateBinding ListHeaderTemplate}" 
      Style="{StaticResource LongListSelectorStyle1}" 
      > 
      <phone:LongListSelector.ItemTemplate> 
       <DataTemplate> 
        <toolkit:LongListMultiSelectorItem 
         x:Name="LLSItem" 
         HorizontalContentAlignment="Stretch" 
         VerticalAlignment="Stretch" 
         Content="{Binding}" 
          /> 
       </DataTemplate> 
      </phone:LongListSelector.ItemTemplate> 
     </phone:LongListSelector> 
    </ControlTemplate> 
</phone:PhoneApplicationPage.Resources> 

<Grid x:Name="LayoutRoot"> 
    <!-- The width of the items in this LLMS will not change --> 
    <toolkit:LongListMultiSelector Template="{StaticResource LongListMultiSelectorControlTemplate1}"/> 
</Grid>