xamllayoutwindows-phone-8windows-phonelistbox-control

Cannot see UI elements in listbox


I have a page that has a ListBox. Whose items are not getting visible.But my ListBox is visible , I have checked it by changing its Background Color. Here is my ListBox :-

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
            <ListBox Name="friend_list"  Margin="0,10,0,0">
                <ListBox.ItemTemplate>
                    <DataTemplate>
                        <StackPanel>
                            <Grid Width="{Binding ElementName=friend_list,Path=ActualWidth}">
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="Auto"/>
                                    <ColumnDefinition Width="Auto"/>
                                </Grid.ColumnDefinitions>
                                <StackPanel Grid.Column="1"  HorizontalAlignment="Left" Margin="0,30,80,10">
                                    <TextBlock  TextWrapping="Wrap" Text="Diana Jayson" Name="username" FontWeight="Bold" FontSize="40" Margin="12,0,0,0" Foreground="#FF4D6082" Width="250" />
                                    <TextBlock Text="Diana Jayson" Name="location" FontSize="40" Margin="20,0,0,0" Foreground="#FF4D6082"/>
                                    <TextBlock Text="Diana Jayson" Name="sate" FontSize="40" Margin="20,0,0,0" Foreground="#FF4D6082"/>
                                </StackPanel>

                                <Image  Grid.Column="0" Source="Assets\profile-placeholder.gif" Width="160" Height="160" Stretch="Fill" HorizontalAlignment="Left" Margin="10,0,0,0">
                                    <Image.Clip>
                                        <EllipseGeometry  Center="80,80" RadiusX="80" RadiusY="80" />
                                    </Image.Clip>
                                </Image>
                            </Grid>
                        </StackPanel>
                    </DataTemplate>
                </ListBox.ItemTemplate>
            </ListBox>
        </Grid>

Solution

  • you will have to bind the list of element to the listbox to display its member ..

    like this....

    <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
                <ListBox Name="friend_list"  ItemSource="{Binding yourlistname}" Margin="0,10,0,0">
                    <ListBox.ItemTemplate>
                        <DataTemplate>
                            <StackPanel>
                                <Grid Width="{Binding ElementName=friend_list,Path=ActualWidth}">
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="Auto"/>
                                        <ColumnDefinition Width="Auto"/>
                                    </Grid.ColumnDefinitions>
                                    <StackPanel Grid.Column="1"  HorizontalAlignment="Left" Margin="0,30,80,10">
                                        <TextBlock  TextWrapping="Wrap" Text="Diana Jayson" Name="username" FontWeight="Bold" FontSize="40" Margin="12,0,0,0" Foreground="#FF4D6082" Width="250" />
                                        <TextBlock Text="Diana Jayson" Name="location" FontSize="40" Margin="20,0,0,0" Foreground="#FF4D6082"/>
                                        <TextBlock Text="Diana Jayson" Name="sate" FontSize="40" Margin="20,0,0,0" Foreground="#FF4D6082"/>
                                    </StackPanel>
    
                                    <Image  Grid.Column="0" Source="Assets\profile-placeholder.gif" Width="160" Height="160" Stretch="Fill" HorizontalAlignment="Left" Margin="10,0,0,0">
                                        <Image.Clip>
                                            <EllipseGeometry  Center="80,80" RadiusX="80" RadiusY="80" />
                                        </Image.Clip>
                                    </Image>
                                </Grid>
                            </StackPanel>
                        </DataTemplate>
                    </ListBox.ItemTemplate>
                </ListBox>
            </Grid>
    

    and in the template you can directly bind the ui with the properties which are inside your list object..

    I hope this might help...