Arrange Icon

Question

Hi In Stackpanel we can arrange anything(picture etc..) either horizontally or vertically.. What to do If i want to arrange first horizontally then in next line again horizontally. As we see icon in folders. Plz help.......

Answer 1

Hi there,

I would do the following if you are binding to a collection of items:

<ListBox ItemsSource="{Binding ListOfItems}">

<ListBox.ItemTemplate>

<DataTemplate>

<StackPanel Orientation="Horizontal">

<TextBlock Text="{Binding Value1}"/>

<TextBlock Text="{Binding Value2}"/>

</StackPanel>

</DataTemplate>

</ListBox.ItemTemplate>

</ListBox>

or if you have a set number of rows you want to display:

<StackPanel>

<StackPanel Orientation="Horizontal">

<TextBlock Text="Values"/>

<TextBlock Text="Values"/>

</StackPanel>

<StackPanel Orientation="Horizontal">

<TextBlock Text="Values"/>

<TextBlock Text="Values"/>

</StackPanel>

<StackPanel Orientation="Horizontal">

<TextBlock Text="Values"/>

<TextBlock Text="Values"/>

</StackPanel>

</StackPanel>

Hope this helps.

Alex

Answer 2

Thanku for replying.. Sorry If i am asking very much silly question...

To make an Image gallery:
first I giving name to List box.

    <ListBox x:Name="L1" ItemsSource="{Binding ListOfItems}">
                <ListBox.ItemTemplate>
                    <DataTemplate>
                        <StackPanel Orientation="Horizontal">
                            <Image Source="{Binding Source}" Name="{Binding Name}" ></Image>
                            <Image Source="{Binding Source}" Name="{Binding Name}" ></Image>
                          
                        </StackPanel>
                    </DataTemplate>
                </ListBox.ItemTemplate>
            </ListBox>


 

    MediaLibrary library = new MediaLibrary();
            var ChkPics = library.Pictures;

              List<Image> LImage = new List<Image>();
              foreach (var pic in ChkPics)
              {
                  BitmapImage bitmapImage = new BitmapImage();

                  bitmapImage.SetSource(pic.GetImage());

                  Image img = new Image();

                  img.Name = pic.Name;
                  img.Source = bitmapImage;
               
                  img.Height = 150;
                  img.Width = 200;

                  LImage.Add(img);
              }
              Listbox1.ItemsSource = LImage;


It shows item vertically ..how to bind plz reply in detail.. In your example what is value1 and value2

Answer 3

Hi,

Ok I understand a little more of what you are wanting to do. I would do the following:

1. Download or Use NU-Get to add a reference to the Windows Phone 7 Silverlight Toolkit
2. Add a namespace reference to the toolkit in you markup as below:

xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"

1. Add the following code to your page:

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">

<ListBox x:Name="MediaList">

<ListBox.ItemsPanel>

<ItemsPanelTemplate>

<toolkit:WrapPanel/>

</ItemsPanelTemplate>

</ListBox.ItemsPanel>

<ListBox.ItemTemplate>

<DataTemplate>

<Image Width="200" Height="150" Source="{Binding}"/>

</DataTemplate>

</ListBox.ItemTemplate>

</ListBox>

</Grid>

1. Then set a list of items as the listbox's ItemsSource as below:

MediaLList.ItemsSource = imageSources;

Where imageSources is a list of uri's as strings point to your images.

I hope this makes sense. Any questions just ask.

Alex

Answer 4

hey Blounty Thankyou very much.. U gave me very Polite and detailed answer.. From this I came to know new things that In this toolkit we have datepicker etc.. Thanks again my code is working...
A Little change for other viewer is that

MediaLList.ItemsSource = imageSources; 

here imageSources i have taken list of images