ElementFlow : Transparency increase for items in the distance?

Feb 27, 2009 at 2:45 PM
I am looking at using the Element Flow in a personal project that I am just starting out on, one thing that I think would be great would be to decrease the opacity/increase the transparency of items as they get further away from the selected item, i.e. fade into the distance.

I was wondering about binding the opacity of each item to its offset from the current selected item, but was wondering if there are any better ways of doing it?
Feb 27, 2009 at 6:51 PM
Ya that would be the right way to do it. You will have to bind to the SelectedIndex and also get the index of the current item. Using those two values you can come up with the offset and set the opacity.

Mar 2, 2009 at 2:04 PM
I have added the following:

                    <MultiBinding Converter="{StaticResource ValueToOpacityConverter}">
                        <Binding Mode="OneWay" ElementName="_itemsControl" Path="SelectedIndex" />
                        <Binding Mode="OneWay" ElementName="_itemsControl" Path="Items.CurrentPosition" />
                        <Binding Mode="OneWay" ElementName="_itemsControl" Path="Items.Count" />

to the XAML for the DataTemplate in the ElementFlow demonstration window1.xaml and added the relevant converter, however this does not get re-evaluated when the selectedIndex changes, what do I need to do to get the Opacity to be re-calculated when the SelectedIndex changes, hopefully this should be something in the XAML, rather than the code behind?

Or have I put the Opacity on the wrong tag in the XAML?

Mar 2, 2009 at 6:09 PM
ElementFlow does not update the CurrentPosition on the ItemsSource and this is why you are not seeing the update. You would have to do a little more work in the code-behind to retrieve the index of the item and then use the SelectedIndex to calculate the offset of the item. You could try exposing an attached Offset property from a class and use that in the DataTemplate trigger to set the opacity of the item.