LongListMultiSelector根据数量更改项目宽度

Question

经过一段时间的LongListMultiSelector测试后，我注意到它的元素有点宽，如果它们总和不超过屏幕高度，如果它们没有那么短。

以下两张图片说明了这种行为：

LongListMultiSelector的高度超过了屏幕，并且在2和屏幕边缘之间有一个空格

LongListMultiSelector的高度不超过屏幕，2和屏幕边缘之间没有空格。

这是我的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>  

如何更改此行为，以使项目的宽度始终相同？

Answer 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>