LongListSelector Windows Phone 8 中不必要的右填充

Question

我正在开发一个使用 longlistselector 的应用程序。我有两个代码库 1 用于 wp7，另一个用于 wp8，但我的长列表选择器在我创建的项目分隔符中提供了正确的填充，并且相同的代码在 wp7 上运行良好。

我的 longlistselctor 代码是

 <controls:LongListSelector Margin="30,30,30,30"   VerticalAlignment="Stretch" HorizontalAlignment="Stretch" ScrollViewer.VerticalScrollBarVisibility="Visible"  x:Name="listofintroductions"
                Background="White" Visibility="{Binding Hotintrovisibility, Mode=TwoWay, UpdateSourceTrigger=Default}" ItemsSource="{Binding introductions, Mode=TwoWay, UpdateSourceTrigger=Default}">
                <controls:LongListSelector.ListHeaderTemplate>
                    <DataTemplate>
                        <Grid Margin="0,0,0,0" Height="100">
                            <StackPanel Orientation="Horizontal">
                                <Image Source="/Images/flame.png" Stretch="Uniform" VerticalAlignment="Center" HorizontalAlignment="Left" Height="45" Width="40" Margin="26.5,0,0,0"/>
                                <TextBlock Text="Hot Introductions" Foreground="#404041" FontFamily="/Fonts/HelveticaNeue.ttf#Helvetica Neue"  FontSize="25.5" FontWeight="Normal" VerticalAlignment="Center" HorizontalAlignment="Left" Margin="15,0,0,0"/>
                            </StackPanel>
                            <Grid Height="2" Background="#E6E6E6" Width="480" VerticalAlignment="Bottom"/>
                        </Grid>
                    </DataTemplate>
                </controls:LongListSelector.ListHeaderTemplate>
                <controls:LongListSelector.ListFooterTemplate>
                    <DataTemplate>
                        <Grid x:Name="viewallintros" Tap="viewallintros_Tap" VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
                            <TextBlock Text="View all potential intros" FontFamily="/Fonts/HelveticaNeue.ttf#Helvetica Neue"  FontSize="25" Padding="20" VerticalAlignment="Center" HorizontalAlignment="Center" Foreground="#404041"/>
                        </Grid>
                    </DataTemplate>
                </controls:LongListSelector.ListFooterTemplate>
                <controls:LongListSelector.ItemTemplate>
                    <DataTemplate>
                        <Grid x:Name="hotintrotemplate" Tap="hotintrotemplate_Tap" >
                            <Grid.RowDefinitions>
                                <RowDefinition Height="*"/>
                                <RowDefinition Height="*"/>
                                <RowDefinition Height="*"/>
                                <RowDefinition Height="Auto"/>
                                <RowDefinition Height="22"/>
                            </Grid.RowDefinitions>
                            <Grid Grid.Row="0" VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="2*"/>
                                    <ColumnDefinition Width="*"/>
                                </Grid.ColumnDefinitions>
                                <Grid Grid.Column="0">
                                    <TextBlock x:Name="nameintro" Text="{Binding name}" FontSize="25.5" FontFamily="/Fonts/HelveticaNeue-Medium.ttf#Helvetica Neue" Foreground="#4EBEC7" FontWeight="Bold" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Padding="30,19,0,3"/>
                                    <TextBlock x:Name="introid" Text="{Binding Contactid}" Height="0" Width="0"/>
                                </Grid>
                                <Grid Grid.Column="1">
                                    <TextBlock Text="{Binding number_introduction}" FontWeight="Bold" FontSize="25.5" Foreground="#83D96F" FontFamily="/Fonts/HelveticaNeue.ttf#Helvetica Neue" HorizontalAlignment="Stretch" TextAlignment="Right" VerticalAlignment="Stretch" Padding="0,19,30,3"/>
                                </Grid>
                            </Grid>
                            <Grid Grid.Row="1">
                                <TextBlock Text="{Binding title}" FontWeight="Bold" FontFamily="/Fonts/HelveticaNeue.ttf#Helvetica Neue" TextWrapping="NoWrap" FontSize="19.5" Foreground="#404041" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Padding="30,3,30,3"/>
                            </Grid>
                            <Grid Grid.Row="2">
                                <TextBlock Text="{Binding Company_name}" FontWeight="Bold" TextWrapping="NoWrap" FontSize="18" FontFamily="/Fonts/HelveticaNeue.ttf#Helvetica Neue" Foreground="#d5d5d5" TextAlignment="Left" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Padding="30,3,30,3"/>
                            </Grid>
                            <Grid Grid.Row="3" Margin="34,0,34,0">
                                <StackPanel Orientation="Horizontal" VerticalAlignment="Center" HorizontalAlignment="Left">
                                    <Image Source="/Images/icon_linkedin@2x.png" Stretch="Uniform" Visibility="{Binding linkdenicon}" Height="20" Margin="0,9,10,9" />
                                    <Image Source="/Images/icon_twitter@2x.png" Stretch="Uniform" Visibility="{Binding twittericon}" Height="20" Margin="0,9,10,9" />
                                    <Image Source="/Images/icon_facebook@2x.png" Stretch="Uniform" Visibility="{Binding facebookicon}" Height="20" Margin="0,9,10,9" />
                                    <Image Source="/Images/icon_web_link@2x.png" Stretch="Uniform" Visibility="{Binding googleplusicon}" Height="20" Margin="0,9,10,9" />
                                </StackPanel>
                            </Grid>
                            <Grid Grid.Row="4" Height="2" Width="480" Background="#E6E6E6" Margin="-30,20,-30,0"/>
                        </Grid>
                    </DataTemplate>
                </controls:LongListSelector.ItemTemplate>
            </controls:LongListSelector>

