locked
how to bind a collection to a DataTemplate RRS feed

  • Question

  • Greetings,

    I have a stackpanel which holds a datatemplate as shown below.

                        <StackPanel Orientation="Vertical" Grid.Row="1" Margin="10,5">
                            <StackPanel.Resources>
                                <DataTemplate x:Key="dtNames">
                                    <Grid>
                                        <StackPanel Orientation="Horizontal" >
                                            <HyperlinkButton Content="{Binding abc}" NavigateUri="{Binding name}" MaxWidth="250" TargetName="_blank"/>
                                            <TextBlock Text="{Binding First_Name}" TextDecorations="Underline" FontWeight="Bold" TextWrapping="Wrap" MaxWidth="300" Foreground="#FF3C4B60"/>
                                            <TextBlock Text="{Binding Last_Name}" TextDecorations="Underline" FontWeight="Bold" TextWrapping="Wrap" MaxWidth="150" Foreground="#FF3C4B60"/>
                                            <TextBlock Text="{Binding M_Name}" TextDecorations="Underline" FontWeight="Bold" TextWrapping="Wrap" MaxWidth="150" Foreground="#FF3C4B60"/>
                                            <Button Content="Delete" Style="{StaticResource DeleteButtonStyle}" MaxWidth="50"/>
                                        </StackPanel>
                                    </Grid>
                                </DataTemplate>
                            </StackPanel.Resources>
                        </StackPanel>



    I also have a data colection and would like to bind to its datatemplate.  how would I do it in the code behind?

    Friday, February 4, 2011 5:29 PM

Answers

  • Hi. A stack panel is made for elements layout, not for displaying data items. Change that (outer) stack panel to an items control or better a list box and you can bind to your collection. Like this:

    <ListBox x:Name="MyListBox" Grid.Row="1" Margin="10,5">
                            <ListBox.ItemTemplate>
                                <DataTemplate>
                                    <Grid>
                                        <StackPanel Orientation="Horizontal" >
                                            <HyperlinkButton Content="{Binding abc}" NavigateUri="{Binding name}" MaxWidth="250" TargetName="_blank"/>
                                            <TextBlock Text="{Binding First_Name}" TextDecorations="Underline" FontWeight="Bold" TextWrapping="Wrap" MaxWidth="300" Foreground="#FF3C4B60"/>
                                            <TextBlock Text="{Binding Last_Name}" TextDecorations="Underline" FontWeight="Bold" TextWrapping="Wrap" MaxWidth="150" Foreground="#FF3C4B60"/>
                                            <TextBlock Text="{Binding M_Name}" TextDecorations="Underline" FontWeight="Bold" TextWrapping="Wrap" MaxWidth="150" Foreground="#FF3C4B60"/>
                                            <Button Content="Delete" Style="{StaticResource DeleteButtonStyle}" MaxWidth="50"/>
                                        </StackPanel>
                                    </Grid>
                                </DataTemplate>
                            </ListBox.ItemTemplate>
                        </ListBox>


    You can then bind in XAMl (<ListBox ItemsSource={Binding CollectionProperty} ...) or in code behind:

    MyListBox.ItemsSource = myCollection;

    HTH


    Friday, February 4, 2011 7:07 PM

All replies

  • Hi. A stack panel is made for elements layout, not for displaying data items. Change that (outer) stack panel to an items control or better a list box and you can bind to your collection. Like this:

    <ListBox x:Name="MyListBox" Grid.Row="1" Margin="10,5">
                            <ListBox.ItemTemplate>
                                <DataTemplate>
                                    <Grid>
                                        <StackPanel Orientation="Horizontal" >
                                            <HyperlinkButton Content="{Binding abc}" NavigateUri="{Binding name}" MaxWidth="250" TargetName="_blank"/>
                                            <TextBlock Text="{Binding First_Name}" TextDecorations="Underline" FontWeight="Bold" TextWrapping="Wrap" MaxWidth="300" Foreground="#FF3C4B60"/>
                                            <TextBlock Text="{Binding Last_Name}" TextDecorations="Underline" FontWeight="Bold" TextWrapping="Wrap" MaxWidth="150" Foreground="#FF3C4B60"/>
                                            <TextBlock Text="{Binding M_Name}" TextDecorations="Underline" FontWeight="Bold" TextWrapping="Wrap" MaxWidth="150" Foreground="#FF3C4B60"/>
                                            <Button Content="Delete" Style="{StaticResource DeleteButtonStyle}" MaxWidth="50"/>
                                        </StackPanel>
                                    </Grid>
                                </DataTemplate>
                            </ListBox.ItemTemplate>
                        </ListBox>


    You can then bind in XAMl (<ListBox ItemsSource={Binding CollectionProperty} ...) or in code behind:

    MyListBox.ItemsSource = myCollection;

    HTH


    Friday, February 4, 2011 7:07 PM
  • Thank you.  

    Saturday, February 5, 2011 12:16 AM