我如何使用ElementFlow
本文关键字：ElementFlow 何使用 | 更新日期: 2023-09-27 17:50:53
我对WPF比较陌生，我来自WinForms背景，我试图实现一个coverflow，我不完全理解这个例子，从我所看到的，我将路径添加到我的图像到StringCollection。
这是我现在的记录:
public MainWindow()
{
InitializeComponent();
elementFlow1.Layout = new CoverFlow();
StringCollection itemssource = new StringCollection();
itemssource.Add(@"Images'1.png");
itemssource.Add(@"Images'2.png");
elementFlow1.SelectedIndex = 0;
elementFlow1.ItemsSource = itemssource;
}
在XAML中定义ElementFlow如下:
<fluidkit:ElementFlow Grid.Row="1" Height="194" Name="elementFlow1" VerticalAlignment="Top" Width="503" />
瞧，当我运行它时，什么也没发生。
有人能解释一下我应该如何使用ElementFlow吗?这个例子并没有很好地解释它。
你错过了关键的一步。ElementFlow控件显示UIElement s，而不是字符串。您有一个字符串列表，其中包含映像文件的逻辑文件位置。现在需要将该字符串集合转换为DataTemplate集合。如果您查看样例xaml文件，您将看到以下部分:
<DataTemplate x:Key="TestDataTemplate"
DataType="{x:Type sys:String}">
<Border x:Name="ElementVisual"
Background="White"
Padding="5"
BorderThickness="5"
BorderBrush="LightGray"
Grid.Row="0">
<Image Source="{Binding}"
Stretch="Fill" />
</Border>
</DataTemplate>
该部分本质上接受字符串输入并将其转换为DataTemplate。这是通过将ItemTemplate属性设置为DataTemplate资源来完成的。
您最好在XAML中操作这个控件，而不是在代码后面操作。这样事情就容易多了(至少在我看来)。
我建议按照下面的示例来做:
http://fluidkit.codeplex.com/SourceControl/latest FluidKit.Samples/ElementFlow ElementFlowExample.xaml.cs
这是我的mod，项目名称:ElementFlowExample
namespace ElementFlowExample
{
#region Using Statements:
using System;
using System.Diagnostics;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Media.Media3D;
using System.Windows.Navigation;
using System.Windows.Shapes;
using FluidKit.Controls;
using FluidKit.Showcase.ElementFlow;
#endregion
/// <summary>
/// Interaction logic for MainWindow.xaml
/// </summary>
public partial class MainWindow : Window
{
#region Fields:
private StringCollection _dataSource;
private LayoutBase[] _layouts = {
new Wall(),
new SlideDeck(),
new CoverFlow(),
new Carousel(),
new TimeMachine2(),
new ThreeLane(),
new VForm(),
new TimeMachine(),
new RollerCoaster(),
new Rolodex(),
};
private Random _randomizer = new Random();
private int _viewIndex;
#endregion
#region Properties:
#endregion
public MainWindow()
{
InitializeComponent();
}
private void Window_Loaded(object sender, RoutedEventArgs e)
{
_elementFlow.Layout = _layouts[3];
_currentViewText.Text = _elementFlow.Layout.GetType().Name;
_selectedIndexSlider.Maximum = _elementFlow.Items.Count - 1;
_elementFlow.SelectionChanged += EFSelectedIndexChanged;
_elementFlow.SelectedIndex = 0;
_dataSource = FindResource("DataSource") as StringCollection;
}
private void EFSelectedIndexChanged(object sender, SelectionChangedEventArgs e)
{
Debug.WriteLine((sender as ElementFlow).SelectedIndex);
}
protected override void OnKeyDown(KeyEventArgs e)
{
if (e.Key == Key.F12)
{
_viewIndex = (_viewIndex + 1) % _layouts.Length;
_elementFlow.Layout = _layouts[_viewIndex];
_currentViewText.Text = _elementFlow.Layout.GetType().Name;
}
}
private void ChangeSelectedIndex(object sender, RoutedPropertyChangedEventArgs<double> args)
{
_elementFlow.SelectedIndex = (int)args.NewValue;
}
private void RemoveCard(object sender, RoutedEventArgs args)
{
if (_elementFlow.Items.Count > 0)
{
_dataSource.RemoveAt(_randomizer.Next(_dataSource.Count));
// Update selectedindex slider
_selectedIndexSlider.Maximum = _elementFlow.Items.Count - 1;
}
}
private void AddCard(object sender, RoutedEventArgs args)
{
Button b = sender as Button;
int index = _randomizer.Next(_dataSource.Count);
if (b.Name == "_regular")
{
_dataSource.Insert(index, "Images/01.jpg");
}
else
{
_dataSource.Insert(index, string.Format("Images/{0:00}", _randomizer.Next(1, 12)) + ".jpg");
}
// Update selectedindex slider
_selectedIndexSlider.Maximum = _elementFlow.Items.Count - 1;
}
} // END of Class...
} // END of Namespace...
<Window x:Class="ElementFlowExample.MainWindow"
xmlns:b="clr-namespace:ElementFlowExample"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:sys="clr-namespace:System;assembly=mscorlib"
xmlns:local="clr-namespace:FluidKit.Showcase.ElementFlow"
xmlns:Controls="clr-namespace:FluidKit.Controls;assembly=FluidKit"
Loaded="Window_Loaded"
Title="ElementFlow - FluidKit"
WindowStartupLocation="CenterScreen"
Width="1280"
Height="720">
<Window.Resources>
<local:StringCollection x:Key="DataSource" />
<LinearGradientBrush x:Key="ReflectionBrush" StartPoint="0,0" EndPoint="0,1">
<GradientStop Offset="0" Color="#7F000000" />
<GradientStop Offset=".5" Color="Transparent" />
</LinearGradientBrush>
<DataTemplate x:Key="TestDataTemplate"
DataType="{x:Type sys:String}">
<Border x:Name="ElementVisual"
Background="White"
Padding="5"
BorderThickness="5"
BorderBrush="LightGray"
Grid.Row="0">
<Image Source="{Binding}"
Stretch="Fill" />
</Border>
</DataTemplate>
<DataTemplate x:Key="TestDataTemplate_Reflection">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="0.5*" />
<RowDefinition Height="0.5*" />
</Grid.RowDefinitions>
<Border x:Name="ElementVisual"
BorderThickness="2"
BorderBrush="LightYellow"
Background="Black"
Padding="2">
<Image Source="{Binding}"
Stretch="Fill" />
</Border>
<Rectangle OpacityMask="{StaticResource ReflectionBrush}"
Grid.Row="1"
Height="{Binding ActualHeight, ElementName=ElementVisual}">
<Rectangle.Fill>
<VisualBrush Visual="{Binding ElementName=ElementVisual}">
<VisualBrush.RelativeTransform>
<ScaleTransform ScaleX="1"
ScaleY="-1"
CenterX="0.5"
CenterY="0.5" />
</VisualBrush.RelativeTransform>
</VisualBrush>
</Rectangle.Fill>
</Rectangle>
</Grid>
</DataTemplate>
<DataTemplate x:Key="ItemTemplate">
<Border BorderBrush="#FFB1B1B1"
BorderThickness="2"
Background="#7FFFFFFF"
Padding="0,20,0,0"
CornerRadius="3">
<Image Source="{Binding Image}"
HorizontalAlignment="Left"
VerticalAlignment="Top"
Stretch="Fill" />
</Border>
</DataTemplate>
</Window.Resources>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0.5*" />
<ColumnDefinition Width="0.5*" />
</Grid.ColumnDefinitions>
<StackPanel Orientation="Vertical"
Grid.Row="1"
Grid.Column="0"
Margin="5">
<Label Content="SelectedIndex" />
<Slider x:Name="_selectedIndexSlider"
Minimum="0"
Value="0"
ValueChanged="ChangeSelectedIndex" />
<Label Content="TiltAngle" />
<Slider x:Name="_tiltAngleSlider"
Minimum="0"
Maximum="90"
Value="45" />
<Label Content="ItemGap" />
<Slider x:Name="_itemGapSlider"
Minimum="0.25"
Maximum="3"
Value="0.65" />
</StackPanel>
<StackPanel Orientation="Vertical"
Grid.Row="1"
Grid.Column="1"
Margin="5">
<Label Content="FrontItemGap" />
<Slider x:Name="_frontItemGapSlider"
Minimum="0"
Maximum="4.0"
Value="1.5"/>
<Label Content="PopoutDistance" />
<Slider x:Name="_popoutDistanceSlider"
Minimum="-2.0"
Maximum="2.0"
Value="-0.3" />
<StackPanel Orientation="Horizontal"
Margin="0,10,0,0">
<Button x:Name="_regular"
Click="AddCard"
Margin="0,0,10,0"
Content="Add Type A" />
<Button x:Name="_alert"
Click="AddCard"
Margin="0,0,10,0"
Content="Add Type B" />
<Button Click="RemoveCard"
Margin="0,0,10,0"
Content="Remove" />
</StackPanel>
</StackPanel>
<Controls:ElementFlow x:Name="_elementFlow"
Grid.Row="0"
Grid.Column="0"
Grid.ColumnSpan="2"
ItemsSource="{DynamicResource DataSource}"
ItemTemplate="{DynamicResource TestDataTemplate}"
TiltAngle="{Binding Value, ElementName=_tiltAngleSlider}"
ItemGap="{Binding Value, ElementName=_itemGapSlider}"
FrontItemGap="{Binding Value, ElementName=_frontItemGapSlider}"
PopoutDistance="{Binding Value, ElementName=_popoutDistanceSlider}"
ElementWidth="300"
ElementHeight="200"
SelectedIndex="3">
<Controls:ElementFlow.Layout>
<Controls:CoverFlow />
</Controls:ElementFlow.Layout>
<Controls:ElementFlow.Background>
<LinearGradientBrush EndPoint="0.5,1"
StartPoint="0.5,0">
<GradientStop Color="#FF181818" />
<GradientStop Color="#FF7A7A7A"
Offset="0.5" />
<GradientStop Color="#FF1A1A1A"
Offset="1" />
</LinearGradientBrush>
</Controls:ElementFlow.Background>
<Controls:ElementFlow.Camera>
<PerspectiveCamera FieldOfView="60"
Position="0,3,6"
LookDirection="0,-3,-6" />
</Controls:ElementFlow.Camera>
</Controls:ElementFlow>
<TextBlock Text="F12 to switch views"
Foreground="White"
FontWeight="Bold"
VerticalAlignment="Top"
HorizontalAlignment="Right"
Margin="10"
Grid.Row="0"
Grid.Column="1" />
<TextBlock x:Name="_currentViewText"
Foreground="White"
FontWeight="Bold"
VerticalAlignment="Top"
HorizontalAlignment="Right"
Margin="10,30,10,10"
Grid.Row="0"
Grid.Column="1" />
</Grid>
</Window>
希望这对你有帮助!