CODEWITHSUNDEEP
xamlwindows-phone-8longlistselector
Szymon Bartnik
Szymon Bartnik

Reputation: 83

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.

Upvotes: 2

Views: 204

Answers (2)

Szymon Bartnik
Szymon Bartnik

Reputation: 83

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

Upvotes: 2

Chhaya Sharma
Chhaya Sharma

Reputation: 464

Check this out

http://www.geekchamp.com/articles/wp7-longlistselector-in-depth--part2-data-binding-scenarios

The code snippet in the last will help.

<toolkit:LongListSelector.GroupItemsPanel>
   <ItemsPanelTemplate>
      <toolkit:WrapPanel/>
    </ItemsPanelTemplate>
 </toolkit:LongListSelector.GroupItemsPanel>

Upvotes: 1

Related Questions