主要参照了DevExpress的PhotoGallery实例的实现。
效果如下：
照片墙核心代码如下：
PhotoGallery.xaml
<local:CarouselDemoModule x:Class="PictureMagic.PhotoGallery" xmlns="" xmlns:x="" xmlns:dxca="" xmlns:dxdb="" xmlns:local="clr-namespace:PictureMagic" xmlns:collection="clr-namespace:System.Collections;assembly=mscorlib" xmlns:system="clr-namespace:System;assembly=mscorlib" xmlns:dx="" > <dxdb:DemoModuleControl> <Grid ClipToBounds="False" Background="#FFB6C1"> <Grid.RowDefinitions> <RowDefinition /> <RowDefinition /> <RowDefinition Height="80" /> </Grid.RowDefinitions> <dxca:CarouselPanel RenderOptions.BitmapScalingMode="HighQuality" x:Name="carousel" AnimationTime="500" VisibleItemCount="9" AttractorPointIndex="4" PathSizingMode="Stretch" PathPadding="10,5,10,20" IsAutoSizeItem="True" ClipToBounds="True" PathVisible="False" IsInvertedDirection="True" Grid.RowSpan="2" IsRepeat="True" ItemSize="100,100" > <dxca:CarouselPanel.Resources> <ControlTemplate x:Key="itemTemplate" TargetType="{x:Type ContentControl}"> <Grid VerticalAlignment="Center"> <Border Margin="3,3,0,0" Background="Black" Opacity="0.25" CornerRadius="1" /> <Border Margin="0,0,3,3" Padding="4" BorderBrush="#5F000000" BorderThickness="1" Background="White"> <Image Source="{Binding Path=DataContext, RelativeSource={RelativeSource TemplatedParent}}" Stretch="Uniform" /> </Border> </Grid> </ControlTemplate> <Style TargetType="{x:Type FrameworkElement}" x:Key="itemStyle"> <Setter Property="RenderTransformOrigin" Value="0.5, 0.5" /> <Setter Property="Opacity" Value="{Binding Path=(dxca:CarouselPanel.Parameters).Opacity, RelativeSource={RelativeSource Self}}" /> <Setter Property="Panel.ZIndex" Value="{Binding Path=(dxca:CarouselPanel.Parameters).ZIndex, Converter={local:DoubleToIntConverter}, RelativeSource={RelativeSource Self}}" /> <Setter Property="RenderTransform"> <Setter.Value> <TransformGroup> <ScaleTransform ScaleX="{Binding Path=(dxca:CarouselPanel.Parameters).Scale, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type ContentControl}}}" ScaleY="{Binding Path=(dxca:CarouselPanel.Parameters).Scale, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type ContentControl}}}" /> <TranslateTransform X="{Binding Path=(dxca:CarouselPanel.Parameters).OffsetX, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type ContentControl}}}" Y="{Binding Path=(dxca:CarouselPanel.Parameters).OffsetY, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type ContentControl}}}" /> </TransformGroup> </Setter.Value> </Setter> </Style> </dxca:CarouselPanel.Resources> <dxca:CarouselPanel.ParameterSet> <dxca:ParameterCollection> <dxca:Parameter Name="Opacity" DistributionFunction="{StaticResource {ComponentResourceKey TypeInTargetAssembly={x:Type dxca:CarouselPanel}, ResourceId=Linear3PConvexNr}}" /> <dxca:Parameter Name="Scale" DistributionFunction="{StaticResource {ComponentResourceKey TypeInTargetAssembly={x:Type dxca:CarouselPanel}, ResourceId=Linear3PConvexNr}}" /> <dxca:Parameter Name="ZIndex" DistributionFunction="{StaticResource {ComponentResourceKey TypeInTargetAssembly={x:Type dxca:CarouselPanel}, ResourceId=Linear3PConvexERIntMax}}" /> </dxca:ParameterCollection> </dxca:CarouselPanel.ParameterSet> <dxca:CarouselPanel.ItemMovingPath> <PathGeometry Figures="M255,0 C352.86864,0.5 454.5,61.389274 454.5,136.5 C454.5,211.61073 352.86864,272.5 227.5,272.5 C102.13136,272.5 0.5,211.61073 0.5,136.5 C0.5,61.389274 102.13136,0.5 200,0.5 " /> </dxca:CarouselPanel.ItemMovingPath> </dxca:CarouselPanel> <dxdb:ImageControl Margin="30,30,30,0" Source="{Binding ElementName=carousel, Path=ActiveItem.DataContext}" VerticalAlignment="Center" HorizontalAlignment="Center" /> <dxca:CarouselNavigator VerticalAlignment="Center" HorizontalAlignment="Center" MinHeight="24" MinWidth="300" Grid.Row="2" Carousel="{Binding ElementName=carousel}" /> </Grid> </dxdb:DemoModuleControl> </local:CarouselDemoModule>
PhotoGallery.xaml.cs