使用ElementFlow面板显示元素列表

在CodePlex网站里，有一个很有意思的WPF开源类库可供大家下载和使用，FluidKit。里面包含的ElementFlow面板提供了非常酷的元素列表显示效果：

 

使用方法也蛮简单的，在Xaml里面，你只要将你想要用ElementFlow显示的元素列表绑定到ItemsControl控件，将ItemsControl的ItemsPanel设置为我们的ElementFlow面板即可，请参考下面的Xaml代码：

 

        <ItemsControl x:Name="_itemsControl"

                      ItemsSource="{Binding}"

                      MouseDoubleClick="Image_MouseDoubleClick"

                      ItemTemplate="{StaticResource TestDataTemplate_Reflection}"

                      Width="800"

                      Height="550">

            <ItemsControl.ItemsPanel>

                <ItemsPanelTemplate>

                    <Controls:ElementFlow Focusable="True"

                                          ElementWidth="400"

                                          ElementHeight="600"

                                          HasReflection="False"

                                          Background="Black">

                        <Controls:ElementFlow.Camera>

                            <PerspectiveCamera FieldOfView="60"

                                          Position="0,1,4"

                                          LookDirection="0,-1,-4"

                                         UpDirection="0,1,0" />

                        </Controls:ElementFlow.Camera>

                    </Controls:ElementFlow>

                </ItemsPanelTemplate>

            </ItemsControl.ItemsPanel>

        </ItemsControl>

另外，ElementFlow面板还提供了多种列表元素显示视图可供选择，你可以通过C#代码或者Xaml自己设置，下面是C#代码的例子：

        private ElementFlow m_ElementFlow;

        private Dictionary<string, ViewStateBase> m_ViewStates = new Dictionary<string, ViewStateBase>();

 

        public ElementFlowPage()

        {

            InitializeComponent();

 

            m_ViewStates.Add("CoverFlow", new CoverFlow());

            m_ViewStates.Add("Carousel", new Carousel());

            m_ViewStates.Add("TimeMachine2", new TimeMachine2());

            m_ViewStates.Add("TimeMachine", new TimeMachine());

            m_ViewStates.Add("ThreeLane", new ThreeLane());

            m_ViewStates.Add("VForm", new VForm());

            m_ViewStates.Add("RollerCoaster", new RollerCoaster());

            m_ViewStates.Add("Rolodex", new Rolodex());

        }

  

        private void Page_Loaded(object sender, RoutedEventArgs e)

        {

            _itemsControl.ItemsSource = Directory.GetFiles(Environment.CurrentDirectory + @"/CoolImage", "*.jpg");

 

            DependencyObject obj = VisualTreeHelper.GetChild(_itemsControl, 0);

            while ((obj is ElementFlow) == false)

            {

                obj = VisualTreeHelper.GetChild(obj, 0);

            }

            m_ElementFlow = obj as ElementFlow;

            m_ElementFlow.CurrentView = new TimeMachine();

             

            m_EffectList.MouseDoubleClick += new MouseButtonEventHandler(ListBoxItem_MouseDownClick);

        }

 

        private void ListBoxItem_MouseDownClick(object sender, MouseButtonEventArgs e)

        {

            ListBox lb = sender as ListBox;

            ListBoxItem item = FindAnscetor(lb.InputHitTest(e.GetPosition(lb)) as DependencyObject, typeof(ListBoxItem)) as ListBoxItem;

 

            if (item == null)

                return;

 

            string key = item.Tag as string;

 

            if (m_ViewStates.ContainsKey(key))

                m_ElementFlow.CurrentView = m_ViewStates[key];

        }

 

有兴趣的话可以通过下面这个链接下载到最新的Fluidkit源代码。

 

http://www.codeplex.com/fluidkit