ElementFlow - Reflections

Dec 17, 2008 at 12:11 PM


I'm unable to find the property that sets the reflection  for the ElementFlow like in your video on YouTube. I set the HasReflection property to True, but that does not really help.



May 26, 2009 at 5:03 PM


I've got the same problem. Did you manage to get it working? Could you post some of your code to clarify?

Thanks in advance.

May 27, 2009 at 9:48 AM


the reflection must be defined in your Template.

To reproduce the ElementFlow shown on Youtube perform the following steps:

  • Open 'ElementFlow/Window1.xaml'
  • Go to line 135 and set the ItemTemplate of the ListBox to:

ItemTemplate="{StaticResource TestDataTemplate_Reflection}"

  • No go to line 56 and change the Height of Rectangle within the TestDataTemplate_Reflection-Template to:

<Rectangle OpacityMask="{StaticResource ReflectionBrush}"
                       Grid.Row="1" Height="300">

Now the reflection should be visible.


But one problem remains: The selected item has a white background. Any possibilty to remove this?

May 27, 2009 at 11:24 AM

The White border could possibly be because of a Border element in your template. The Border may be having a BorderBrush set on it.

May 27, 2009 at 12:09 PM
Edited May 27, 2009 at 12:13 PM

Hi pavanpodila,

I took a closer look at the problem:

To reproduce the problem start ElementFlow with the ReflectionTemplate as described above.

One element in the flow has a white background (not the selected item!). If you add some images in the StringCollection.cs file, the image with the white background changes by chance. I have no idea what causes this issue.

If required i could provide a screenshot.


May 27, 2009 at 6:21 PM


       I am seeing that issue on my machine too but it completely stumps me. This has never happened in any of my earlier builds. Will have to dig into it when I get some free time. Let me know if you make any progress in the meantime.

May 27, 2009 at 7:02 PM

Hi Daniel,

awesome, this works. Now I still got to get rid of the distortion. I'd like to be able to scale just the source image and the reflection should resize, too, thereby maintaining the aspect ratio. Got a hint on that as well? Thanks so much!

May 27, 2009 at 7:46 PM


I'll let you know if I find a solution.


That's pretty easy, you just have to bind to the ActualHeight/Width, look at the following example:

<Rectangle OpacityMask="{StaticResource ReflectionBrush}" Grid.Row="1" Height="{Binding Path=ActualHeight, ElementName=ElementVisual}">
        <VisualBrush Visual="{Binding ElementName=ElementVisual}"
                <ScaleTransform ScaleY="-1" CenterY="0.5"/>

The Height of the Rectangle is now bound to the Height of the ElementVisual and the Offset of the reflection is independant from the Height.

May 28, 2009 at 9:22 AM

@daniel: magnificent, it works. But do I always have to set height as twice as much as width in the actual ElementFlow item to maintain a correct aspect ratio? Moreover, how can I properly scale the images?

Thanks everyone for helping out...

By the way: it ran into that white-border problem, too, when I loaded the images statically (via StringCollection.cs). But it disappeared when loading images dynamically. Maybe that can help to narrow down the problem...