fluidkit Forum Rss Feed

New Post: Using FluidKit with Prism

DarrylChetty — Sat, 09 Mar 2013 12:51:20 GMT

Hi guys

I was wondering if anyone has ever tried using FluidKit with Prism? There seem's to be an issue with fluidkit and prism regions. Basically, its just not possible to declare a TransitionPresenter as prism region.

If anyone has some tips/advice on how to tackle this issue it would be most welcome!

Thanks!

New Post: Transition Presenter in a MVVM Prism application

DarrylChetty — Sat, 09 Mar 2013 12:45:46 GMT

Hi

Did you ever manage to find the solution to this issue?

New Post: Carousel changes size based on number of items - Where do I put the camera?

schungx — Thu, 28 Feb 2013 09:50:31 GMT

I am pretty sure you can't, because I ran into this same problem. The ItemGap property is used to control the distance between two adjacent items, not the radius of the circle.

I ended up changing the CarouselLayout class to position the items based on a radius.

This is my code:

public class Carousel : LayoutBase
{
    private double UnitAngle
    {
        get { return 2 * Math.PI / Owner.Items.Count; }
    }

    private double Radius
    {
        get { return Owner.ItemGap; }
    }

    private double GapBetweenItems
    {
        // Cosine rule: c^2 = a^2 + b^2 - 2ab cos(r)
        get { return Math.Sqrt(2 * Math.Pow(Radius, 2) - (2 * Math.Pow(Radius, 2) * Math.Cos(UnitAngle))); }
    }

    protected override Motion GetAfterMotion (int deltaIndex)
    {
        double angle = Math.PI / 2 + UnitAngle * deltaIndex;
        Motion m = new Motion();
        m.X = -1 * Radius * Math.Cos(angle);
        m.Z = -1 * Owner.FrontItemGap + Radius * Math.Sin(angle);
        m.Y = 0;
        m.Angle = Owner.TiltAngle;
        m.Axis = new Vector3D(0, 1, 0);

        return m;
    }

    protected override Motion GetBeforeMotion (int deltaIndex)
    {
        double angle = Math.PI / 2 + UnitAngle * deltaIndex;
        Motion m = new Motion();
        m.X = -1 * Radius * Math.Cos(angle);
        m.Z = -1 * Owner.FrontItemGap + Radius * Math.Sin(angle);
        m.Y = 0;
        m.Angle = Owner.TiltAngle;
        m.Axis = new Vector3D(0, 1, 0);

        return m;
    }

    protected override Motion GetSelectionMotion ()
    {
        double angle = Math.PI / 2;
        Motion m = new Motion();
        m.X = Radius * Math.Cos(angle);
        m.Z = Owner.PopoutDistance + Radius * Math.Sin(angle);
        m.Y = 0;
        if (!double.IsNaN(Owner.FrontItemTiltAngle)) m.Angle = Owner.FrontItemTiltAngle;
        m.Axis = new Vector3D(0, 1, 0);

        return m;
    }
}

New Post: Carousel changes size based on number of items - Where do I put the camera?

kbolton_xenios — Wed, 27 Feb 2013 18:55:32 GMT

I'm using the Carousel layout in an ElementFlow. I had the camera location, field of view, gaps, popout distances just the way I wanted them.

But when the number of items in the carousel changes, the size of the rendered image ring changes. Which means the camera and other settings need to change in order for the desired view to be the same.

How would I programmatically determine what the settings need to be?

New Post: How do I use ElementFlow?

KyleDevious — Thu, 07 Feb 2013 00:28:24 GMT

 <fk:ElementFlow x:Name="_elementFlow"
                              Grid.ColumnSpan="9"
                              SelectedIndex="3" Grid.RowSpan="6" ElementWidth="300" Grid.Row="1" ElementHeight="300"  >

            <fk:ElementFlow.Background>
                <LinearGradientBrush EndPoint="0.5,1"  StartPoint="0.5,0">
                    <GradientStop Color="White"/>
                    <GradientStop Color="Black" Offset="1"/>
                </LinearGradientBrush>
            </fk:ElementFlow.Background>

            <fk:ElementFlow.Camera>
                <PerspectiveCamera FieldOfView="45" LookDirection="0,-1,-6" Position="0,1,6.5"/>
            </fk:ElementFlow.Camera>
            
            <fk:ElementFlow.Layout>
                <fk:CoverFlow/>
            </fk:ElementFlow.Layout>

             
             <Image Height="300" Source="itempreview.png" Width="300"/>

             <Image Height="300" Source="itempreview.png" Width="300"/>

             <Image Height="300" Source="itempreview.png" Width="300"/>

             <Image Height="300" Source="itempreview.png" Width="300"/>

       </fk.ElementFlow>

