silverlight ItemTemplate和ItemPanel实例

先定义一个Panel。好让下面的演示：

using System.Windows.Controls;
using System.Windows;

namespace Class3Samples
{
    public class CyclePanel : Panel
    {
        protected override System.Windows.Size ArrangeOverride(System.Windows.Size finalSize)
        {
            int count = this.Children.Count;
            Point center = new Point(finalSize.Width / 2, finalSize.Height / 2);
            for (int i = 0; i < count; i++)
            {
                Rect rect = new Rect();

                switch (i % 4)
                {
                    case 0:
                        rect = new Rect(center.X - 15 - (i / 4 + 1) * 50, 
                                        center.Y - 10,
                                        30, 20);
                        break;
                    case 1:
                        rect = new Rect(center.X - 15,
                                        center.Y - 10 - (i / 4 + 1) * 50,
                                        30, 20);
                        break;
                    case 2:
                        rect = new Rect(center.X - 15 + (i / 4 + 1) * 50,
                                        center.Y - 10,
                                        30, 20);
                        break;
                    case 3:
                        rect = new Rect(center.X - 15,
                                        center.Y - 10 + (i / 4 + 1) * 50,
                                        30, 20);
                        break;
                    default:
                        break;
                }
                this.Children[i].Arrange(rect);
            }

            return base.ArrangeOverride(finalSize);
        }

        protected override Size MeasureOverride(Size availableSize)
        {
            foreach (UIElement child in Children)
            {
                child.Measure(new Size(availableSize.Width, availableSize.Height));
            }

            return base.MeasureOverride(availableSize);
        }
    }
}

 

前台XAML：

<UserControl
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    xmlns:local="clr-namespace:Class3Samples"
    x:Class="Class3Samples.ItemTemplateAndItemPanel"
    d:DesignWidth="640" d:DesignHeight="480">
    <UserControl.Resources>
        <local:GetIndexConverter x:Key="GetIndexConverter"/>
        <DataTemplate x:Key="DataTemplate">
            <Grid Background="#FFFBFFCA">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto"/>
                    <ColumnDefinition Width="Auto"/>
                    <ColumnDefinition Width="Auto"/>
                    <ColumnDefinition/>
                </Grid.ColumnDefinitions>
                <TextBlock Text="{Binding Path=., Converter={StaticResource GetIndexConverter}}" DataContext="{Binding Path=., RelativeSource={RelativeSource TemplatedParent}}" TextWrapping="Wrap" Margin="0,0,12,0"/>
                <TextBlock Text="{Binding Path=Progress}" TextWrapping="Wrap" Grid.Column="1"/>
                <Path Stretch="Fill" Stroke="#FF0049FF" Height="1" HorizontalAlignment="Left" Margin="5,0,5,0" VerticalAlignment="Center" Width="5.667" UseLayoutRounding="False" Grid.Column="2" Data="M12,8 L16.666664,8" d:LayoutOverrides="Height"/>
                <TextBlock Grid.Column="3" Text="{Binding Path=Title}" TextWrapping="Wrap"/>
            </Grid>
        </DataTemplate>
        <ItemsPanelTemplate x:Key="ItemsPanelTemplate">
            <StackPanel/>
        </ItemsPanelTemplate>
        <ItemsPanelTemplate x:Key="ItemsPanelTemplate1">
            <local:CyclePanel/>
        </ItemsPanelTemplate>
    </UserControl.Resources>

    <Grid x:Name="LayoutRoot" DataContext="{Binding Source={StaticResource MyDataSourceNotifyChangedDataSource}}">
        <ListBox Margin="-40,132,208,-42" ItemsSource="{Binding Mode=OneWay, Path=Items}" ItemTemplate="{StaticResource DataTemplate}" ItemsPanel="{StaticResource ItemsPanelTemplate1}"/>
        <local:CyclePanel Margin="286,216,25,-24">
            <Rectangle Fill="#FF0055FF" Stroke="#FF000000"/>
            <Rectangle Fill="#FF0055FF" Stroke="#FF000000"/>
            <Rectangle Fill="#FF0055FF" Stroke="#FF000000"/>
            <Rectangle Fill="#FF0055FF" Stroke="#FF000000"/>
            <Rectangle Fill="#FF0055FF" Stroke="#FF000000"/>
            <Rectangle Fill="#FF0055FF" Stroke="#FF000000"/>
            <Rectangle Fill="#FF0055FF" Stroke="#FF000000"/>
            <Rectangle Fill="#FF0055FF" Stroke="#FF000000"/>
            <Rectangle Fill="#FF0055FF" Stroke="#FF000000"/>
            <Rectangle Fill="#FF0055FF" Stroke="#FF000000"/>
            <Rectangle Fill="#FF0055FF" Stroke="#FF000000"/>
        </local:CyclePanel>
        <ListBox Margin="228,8,0,0" ItemsSource="{Binding Items, Mode=OneWay}" ItemTemplate="{StaticResource DataTemplate}" ItemsPanel="{StaticResource ItemsPanelTemplate}" VerticalAlignment="Top" Height="180"/>
    </Grid>
</UserControl>

 

在blend中的设计图：

Template 具体参见上一个日记。