Search code examples
wpfdata-bindingdatatemplate

WPF ContentPresenter only showing first item in list


I am trying to create a WPF application where I have a StackPanel that shows a list of accounts. There is an Account object in the code behind for each account, stored in a List structure. I want to databind this to my WPF, but I don't want a listbox.

Instead, I defined a template for how each account summary should appear. I then want to stack these in a StackPanel and call it a day.

The problem is that the Data Binding only takes the first item from the list and that's it. How to I bind it so that this effectively creates a little stacked list of nicely formatted chunks of data?

Here is the relevant WPF code:

<StackPanel Name="sp_AccountList" Margin="0,0,0,0" VerticalAlignment="Top">
    <StackPanel.Resources>
    <svc:AccountBalanceColorConverter x:Key="accountColorConverter" />
    <Style x:Key="AccountSummaryBackgroundGradient" TargetType="{x:Type StackPanel}">
    <!-- nice formatting code here -->
    </Style>
    <Style x:Key="AccountSummaryNameStyle" TargetType="{x:Type TextBlock}">
        <Setter Property="Padding" Value="10,0,0,0" />
        <Setter Property="FontSize" Value="18" />
        <Setter Property="Height" Value="20" />
        <Setter Property="FontFamily" Value="Cambria" />
        <Setter Property="Foreground" Value="White" />
        <Setter Property="Background" Value="Transparent" />
    </Style>
    <Style x:Key="AccountSummaryBalanceStyle" TargetType="{x:Type TextBlock}">
        <Setter Property="Padding" Value="10,0,0,0" />
        <Setter Property="FontSize" Value="14" />
        <Setter Property="Height" Value="20" />
        <Setter Property="FontFamily" Value="Cambria" />
        <Setter Property="Background" Value="Transparent" />
    </Style>                    
    <ObjectDataProvider x:Key="accounts"
                        ObjectType="{x:Type svc:AccountService}"
                        MethodName="ListAccounts" />
    <DataTemplate x:Key="AccountSummaryLayout">
    <StackPanel Orientation="Vertical" Style="{StaticResource AccountSummaryBackgroundGradient}">
        <TextBlock Text="{Binding Path=Name}" Style="{StaticResource AccountSummaryNameStyle}" />
        <StackPanel Orientation="Horizontal">
            <TextBlock Foreground="{Binding Path=TotalAccountBalance, Converter={StaticResource accountColorConverter} }" Text="{Binding Path=TotalAccountBalance, Mode=OneWay}" Style="{StaticResource AccountSummaryBalanceStyle}" />
            <TextBlock Foreground="{Binding Path=AvailableAccountBalance, Converter={StaticResource accountColorConverter} }" Text="{Binding Path=AvailableAccountBalance, Mode=OneWay}" Style="{StaticResource AccountSummaryBalanceStyle}" />
        </StackPanel>
    </StackPanel>
    </DataTemplate>
    </StackPanel.Resources>
    <StackPanel Orientation="Vertical">
        <ContentPresenter x:Name="AccountSummaryPresenter" ContentTemplate="{StaticResource AccountSummaryLayout}" Content="{DynamicResource accounts}" />
    </StackPanel>
</StackPanel>

Solution

  • StackPanel does not have an ItemsSource property, its children controls are not databindable.

    What you can do is create an ItemsControl which uses a StackPanel as its Itemshost.

         <ScrollViewer>
                <ItemsControl ItemsSource="{Binding Source={StaticResource accounts}}">
                    <ItemsControl.ItemsPanel>
                        <ItemsPanelTemplate>
                            <StackPanel IsItemsHost="True" Orientation="Vertical" />
                        </ItemsPanelTemplate>
                    </ItemsControl.ItemsPanel>
                    <ItemsControl.ItemTemplate>
                    ...
                    </ItemsControl.ItemTemplate>
                </ItemsControl>
            <ScrollViewer>