CODEWITHSUNDEEP
imagewindows-phone-8listboxwrappanel
amar.chandra
amar.chandra

Reputation: 35

arrange variable sized images in listbox in windows phone

i have used wrappanel to arrange images within a listbox but in my picture collection some images have different sizes. Some are horizontal and some are vertical. Due to different orientation, there is some spaces between the images which is not so good in vision. Can any body suggest me any way to remove these spaces?

thanks

enter image description here
i am using following code but still the problem is same...

<ListBox Name="lstBoxMyRecentPhotos"
                                         MaxHeight="650"
                                         Margin="0,8,0,0"
                                         SelectionChanged="lstImageList_SelectionChanged">
                                    <ListBox.ItemsPanel>
                                        <ItemsPanelTemplate>
                                            <toolkit1:VariableSizedWrapGrid ItemHeight="200" ItemWidth="230" />
                                        </ItemsPanelTemplate>
                                    </ListBox.ItemsPanel>

                                    <ListBox.ItemTemplate>
                                        <DataTemplate>

                                            <Border Name="brdr"
                                                    Margin="5"
                                                    BorderBrush="White"
                                                    BorderThickness="3">
                                                <Border.Background>
                                                    <ImageBrush ImageSource="Images/capsule_image_holder.png" Stretch="Uniform" />
                                                </Border.Background>
                                                <Image Width="{Binding width}"
                                                       Height="{Binding height}"
                                                       Hold="imgRecent_Hold"
                                                       Source="{Binding photoUrl}"
                                                       Stretch="UniformToFill">

                                                </Image>
                                            </Border>

                                        </DataTemplate>
                                    </ListBox.ItemTemplate>

                                </ListBox>

Upvotes: 1

Views: 137

Answers (2)

SonofNun
SonofNun

Reputation: 467

I don't know which toolkit you are using for the VariableSizedWrapGrid, but are you sure that you need to set its ItemHeight? What happens if you don't?

I'm personally using Telerik's controls to give me a WrapGrid. If you have access to their controls, I can share an example.

Here's what my implementation looks like:

Upvotes: 1

Igor Ralic
Igor Ralic

Reputation: 15006

Two ways

  1. Make the image always stretch UniformToFill and use hardcoded size - that way it will uniformly fill the space that it's been given and all the photos will use the given space nicely

  2. Use VariableSizedWrapGrid.

Provides a grid-style layout panel where each tile/cell can be variable size based on content. Similar to the WinRT VariableSizedWrapGrid.

Upvotes: 1

Related Questions