Xceed Toolkit Plus for WPF v5.0 Documentation
Xceed.Wpf.Toolkit Assembly / Xceed.Wpf.Toolkit Namespace / PileFlowPanel Class
Members Example


In This Topic
    PileFlowPanel Class
    In This Topic
    Represents the main class of the PileFlowPanel control.
    Syntax
    'Declaration
     
    <LocalizabilityAttribute(LocalizationCategory.Ignore)>
    <ContentPropertyAttribute("Children")>
    <StyleTypedPropertyAttribute(Property="FocusVisualStyle", StyleTargetType=System.Windows.Controls.Control)>
    <XmlLangPropertyAttribute("Language")>
    <UsableDuringInitializationAttribute(True)>
    <RuntimeNamePropertyAttribute("Name")>
    <UidPropertyAttribute("Uid")>
    <TypeDescriptionProviderAttribute(MS.Internal.ComponentModel.DependencyObjectProvider)>
    <NameScopePropertyAttribute("NameScope", System.Windows.NameScope)>
    Public Class PileFlowPanel 
       Inherits System.Windows.Controls.Panel
    'Usage
     
    Dim instance As PileFlowPanel
    [Localizability(LocalizationCategory.Ignore)]
    [ContentProperty("Children")]
    [StyleTypedProperty(Property="FocusVisualStyle", StyleTargetType=System.Windows.Controls.Control)]
    [XmlLangProperty("Language")]
    [UsableDuringInitialization(true)]
    [RuntimeNameProperty("Name")]
    [UidProperty("Uid")]
    [TypeDescriptionProvider(MS.Internal.ComponentModel.DependencyObjectProvider)]
    [NameScopeProperty("NameScope", System.Windows.NameScope)]
    public class PileFlowPanel : System.Windows.Controls.Panel 
    Remarks

    A PileFlowPanel contains PileFlowItem objects ("flow items"). A PileFlowItem is responsible for animating its element and can contain any FrameworkElement-derived class.

    The PileFlowCard class is used for displaying content with an optional mirror-like reflection in the PileFlowPanel beneath the content; this class is used in XAML to add elements of to PileFlowPanel.

    The PileFlowPanel class also contains a label that can be configured to display the PileFlowItem data via the property ContentLabel.

    Example
    The following is a simplified version of the Pile Flow Panel sample app.
    <Window x:Class="WpfApplication58.MainWindow"
            xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
            xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
            xmlns:xctk="http://schemas.xceed.com/wpf/xaml/toolkit"
            
            Title="MainWindow" Height="645" Width="1078">
        <Grid>
            <Grid.Resources>
                <Style TargetType="{x:Type Border}" x:Key="BorderStyle">
                    <Setter Property="BorderThickness" Value="1"/>
                    <Setter Property="CornerRadius" Value="5"/>
                    <Setter Property="BorderBrush">
                        <Setter.Value>
                            <SolidColorBrush Color="Black"/>
                        </Setter.Value>
                    </Setter>
                </Style>
    
                <SolidColorBrush x:Key="mouseOverBrush" Color="Blue" />
                <SolidColorBrush x:Key="mouseOverLabelBrush" Color="LightBlue" />
                <SolidColorBrush x:Key="normalLabelBrush" Color="Snow" />
    
                <x:Array x:Key="localEmployeeList" Type="{x:Type TextBlock}">
                    <TextBlock>Nancy Davolio</TextBlock>
                    <TextBlock>Andrew Fuller</TextBlock>
                    <TextBlock>Janel Leverling</TextBlock>
                    <TextBlock>Margaret Peacock</TextBlock>
                </x:Array>
                
                <DataTemplate x:Key="seriesTemplate">
                    <Canvas Width="{Binding Path=W}" Height="{Binding Path=H}">
                        <Rectangle x:Name="rect" RadiusX="5" RadiusY="5" Width="{Binding Path=W}" Height="{Binding Path=H}" Fill="{Binding Path=Interior}">
                            <Rectangle.Triggers>
                                <EventTrigger RoutedEvent="Mouse.MouseEnter">
                                    <EventTrigger.Actions>
                                        <BeginStoryboard>
                                            <Storyboard>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="rect" Storyboard.TargetProperty="Fill">
                                                    <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="{StaticResource mouseOverBrush}" />
                                                </ObjectAnimationUsingKeyFrames>
                                            </Storyboard>
                                        </BeginStoryboard>
                                    </EventTrigger.Actions>
                                </EventTrigger>
    
                                <EventTrigger RoutedEvent="Mouse.MouseLeave">
                                    <EventTrigger.Actions>
                                        <BeginStoryboard>
                                            <Storyboard>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="rect" Storyboard.TargetProperty="Fill">
                                                    <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="{Binding Path=Interior}" />
                                                </ObjectAnimationUsingKeyFrames>
                                            </Storyboard>
                                        </BeginStoryboard>
                                    </EventTrigger.Actions>
                                </EventTrigger>
                            </Rectangle.Triggers>
                        </Rectangle>
                    </Canvas>
                </DataTemplate>
    
                <DataTemplate x:Key="LabelTemplate">
                    <Border x:Name="border" DockPanel.Dock="Top" BorderThickness="1" CornerRadius ="4" Background="{StaticResource normalLabelBrush}">
                        <Border.BorderBrush>
                            <SolidColorBrush Color="Black"/>
                        </Border.BorderBrush>
    
                        <TextBlock FontFamily="Sans Serif" FontSize="12" Margin="2,2,2,1"
    			     HorizontalAlignment="Center" VerticalAlignment="Center" Text="{Binding Path=Text}">
    				   <TextBlock.Foreground>
    					   <SolidColorBrush Color="Navy"/>
    				   </TextBlock.Foreground>
                        </TextBlock>
    
                        <Border.Triggers>
                            <EventTrigger RoutedEvent="Mouse.MouseEnter">
                                <EventTrigger.Actions>
                                    <BeginStoryboard>
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="border" Storyboard.TargetProperty="Background">
                                                <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="{StaticResource mouseOverLabelBrush}" />
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </BeginStoryboard>
                                </EventTrigger.Actions>
                            </EventTrigger>
    
                            <EventTrigger RoutedEvent="Mouse.MouseLeave">
                                <EventTrigger.Actions>
                                    <BeginStoryboard>
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="border" Storyboard.TargetProperty="Background">
                                                <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="{StaticResource normalLabelBrush}" />
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </BeginStoryboard>
                                </EventTrigger.Actions>
                            </EventTrigger>
                        </Border.Triggers>
                    </Border>
                </DataTemplate>
            </Grid.Resources>
            
            <ScrollViewer Grid.Row="2" Grid.ColumnSpan="2" VerticalScrollBarVisibility="Hidden" HorizontalScrollBarVisibility="Visible" CanContentScroll="true">
                <xctk:PileFlowPanel x:Name="_pileFlowPanel" 
                                  MinHeight="175"
                                  ContentLabelOffsetY="100" 
                                  ContentLabelSize="200,28" 
                                  AnimationDuration="1000" 
                                  LastMoveDecelarationRatio="0.6" 
                                  FlowItemsCount="6" 
                                  FlowItemRatio="70" 
                                  ItemWidth="200" 
                                  ItemHeight="200" 
                                  FlowOffsetX="20" 
                                  FlowOffsetY="20" 
                                  CenterOffsetX="30">
                    <xctk:PileFlowPanel.ContentLabel>
                        <Border Background="#ffff50" DockPanel.Dock="Left" Style="{StaticResource BorderStyle}">
                            <TextBlock x:Name="_pileFlowLabel" Margin="0,5,0,0" TextAlignment="Center" />
                            <Border.BitmapEffect>
                                <DropShadowBitmapEffect />
                            </Border.BitmapEffect>
                        </Border>
                    </xctk:PileFlowPanel.ContentLabel>
    
                    <xctk:PileFlowCard x:Name="_employeesPileFlowCard" Tag="Employees">
                        <StackPanel>
                            <TextBlock Text="List of Employees" TextAlignment="Center" />
                            <xctk:CheckListBox ItemsSource="{StaticResource localEmployeeList}" x:Name="_employeeListBox"/>
                        </StackPanel>
                    </xctk:PileFlowCard>
    
                    <xctk:PileFlowCard Tag="Nancy Daviolo">
                        <Border Background="Beige">
                            <Grid>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition />
                                    <ColumnDefinition Width="Auto" />
                                </Grid.ColumnDefinitions>
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="Auto" />
                                    <RowDefinition Height="Auto" />
                                    <RowDefinition Height="Auto" />
                                    <RowDefinition Height="Auto" />
                                    <RowDefinition Height="Auto" />
                                    <RowDefinition Height="Auto" />
                                    <RowDefinition Height="Auto" />
                                </Grid.RowDefinitions>
    
                                <TextBlock Grid.Column="1" Text="Nancy" />
                                <TextBlock Grid.Row="1" Grid.Column="1" Text="Daviolo" />
                                <TextBlock Grid.Row="2" Grid.Column="1" Text="Sales Representative" />
                                <TextBlock Grid.Row="3" Grid.Column="1" Text="(206) 555-9857" />
                                <TextBlock Grid.Row="4" Grid.Column="1" Text="507 - 20th Ave. E. Apt. 2A" />
                                <TextBlock Grid.Row="5" Grid.ColumnSpan="2" Text="This employee has been working at IBM since March 10, 1999." TextWrapping="Wrap" />
                                <Button Grid.Row="6" Grid.ColumnSpan="2" Content="Save" Width="75" />
                            </Grid>
                        </Border>
                    </xctk:PileFlowCard>
    
                    <xctk:PileFlowCard Tag="Sale price relative to distance">
                        <Border Background="LightGray">
                            <xctk:Chart>
                                <xctk:Chart.Legend>
                                    <xctk:Legend Visibility="Collapsed" />
                                </xctk:Chart.Legend>
                                <xctk:Chart.Areas>
                                    <xctk:Area>
                                        <xctk:Area.XAxis>
                                            <xctk:Axis AxisLabelsLayout="ShowToFit" ShowAxisLabel="False" LabelTemplate="{StaticResource LabelTemplate}"/>
                                        </xctk:Area.XAxis>
                                        <xctk:Area.YAxis>
                                            <xctk:Axis AxisLabelsLayout="ShowToFit" ShowAxisLabel="False" LabelTemplate="{StaticResource LabelTemplate}"/>
                                        </xctk:Area.YAxis>
                                        <xctk:Area.Series>
                                            <xctk:Series DefaultInterior="Red" Template="{StaticResource seriesTemplate}">
                                                <xctk:Series.DataPoints>
                                                    <xctk:DataPoint X="125" Y="6" />
                                                    <xctk:DataPoint X="150" Y="7" />
                                                    <xctk:DataPoint X="50" Y="4" />
                                                    <xctk:DataPoint X="25" Y="2" />
                                                </xctk:Series.DataPoints>
                                                <xctk:Series.Layout>
                                                    <xctk:ColumnLayout />
                                                </xctk:Series.Layout>
                                            </xctk:Series>
                                        </xctk:Area.Series>
                                    </xctk:Area>
                                </xctk:Chart.Areas>
                            </xctk:Chart>
                        </Border>
                    </xctk:PileFlowCard>
    
                </xctk:PileFlowPanel>
            </ScrollViewer>
        </Grid>
    </Window>
    Inheritance Hierarchy

    System.Object
       System.Windows.Threading.DispatcherObject
          System.Windows.DependencyObject
             System.Windows.Media.Visual
                System.Windows.UIElement
                   System.Windows.FrameworkElement
                      System.Windows.Controls.Panel
                         Xceed.Wpf.Toolkit.PileFlowPanel

    Requirements

    Target Platforms: Windows 11, Windows 10, Windows 7, Windows Vista SP1 or later, Windows XP SP3, Windows Server 2008 (Server Core not supported), Windows Server 2008 R2 (Server Core supported with SP1 or later), Windows Server 2003 SP2

    See Also