CODEWITHSUNDEEP
xamlwidthwindows-phone-8
src091
src091

Reputation: 2847

LongListMultiSelector changes items width depending on their quantity

After testing LongListMultiSelector for a while I've noticed that it makes it's elements a bit wider if in total they don't exceed the screen height and a little shorter if they do.

Here are two images that illustrate this behavior:

LongListMultiSelector's height exceeds screen and there's a space between 2's and screen edge.
enter image description here

LongListMultiSelector's height does not exceed screen and there's no space between 2's and screen edge.
enter image description here

Here's my 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>

How can I change this behavior such that items' width will be the same all the time?

Upvotes: 0

Views: 670

Answers (1)

pantaloons
pantaloons

Reputation: 932

This is because a scrollbar is getting added when the content is larger than the screen height. You can remove the scrollbar by modifying the style of underlying LongListSelector, inside the template of the LongListMultiSelector.

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

Upvotes: 1

Related Questions