A recently requested feature for one of the apps we’re working on was an animation for navigating between forms that visually slides the old form out at the same time the new form is sliding in. Without going into much detail about the architecture of the form navigation, I’ll just tell you that this was problematic because we needed the old form to appear in the ‘dummy’ Grid that slides off the client area of the app and the new form to simultaneously appear in the FormControl that slides into place.
The original idea was to make a new
ImageBrush DependencyProperty for that screen and bind the brush to the
Background of the dummy grid. This still leaves the problem of getting the
ImageSource for the
ImageBrush. This would likely entail taking a screenshot of a subset of the app client area and making a
BitmapImage out of it… there’s gotta be a better way. Enter
VisualBrush is constructed using a
FrameworkElement, etc), so making the brush was just a matter of passing it the
Control of the previous form once a form transition was initiated. That’s pretty much it… or so I thought. It turned out that the aspect ratio of the controls used to make the brush and the aspect ratio of the dummy grid were often quite different, which produced an effect where the entire height of the longer forms was scrunched into a height 3 or 4 times less than their
VisualBrush inherits from
TileBrush, this problem is easily abated.
TileBrush exposes a property called
Viewport that allows you to set the dimensions of the base tile. I used this to change the aspect ratio of the base tile as follows:
double height = lastForm.Control.ActualHeight / dummyGrid.ActualHeight;
var visualBrush = new VisualBrush(lastForm.Control)
TileMode = System.Windows.Media.TileMode.None,
Viewport = new Rect(0, 0, 1, height)
TileMode.None just ensures that the base tile is not repeated (not entirely necessary in this case). Also you may have noticed that this does not take into consideration the user’s ‘position’ in the form… it always shows the form as it appears when the user has not scrolled down at all. This addition could be implemented by getting the position of the scroll thumb on the track, normalizing it to a value between 0 and 1, and using this value as follows:
double normalizedScrollThumbPosition = blah blah;
Viewport = new Rect(0, normalizedScrollThumbPosition, 1, normalizedScrollThumbPosition + height);
In general, the
VisualBrush is essentially an easy way to apply textures to controls without having to deal with the imaging classes at all (which is always nice).
If you have any questions, feel free to comment below.
BlogSlayer is the official blog of FrogSlayer, a custom software product development shop in Bryan/College Station, Texas. Our specialty is getting your product to market in 90 days or less. If you would like a free consultation for your project or big idea, email us at email@example.com. You can also connect with us on Twitter, Facebook, or LinkedIn.