none
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.......
    Tuesday, February 22, 2011 9:24 AM

Answers

  • 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
    Tuesday, February 22, 2011 10:56 AM

All replies

  • 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
    Tuesday, February 22, 2011 9:35 AM
  • 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

    Tuesday, February 22, 2011 9:59 AM
  • 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
    Tuesday, February 22, 2011 10:56 AM
  • 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
    Tuesday, February 22, 2011 11:23 AM