That is a setup that holds 4 images in the Coverflow layout.

New Post: How do I use ElementFlow?

ron975 — Fri, 04 Jan 2013 22:23:06 GMT

I'm relatively new to WPF, I come from a WinForms background, and I don't fully understand the example, from I what I see, I add the paths to my images to a StringCollection.

This is what I have right now

        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;

        }

And I have the ElementFlow defined in XAML like so

        <fluidkit:ElementFlow 
            Grid.Row="1"
            Height="194" 
            Name="elementFlow1" 
            VerticalAlignment="Top" 
            Width="503"
          />

Lo and behold, when I run it, nothing happens :(
Can someone please explain how I'm supposed to use ElementFlow? The example doesn't really "explain" it very well, per se

New Post: Installation / Import ?

JohnDoe42 — Thu, 20 Dec 2012 06:40:18 GMT

Hi everyone !

I'm completely new in C# development and want to improve my skills. I really don't know how do you import the FluidKit project in an existing one ? I've heard that I need to add references with FluidKit.dll, that's what I've done but I don't know what to do next :(

Thank you so much for your help!

New Post: Page flip effect

NitinJS — Fri, 02 Nov 2012 04:59:52 GMT

Can you add Page flip effect like reading a book?

New Post: Android image gallery like effect

NitinJS — Tue, 30 Oct 2012 16:28:16 GMT

Can you add Android image gallery like effect in fluidkit?

http://www.youtube.com/watch?feature=player_detailpage&v=wuzoWt5lxuU#t=74s

New Post: Element Flow Rolodex Stacking z order

dbeutel — Wed, 24 Oct 2012 15:23:06 GMT

Thanks,

Turns out setting the TiltAngle to a negative value gave me the desired change.

New Post: Element Flow Rolodex Stacking z order

schungx — Wed, 24 Oct 2012 08:14:35 GMT

I have a mod with transparency depth-sorting in the patches section, I think.

New Post: Element Flow Rolodex Stacking z order

dbeutel — Tue, 23 Oct 2012 20:13:14 GMT

Firstly let me say, Awesome control...

I've integrated the element flow control into an application that is meant to resemble the fall of paper out of a printer. I want the rolodex to stack the images in the same way real documents would. The rolodex style stacks the documents below the selecteditem correctly. The documents above the selected item are stacked the wrong way for my likeing.

With selected item = n

currently n -1 is under n-2

I want n -1 to be on top of n-2

What property / style element do I need to change to get the stacking I want?

New Post: Elementflow scroll with same images

schungx — Sat, 13 Oct 2012 13:40:42 GMT

Strange because I believe scrolling depends on SelectedIndex... Do you happen to use SelectedItem? SelectedItem for different items will be the same, and if the program is searching for a particular item, then it will always find the first one, making it look like it doesn't scroll.

New Post: Elementflow scroll with same images

adityar12 — Thu, 11 Oct 2012 23:29:58 GMT

I'm facing an issue. If I add the same image in succession to elementflow, I'm unable to scroll between them. If different images are next to each other then modifying selectedindex works. Could someone elaborate on why this happens?

New Post: InvalidOperationException in databound ElementFlow when collection is changed

Jad3d — Wed, 19 Sep 2012 13:15:54 GMT

I have ElementFlowContainer user control that contains ElementFlow from Showcase project.

<UserControl x:Class="Controls.ElementFlowContainer">
<Grid>
<-- Other controls (cut) -->
<Controls:ElementFlow x:Name="_elementFlow" 
ItemsSource="{Binding}" ItemTemplate="{DynamicResource 
TestDataTemplate}" SelectedIndex="3">
<-- Layout, Background, Camera settings (cut) -->
</Controls:ElementFlow>
</Grid>
</UserControl>

I have ObservableCollection<MediaRecord> that serves as DataContext of ElementFlow :

<Controls:ElementFlowContainer DataContext="{Binding 
MediaRecords}"/>

MediaRecord has image property (byte[] Content) which i want to display. Here's template :

