Xceed Logo
Shop
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
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

Reference

PileFlowPanel Members
Xceed.Wpf.Toolkit Namespace

Send Feedback