Silverlight2 的自定义列表框

• 下载源代码 - 4.57 MB

引言

在这里，我介绍了一个自定义的 Listbox 控件，用于表示未排序的项目。

在这里，您可以使用 Silverlight2 获得新的 Listbox 控件用户界面特性，同时仍然支持控件逻辑。

我将 Listbox 项目实现为一个自定义面板，该面板继承自类（Animation 类），该类继承自 Panel 作为基类。Animation 类绘制矢量和形状，以便绘制面板以支持渲染时的动画。您可以控制动画的速度，并支持在表面上发布图像的随机性。您还可以控制动画所需的时间，因为所有这些属性都是依赖属性，您可以从后端 XAML 修改它们。

将此面板作为 Listbox 项目或数据列表的项目集成，可以为控件提供良好的用户界面外观，而无需从视觉状态管理器或绘制故事板和时间线进行控制。

我还使用了一个库（agtweener）来支持项目上的缓动动画，您可以单独控制每个项目的过渡速度。我知道我的知识储备还不够，但我会尽力根据您的评论和想法来更新此控件。

背景

• Silverlight 2 - 您必须拥有最新版本的 Silverlight（运行时和 SDK）。
• C# 3.0
• Visual Studio 2008 sp1

Using the Code

只需下载 zip 文件（构建解决方案），然后运行测试 ASPX 页面。

此代码示例演示了如何在页面中实现自定义控件，以便将其用作 Listbox 中的项目。

它可以在另一个 Silverlight 数据控件中使用

<UserControl.Resources>
		<ItemsPanelTemplate x:Key="ItemsPanelTemplate">
            <c:UniformWrapPanel x:Name="CuniformWrapPanel" CellWidth="110"
                                CellHeight="110" Milliseconds="20" 
                                Margin="0,0,0,0" 
                                Randomness="2" 
                                RandomAngel="True"
                                Width="700"
                                VerticalAlignment="Stretch"
                                >
            </c:UniformWrapPanel>
        </ItemsPanelTemplate>
	</UserControl.Resources>
    <Grid x:Name="LayoutRoot" Background="White">
        <ListBox x:Name="lstbox_Images" Width="800" 
                 ItemsPanel="{StaticResource ItemsPanelTemplate}" 
                 Loaded="lstbox_Images_Loaded" RenderTransformOrigin="0.5,0.5"
                  >
        	<ListBox.RenderTransform>
        		<TransformGroup>
        			<ScaleTransform/>
        			<SkewTransform/>
        			<RotateTransform/>
        			<TranslateTransform/>
        		</TransformGroup>
        	</ListBox.RenderTransform>
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <StackPanel Background="Black" 
                     x:Name="MyStackPanel"  Margin="0,0,0,0"   
                     HorizontalAlignment="Center" VerticalAlignment="Center" 
		   Height="100" RenderTransformOrigin="0.5,0.5">
                     <Image Width="100" Height="100" 
				Source="{Binding Path=Img_Source}"/>
                    </StackPanel>
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>
    </Grid> 

兴趣点 

• 学习如何在 Silverlight2 动画中使用 tweener
• 如何根据需要自定义 Listbox 控件动画，并控制每个项目的速度和过渡效果