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

Question

我正在开发一个使用 longlistselector 的应用程序。我有两个代码库，一个用于 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}" />

特别感谢博客的作者。