WPF XAML DataTemplate作为子项的多个项目

Question

I'm developing an app with using WPF and C#.

I've a StackPanel to show some custom controls in.

When I add ArchiveDateResultItem to that StackPanel it works like charm but, My problem is, ArchiveDateResultItem contains a list of ArchiveColorItem and I want to add that multiple times ArchiveColorItem to a WrapPanel inside of this StackPanel (You can see the "content will come here" text in the XAML code below.

<StackPanel Orientation="Vertical" HorizontalAlignment="Stretch" VerticalAlignment="Top" x:Name="spp">
            <StackPanel.Resources>
                <Style TargetType="{x:Type loc:ArchiveDateResultItem}">
                    <Setter Property="Template"> 
                        <Setter.Value>
                            <ControlTemplate>
                                <StackPanel Orientation="Horizontal" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="0,0,5,5">
                                    <StackPanel Orientation="Vertical">
                                        <Image Width="270" Height="130" VerticalAlignment="Top" HorizontalAlignment="Left" Source="silinecek/mrseb-windows-8-metro-start-screen_25.gif" Margin="0,0,2,0"/>
                                        <StackPanel Orientation="Horizontal">
                                            <Label Content="{Binding Path=DesignName, RelativeSource={RelativeSource Mode=TemplatedParent}}" Foreground="White" HorizontalAlignment="Left" Width="157"/>
                                            <StackPanel Orientation="Horizontal" HorizontalAlignment="Right"  Width="112">
                                                <Label Content="{Binding Path=ChannelCount, RelativeSource={RelativeSource Mode=TemplatedParent}}" Foreground="White" Padding="0,5"/>
                                                <Label Content=" CH," Foreground="White" Padding="0,5"/>
                                                <Label Content="{Binding Path=VariantCount, RelativeSource={RelativeSource Mode=TemplatedParent}}" Foreground="White" Padding="0,5"/>
                                                <Label Content=" MH" Foreground="White" Padding="0,5"/>
                                            </StackPanel>
                                        </StackPanel>
                                    </StackPanel>
                                    <ScrollViewer Tag="clrWrp" Width="174" Height="154" Template="{DynamicResource AppleStyleScrollBarStyle}"  HorizontalScrollBarVisibility="Disabled" VerticalScrollBarVisibility="Visible">
                                        <WrapPanel Orientation="Horizontal" Width="156" DataContext="{Binding Path=ResultColors}">
                                            <WrapPanel.Resources>
                                                <Style TargetType="{x:Type loc:ArchiveColorItem}">
                                                    <Setter Property="Template">
                                                        <Setter.Value>
                                                            <ControlTemplate>
                                                                <Border BorderThickness="1" BorderBrush="Black" Width="37" Height="37" Margin="2,0,0,2">
                                                                    <Border BorderThickness="1" BorderBrush="White">
                                                                        <Rectangle Fill="{Binding Path=ColorBrush}"></Rectangle>
                                                                    </Border>
                                                                </Border>
                                                            </ControlTemplate>
                                                        </Setter.Value>
                                                    </Setter>
                                                </Style>
                                            </WrapPanel.Resources>
                                           *****loc:ArchiveColorItem CONTENT SHOULD COME HERE*****
                                        </WrapPanel>
                                    </ScrollViewer>
                                </StackPanel>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>
            </StackPanel.Resources>

My classes are like :

public class ArchiveDateResultItem : Control
{
    public String DesignName { get; set; }
    public String VariantCount { get; set; }
    public String ChannelCount { get; set; }

    private ArchiveColorItemCollection _resultColors = new ArchiveColorItemCollection();
    public ArchiveColorItemCollection ResultColors
    {
        get
        {
            return _resultColors;
        }
    }
}

public class ArchiveColorItemCollection : List<ArchiveColorItem>
{
}

public class ArchiveColorItem : Control
{
    public SolidColorBrush ColorBrush { get; set; }
}

And this is my XAML code to add this controls to screen.

<loc:ArchiveDateResultItem DesignName="Try ME!" ChannelCount="20" VariantCount="20">
                    <loc:ArchiveDateResultItem.ResultColors>
                        <loc:ArchiveColorItem ColorBrush="Red"></loc:ArchiveColorItem>
                        <loc:ArchiveColorItem ColorBrush="Red"></loc:ArchiveColorItem>
                        <loc:ArchiveColorItem ColorBrush="Red"></loc:ArchiveColorItem>
                    </loc:ArchiveDateResultItem.ResultColors>
                </loc:ArchiveDateResultItem>

When I add these lines, ArchiveDateResultItems is shown on the screen but, I can't see ArchiveColorItem.

Can you help me with that?

Answer 1

Instead of ScrollViewer with WrapPanel use an ItemsControl and customize it. Try something like this

<ItemsControl ItemsSource="{Binding Path=ResultColors}">
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <WrapPanel />
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <Border BorderThickness="1" BorderBrush="Black" Width="37" Height="37" Margin="2,0,0,2">
                <Border BorderThickness="1" BorderBrush="White">
                    <Rectangle Fill="{Binding Path=ColorBrush}" />
                </Border>
            </Border>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>