Question

I’m working on a very eye-candy program and I’m required to add a reflection and a 3D depth to the controls.

On both cases I need to paint the control a couple of times, but with changes:

For the reflection I’ll have to repaint the control again at the bottom + flip it.

And as for the 3D depth, it’s just a lot of copies behind + to the side.

The question is how can I get the image of the control in order to modify it and paint it below / behind it? Do you have any caveats and warnings / helpful tips regarding such actions? (I’ve never tried anything similar before).

Many thanks.

Answer 1

In WPF you can use a VisualBrush as the background/fill of another element (such as a Rectangle). This VisualBrush has a Visual property that can be bound to another control in order to mimic its content. Using transforms and alpha masks on this control can help apply reflection-style effects. For example:

  <StackPanel Width="200">  
    <TextBox x:Name="tb">Hello world</TextBox>
    <Rectangle Height="40" HorizontalAlignment="Stretch">
      <Rectangle.Fill>
        <VisualBrush Visual="{Binding ElementName=tb}"  />
      </Rectangle.Fill>
      <Rectangle.RenderTransform>
        <ScaleTransform CenterY="20" ScaleY="-1" />
      </Rectangle.RenderTransform>
      <Rectangle.OpacityMask>
        <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
          <GradientStop Color="#00000000" Offset="0" />
          <GradientStop Color="#FFFFFFFF" Offset="1" />
        </LinearGradientBrush>
      </Rectangle.OpacityMask>
    </Rectangle>
  </StackPanel>