2013-03-02 68 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>