Search code examples
windows-phone-7dynamicstylesstackpanel

Dynamic Stackpanel Style wp7


I've created a listbox with 4 pictures for every item. It is working fast and its all sweet and dandy, but I don't know how to do this dinamicaly depending from screen resolution.

So currently I have 4 pictures in a row 90x90 + 5 margin, but what if the screen resolution isn't big enough to support 4 pictures only 3? For example if I tilt the phone, and I've red they are going to introduce 320×480 resolution as well.

    <ListBox Height="646" HorizontalAlignment="Left" Margin="6,19,0,0" Name="MainListbox" VerticalAlignment="Top" Width="444" ScrollViewer.VerticalScrollBarVisibility="Visible" >
        <ListBox.ItemsPanel>
            <ItemsPanelTemplate>
                <VirtualizingStackPanel Orientation="Vertical"/>
            </ItemsPanelTemplate>
        </ListBox.ItemsPanel>
    </ListBox>

    private void GetDataToBind(List<string> images, int spliter)
    {

        for (int i = spliter; i < images.Count; i += spliter)
        {
            StackPanel temp = new StackPanel();
            temp.Orientation = System.Windows.Controls.Orientation.Horizontal;
            for (int j = i - spliter; j < i && j < images.Count + spliter; j++)                  
            {
                Grid tempGrid = new Grid();
                Rectangle temprect = new Rectangle();
                temprect.Fill = new SolidColorBrush(Colors.White);
                temprect.Height = 90;
                temprect.Width = 90;
                tempGrid.Children.Add(temprect);
                tempGrid.Children.Add(GetImageSourceFromString(images[j]));
                temp.Children.Add(tempGrid);

            }
            MainListbox.Items.Add(temp);
        }

    }

int splitter determinates how many pictures are in a row.

Solutions I'm not interested wrap panel, LazyListbox. Does someone know a way to solve this with Dynamic style or something elegant?

Best Regards


Solution

  • As Ku6opr says, all devices have a specific screen resolution of 480x800. This is set to change with the introduction of lower cost devices in the future, but they will also have a rigidly defined resolution (320x480).

    In effect what you will have is 2 screen formats to work with. It would then be a simple matter to interrogate the device for the resolution, and style accordingly. It doesn't need to be dynamic, though - you can set up 2 styles (one per resolution) and then apply the styling according to the resolution reported.