This project is read-only.

ElementFlow: exchanging images with BitmapImages at runtime

May 21, 2009 at 9:28 PM

Hi everyone,

nice work on the FluidKit project. But I gotta say i really miss some documentation. Right now I am struggling with exchanging pictures at runtime. I do not want to use images from files, that makes the use of the StringCollection inadequate for me. I have generated BitmapImages (and also converted them to System.Windows.Controls.Image) but I am totally unable to exchange them. Can ANYONE hook me up on this? It is really stressing me out.

Thanks in advance,

knox

May 26, 2009 at 2:51 PM
Edited May 26, 2009 at 3:04 PM

Alright, solved this issue myself. The solution was pretty easy, although it took me a while. What I did:

  • I replaced the StringCollection.cs with ImageCollection.cs. It contains the following very simple code:

namespace YourNameSpace {
class ImageCollection : ObservableCollection<BitmapImage> {  }
}

  • This produces an empty container for BitmapImages. Next you will want to specify the Binding in the XAML-file. Do this by replacing the StringCollection with the just introduced ImageCollection. If you use the same name (or key) as an identifier for the data binding, you're now done with the XAML-file. Your app should now build with an empty ElementFlow component. To insert BitmapImages, move over to your code behind class and replace 

private StringCollection _dataSource;

with

private ImageCollection _dataSource;

and start filling the ArrayCollection as you like:  _dataSourcet.Insert([int] position_where_to_insert, [BitmapImage] yourImage);

That's it. I hope I was able to make myself understandable since I don't have the sources at hand right now. And - as you will all have noticed - I am not a native English speaker. Sorry for that...


 

May 26, 2009 at 7:52 PM

Great.. i am still getting en Exception.. Could you post your solution at some time ?

May 27, 2009 at 9:04 AM

Hi Jaydk,

I'll try to post the full code tonight (C.E.T.). What's your exception and where is it thrown?

May 28, 2009 at 10:40 AM

So here's the code I use (I removed my other items to make it more clear):

<!-- ############### START of CoverCollection.cs: ################ -->

 

namespace PhidgetAudioPlayer

{

    class CoverCollection : ObservableCollection<BitmapImage> {  }

}

 

<!-- ############### END of CoverCollection.cs: ################ -->

<!-- ############### START of Window1.xaml: ################ -->

<Window x:Class="PhidgetAudioPlayer.Window1" Icon="Assets/App_Icon.ico"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

Title="PhidgetAudioPlayer App"

Height="800"

Width="600"

xmlns:local="clr-namespace:PhidgetAudioPlayer"

xmlns:sys="clr-namespace:System;assembly=mscorlib"

xmlns:Controls="clr-namespace:FluidKit.Controls;assembly=FluidKit"

WindowStartupLocation="CenterScreen">

    <Window.Resources>

        <local:CoverCollection x:Key="Covers" />

<DataTemplate x:Key="TestDataTemplate"

 DataType="{x:Type sys:String}">

<Border x:Name="ElementVisual"

Background="Transparent"

Padding="0"

BorderThickness="5"

Grid.Row="0">

                <Border.BorderBrush>

                     <LinearGradientBrush StartPoint="0,0" EndPoint="1,1">

                         <GradientStop Color="Gold" Offset="0"/>

                         <GradientStop Color="Purple" Offset="1"/>

                     </LinearGradientBrush>

               </Border.BorderBrush>

                 <Image Source="{Binding}" Stretch="Fill" />

</Border>

</DataTemplate>

</Window.Resources>

    

<Grid>

<Grid.RowDefinitions>

<RowDefinition Height="300" />

            <RowDefinition Height="5" />

<RowDefinition Height="350.96*" MinHeight="151" />

</Grid.RowDefinitions>


<Grid.ColumnDefinitions>

<ColumnDefinition Width="0.5*" />

<ColumnDefinition Width="0.5*" />

</Grid.ColumnDefinitions>


<ListBox x:Name="_itemsControl" Grid.ColumnSpan="2"

ItemsSource="{StaticResource Covers}"

ItemTemplate="{StaticResource TestDataTemplate}"

SelectedIndex="3" Height="300" VerticalAlignment="Top">

<ListBox.ItemsPanel>

<ItemsPanelTemplate>

<Controls:ElementFlow x:Name="ElementFlow"

 Focusable="True"

 TiltAngle="{Binding Value, ElementName=_tiltAngleSlider}"

 ItemGap="{Binding Value, ElementName=_itemGapSlider}"

 FrontItemGap="{Binding Value, ElementName=_frontItemGapSlider}"

 PopoutDistance="{Binding Value, ElementName=_popoutDistanceSlider}"

 ElementWidth="250"

 ElementHeight="250"

 HasReflection="True"

 Background="Transparent">

<Controls:ElementFlow.Camera>

<PerspectiveCamera FieldOfView="60"

  Position="0,0,6"

  LookDirection="0,0,-6"

  UpDirection="0,1,0" />

</Controls:ElementFlow.Camera>

</Controls:ElementFlow>

</ItemsPanelTemplate>

</ListBox.ItemsPanel>


<ListBox.Template>

<ControlTemplate TargetType="ListBox">

<Grid>

<ItemsPresenter/>

</Grid>

</ControlTemplate>

</ListBox.Template>

</ListBox>


<TextBlock Text="F12 to switch views"

  Foreground="White"

  FontWeight="Bold"

  VerticalAlignment="Top"

  HorizontalAlignment="Right"

  Margin="10"

  Grid.Row="0"

  Grid.Column="1" />

    </Grid>

</Window>

<!-- ############### END of Window1.xaml: ################ -->

 

<!-- ############### START of SUBSECTION from Window1.xaml.cs: ################ -->

Insert a global variable like this: private CoverCollection _coverCollection;

In Function Window1_Loaded(object sender, RoutedEventArgs  e)  insert:

_coverCollection = FindResource("Covers") as CoverCollection;

I then created an EventHandler which fires events. I use its Listener to fill the ElementFlow component like this:

 _coverCollection.Insert(e.getSong.ID, e.getSong.getCover());

<!-- ############### END of Window1.xaml.cs: ################ -->

 

That's pretty much it. I didn't compile or test what I posted but I think it should give you an idea how I did it. Probably this might be a very bad on how to do it but it works fine for me. Good luck!

 

May 28, 2009 at 5:32 PM

Thank you knox, that worked like a charm

May 28, 2009 at 5:50 PM

Well, thank you! I just started in WPF, this is my first project and I find it kind of hard to dive into it. I'm glad I could be of help.

Regards

Jul 16, 2009 at 1:51 PM

Hi Knox, Thanks a lot for this example, just what i was looking for.

Pavan

Thanks for providing this excellent framework.

Thanks

Navin