<DataTemplate x:Key="TestDataTemplate" 
DataType="{x:Type DAL:MediaRecord}">
<Border x:Name="ElementVisual" Background="White" 
BorderThickness="2" BorderBrush="#ff9e8028">
<Image Source="{Binding Content}" Stretch="Fill" />
</Border>
</DataTemplate>

All the stuff above is in ViewModel which is created by IoC container (MediaRecords property is null during initialization). When collection is filled with items I get

"InvalidOperationException '[Unknown]' property does 
not point to a DependencyObject in 
path "(0)[0].(1)[1].(2).(3)[0].(4)."

This error happens in RaisePropertyChanged in property setter :

public const string MediaRecordsPropertyName = 
"MediaRecords";
public ObservableCollection<MediaRecord> MediaRecords
{
 get { return _mediaRecords; }
 set { if (_mediaRecords == value) { return; }
 _mediaRecords = value;
 RaisePropertyChanged(MediaRecordsPropertyName); // error here         
     }
}

Any idea how to fix this?

New Post: How to load Images from Folder which is not resource

ashessitm — Tue, 07 Aug 2012 05:13:51 GMT

I was able to resolve my problem , so closing this discussion

New Post: How to load Images from Folder which is not resource

ashessitm — Mon, 06 Aug 2012 11:13:51 GMT

Hello Pavan Sir

I want to implement Element Flow in one of my application , My Application will have 2 parts :

1) It will take some snapshot from form , and save these snapshots into a folder named "Photos"

2) now my job is to display these images , My first choice is your ElementFlow , but i am not able to integrate this part .

Every time pictures will be different so i can not specify at the time of making application , what i want is that at the time of loading application all pictures in "photos" folder should get loaded in element flow part .

Please guide me how to do this .

I have tried every thing in last one month , Please sir help me

Ashish Sharma

New Post: Custom ItemsSource ElementFlow

StevenDR — Thu, 12 Jul 2012 13:29:39 GMT

Is the elementflow able to use anything other than a StringCollection? When I use an observable collection of my own classes, then I get nothing.

However, when I use a StringCollection, I do get all strings viewed, but clicking on the items does absolutely nothing...

New Post: Rebinding the ItemsSource in ElementFlow

StevenDR — Thu, 12 Jul 2012 07:33:42 GMT

Has this been fixed? Because I have the exact same problem.

Steven

New Post: Multitouch-Event for selectedItem in ElementFlow

GaryDigg — Sat, 16 Jun 2012 15:08:10 GMT

Hello everyone,

i'm using ElementFlow Project for my Thesis. I have a problem manipulate selectedItem in ElementFlow.

Following code for whole Manipulation of ElementFlow works great(Zoom)

c#:

public MainWindow()
        {
            InitializeComponent();
            mywindow.ManipulationDelta += new EventHandler<ManipulationDeltaEventArgs>(mywindow_ManipulationDelta);
 
        }

     

        void mywindow_ManipulationDelta(object sender, ManipulationDeltaEventArgs e)
        {
            
            MatrixTransform transform = _elementFlow.RenderTransform  as MatrixTransform;
            if (transform != null)
            {
       
                matrix.ScaleAt(e.DeltaManipulation.Scale.X, e.DeltaManipulation.Scale.Y, e.ManipulationOrigin.X, e.ManipulationOrigin.Y);
                transform.Matrix = matrix;
                e.Handled = true;
            }

XAML:

 <flow:ElementFlow x:Name="_elementFlow"
            ItemsSource="{DynamicResource DataSource}"
            ItemTemplate="{DynamicResource TestDataTemplate}"
            TiltAngle="45"
            ItemGap="0.2"
            FrontItemGap="1"
            PopoutDistance="1.5"
         
              Margin="0,47,0,0">
            <flow:ElementFlow .Layout>
                <my:CoverFlow />
            </flow:ElementFlow .Layout>
            
            <flow:ElementFlow .RenderTransform>
                <MatrixTransform/>
            </flow:ElementFlow .RenderTransform>
            <flow:ElementFlow .Camera>
                <PerspectiveCamera FieldOfView="45"
                    Position="0,0,6"
                    LookDirection="0,-0,-6" />
            </flow:ElementFlow .Camera>
        </flow:ElementFlow >

------------------------------

But if i want to manipulate only _elementFlow.SelectedItem, it doesn't work. what should be changed in my code. because _elementFlow.SelectedItem doesn't have RenderTransform property.

Thanks for helping Gary