如您所见，我制作了一个高度为 2 像素的网格作为项目分隔符，但它看起来像这样......

您可以在项目分隔符中看到正确的填充。我无法理解为什么会这样。

Answer 1

我遇到了与上述相同的问题。我注意到只有当列表中的项目多于屏幕上显示的项目时才会出现此问题。我发现是 VerticalScrollBar 造成了这个问题。当不需要 VerticalScrollBar（列表中没有足够的项目）时，滚动条“折叠”并且项目正确对齐到右侧。 所以..您会认为将ScrollViewer.VerticalScrollBarVisibility 设置为Collapsed 可以解决问题，对吧？好吧，Collapsed 出于某种原因不是一个选择。 Hidden 或 Disabled 之类的东西也可以解决问题吗？太糟糕了。那也行不通。

在网上搜索我发现了一个相当不错的解决方法。 以下博客解释了该问题和解决方法：http://y2bd.me/blog/2013/10/31/fixing-the-long-list-selectors-scrollbar-spacing-issue/

由于链接可能会被删除，我也会在此处复制解决方案。

该博客的作者为LongListSelector 创建了一个样式，该样式从选择器中“提取”了 VerticalScrollBar，并让 ScrollBar“悬停”在列表上方。

因此，在您的 ResourceDictionary 中添加以下样式：

<Style x:Key="LLSFloatingScrollbarStyle"
           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>
                <Grid Margin="{TemplateBinding Padding}">

                    <ViewportControl x:Name="ViewportControl"
                                     HorizontalContentAlignment="Stretch"
                                     VerticalAlignment="Top" />

                    <ScrollBar x:Name="VerticalScrollBar"
                               Margin="4,0,-12,0"
                               Opacity="0"
                               HorizontalAlignment="Right"
                               Orientation="Vertical" />
                </Grid>
            </Grid>
        </ControlTemplate>
    </Setter.Value>
</Setter>

最后在 LongListSelector 上添加如下样式引用，就可以开始了！

<phone:LongListSelector Style="{StaticResource LLSFloatingScrollbarStyle}" />

特别感谢博客作者。

Answer 2

我解决了这个问题，只需要更改 longlistselector 的样式并删除为垂直滚动条提供的空间。