CODEWITHSUNDEEP
c#xamlwindows-phone-8
Hubert Solecki
Hubert Solecki

Reputation: 2761

How to add an image control and a list control to a pivot item?

I'm totaly new to Windows Phone devlopment and decided to start with a windows phone 8 pivot app. So I have a page with a pivot on it, containing two pivot items. On one of them, I would like to add an image control and a ListBox control just below the image, should I use a grid or a stackpanel ? Does somebody knows how to do that ?

Upvotes: 1

Views: 384

Answers (2)

Balasubramani M
Balasubramani M

Reputation: 8338

Starting from scratch, It's very simple. First just add a pivot into Grid(LayoutRoot Grid).

Inside Pivot Item, Create a new grid because, you going to put two controls into it, only one content can be initialized by PivotItem so create a MainGrid.

Separate the MainGrid into two rows as you can see from the code. In first row, place your Image Control.

In second row, place a new grid (ListboxGrid), set new Grid in Row 1 and put a listbox inside it. I would suggest you not to use stackpanel in this case because, Grid extends its height according to the listbox items but stackpanel doesn't. So it will be difficult for you to scroll in ListBox items when you use StackPanel. And here you go with the code,

<Grid x:Name="LayoutRoot" Background="Transparent">
    <phone:Pivot >
        <phone:PivotItem Header="item1">
            <Grid x:Name="MainGrid">
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="*"/>
                </Grid.RowDefinitions>
                <Image Grid.Row="0" Height="300"/>
                <Grid Grid.Row="1" x:Name="ListboxGrid">
                    <ListBox>
                        <ListBoxItem >
                            <TextBlock Text="list1"/>
                        </ListBoxItem>
                        <ListBoxItem >
                            <TextBlock Text="list2"/>
                        </ListBoxItem>
                    </ListBox>
                </Grid>
            </Grid>
        </phone:PivotItem>
    </phone:Pivot>
</Grid>

Upvotes: 1

Chubosaurus Software
Chubosaurus Software

Reputation: 8161

I would use both Hubert. Get use to using the XAML designer by clicking on the xaml file in Visual Studio.

The way I look at it, a Grid is a basically your HTML Table with a few differences. So use this to align your elements exactly.

A stack panel will collapse items when each child item visibility is set to Visibility="Collapsed". 

<Grid x:Name="LayoutRoot" Background="Transparent">
        <!--Pivot Control-->
        <phone:Pivot Title="MY APPLICATION">
            <phone:PivotItem Header="first">
                <Grid>
                    <StackPanel>
                        <Image></Image>
                        <ListBox></ListBox>
                    </StackPanel>
                </Grid>
            </phone:PivotItem>
        </phone:Pivot>
</Grid>

Upvotes: 1

Related Questions