Search code examples
xamlwindows-phone-8longlistselector

Items of LongListMultiSelector horizontally

For several hours I have tried to change my LongListMultiSelector from WP toolkit to show its items horizontally like on the screenshot below (from Panorama Sample).

http://i.imgur.com/HGHPOsq.png

I even tried with changing its Template but with no possitive effects.

Thanks a lot for any help.

Solution

  • Ok. I finally did it. If somebody will have the same problem here is my solution.

    I always try to avoid solving layout problems in WP by code behind way but exceptionally I did it this way.

    My XAML:

    <Grid Margin="10 -30 0 0" Name="GridWithLLMS">
    <toolkit:LongListMultiSelector LayoutMode="Grid"
        ItemsSource="{Binding Items}"
        GridCellSize="255,190"
        toolkit:TiltEffect.IsTiltEnabled="True"
        EnforceIsSelectionEnabled="True"
        Margin="0"
    />
</Grid>

    My code:

    public AddNewTrainingPage()
{
    InitializeComponent();

    SetWidthOfGridWithExercisesDependingOnQuantityOfItems();
    DataContext = App.Db;
}

private void SetWidthOfGridWithExercisesDependingOnQuantityOfItems()
{
    ExercisesListGrid.Width = ((App.Db.Items.Count / 3) + 1) * 270;
}

    Where:

    • 3 is number of rows I want to have
    • 255 is width of 1 LongListMultiSelectorItem (+ potential margin width)

    Of course I assume my LongListMultiSelector's items won't change. If you want to make it working with dynamic collection of elements you should bind the width of LongListMultiSelector to the property with quantity of your collection's items in your ViewModel