c# – LongListSelector Windows Phone 8中的不一致的右边填充

发布时间：2020-12-16 00:10:46 所属栏目：百科来源：网络整理

导读：我正在开发一个使用longlistselector的应用程序.我有两个代码库1用于wp7而另一个代码用于wp8但是我的长列表选择器在我创建的项目分隔符中给出了正确的填充,并且相同的代码在wp7上工作正常. 我的longlistselctor代码是 controls:LongListSelector Margin="30,

我正在开发一个使用longlistselector的应用程序.我有两个代码库1用于wp7而另一个代码用于wp8但是我的长列表选择器在我创建的项目分隔符中给出了正确的填充,并且相同的代码在wp7上工作正常.

我的longlistselctor代码是

<controls:LongListSelector Margin="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,UpdateSourceTrigger=Default}">
                <controls:LongListSelector.ListHeaderTemplate>
                    <DataTemplate>
                        <Grid Margin="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"/>
                                <TextBlock Text="Hot Introductions" Foreground="#404041" FontFamily="/Fonts/HelveticaNeue.ttf#Helvetica Neue"  FontSize="25.5" FontWeight="Normal" VerticalAlignment="Center" HorizontalAlignment="Left" Margin="15,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,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,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,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"/>
                            </Grid>
                            <Grid Grid.Row="3" Margin="34,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" />
                                    <Image Source="/Images/icon_facebook@2x.png" Stretch="Uniform" Visibility="{Binding facebookicon}" Height="20" Margin="0,9" />
                                    <Image Source="/Images/icon_web_link@2x.png" Stretch="Uniform" Visibility="{Binding googleplusicon}" Height="20" Margin="0,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像素的网格作为项目分隔符,但它看起来像这样……

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

解决方法

我遇到了与上述相同的问题.我注意到只有当列表中的项目多于屏幕上显示的项目时才会出现此问题.我发现创建该问题的是VerticalScrollBar.如果不需要VerticalScrollBar(列表中没有足够的项目),滚动条将“折叠”,并且项目将正确对齐.
所以..你会认为将ScrollViewer.VerticalScrollBarVisibility设置为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,-12,0"
                               Opacity="0"
                               HorizontalAlignment="Right"
                               Orientation="Vertical" />
                </Grid>
            </Grid>
        </ControlTemplate>
    </Setter.Value>
</Setter>

最后在LongListSelector上添加样式参考,如下所示,你准备好了！

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

特别感谢和博客作者的信誉.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!