Re: Easy Inventory System - How to

07-08-2009 3:54 AM |

If you look closely at this effect you'll see that it are only a few layers responding the movement of the mouse. Here's how it's done:

 Add a MouseMove event handler to the LayoutRoot Grid. Next, add 3 grids the LayoutRoot and name these BackgroundLayer1, 2 and 3. In the example below I've added a few ellipses to the backgroundlayer grids, but you can create your own of course. Add a LayoutTransform to each grid and set the CenterPoint 1,1. Name the TranslateTransform elements for easy access in the event handler.

Now let's talk some code. This is what the event handler looks like:

private void LayoutRoot_MouseMove(object sender, System.Windows.Input.MouseEventArgs e)
{
  //Get the mouse position
  Point q = e.GetPosition((UIElement)sender);		
		
  //update the background layers
  BackgroundLayer1Transform.X = -q.Y/24;
  BackgroundLayer1Transform.Y = -q.X/24;

  BackgroundLayer2Transform.X = -q.Y/16;
  BackgroundLayer2Transform.Y = -q.X/16;
		
  BackgroundLayer3Transform.X = -q.Y/8;
  BackgroundLayer3Transform.Y = -q.X/8;
}

The background layers are moving relative to the mouse position. You'll have to play a bit with the numbers to change the speed to what you feel comfortable with.

Here's the xaml for the example:

<UserControl
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
  xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  x:Class="BackgroundScrolling.MainControl"
  Width="640" Height="480" mc:Ignorable="d">

  <Grid x:Name="LayoutRoot" Background="#FF000000" MouseMove="LayoutRoot_MouseMove">
    <Grid x:Name="BackgroundLayer1" Margin="0,0,0,0" RenderTransformOrigin="1,1">
      <Grid.RenderTransform>
        <TransformGroup>
          <TranslateTransform X="0" Y="0" x:Name="BackgroundLayer1Transform"/>
        </TransformGroup>
      </Grid.RenderTransform>
      <Ellipse Fill="#3F7493FF" Stroke="#3FFFFFFF" StrokeThickness="2" Height="32" 
               HorizontalAlignment="Left" Margin="144,105,0,0" VerticalAlignment="Top" Width="32"/>
      <Ellipse Fill="#3F7493FF" Stroke="#3FFFFFFF" StrokeThickness="2" Height="32" 
               HorizontalAlignment="Right" Margin="0,187,193,0" VerticalAlignment="Top" Width="32"/>
      <Ellipse Fill="#3F7493FF" Stroke="#3FFFFFFF" StrokeThickness="2" Height="32" 
               HorizontalAlignment="Left" Margin="185,0,0,118" VerticalAlignment="Bottom" Width="32"/>
    </Grid>
    <Grid x:Name="BackgroundLayer2" Margin="0,0,0,0" RenderTransformOrigin="1,1">
      <Grid.RenderTransform>
        <TransformGroup>
          <TranslateTransform X="0" Y="0" x:Name="BackgroundLayer2Transform"/>
        </TransformGroup>
      </Grid.RenderTransform>
      <Ellipse Fill="#7F7493FF" Stroke="#7FFFFFFF" StrokeThickness="2" Height="48" 
               HorizontalAlignment="Left" Margin="174,192,0,0" VerticalAlignment="Top" Width="48"/>
      <Ellipse Fill="#7F7493FF" Stroke="#7FFFFFFF" StrokeThickness="2" Height="48" 
               HorizontalAlignment="Left" Margin="209,0,0,38" VerticalAlignment="Bottom" Width="48"/>
      <Ellipse Fill="#7F7493FF" Stroke="#7FFFFFFF" StrokeThickness="2" Height="48" 
               HorizontalAlignment="Right" Margin="0,125,115,0" VerticalAlignment="Top" Width="48"/>
      <Ellipse Fill="#7F7493FF" Stroke="#7FFFFFFF" StrokeThickness="2" Height="48" 
               HorizontalAlignment="Right" Margin="0,0,168,167" VerticalAlignment="Bottom" Width="48"/>
    </Grid>
    <Grid x:Name="BackgroundLayer3" Margin="0,0,0,0" RenderTransformOrigin="1,1">
      <Grid.RenderTransform>
         <TransformGroup>
            <TranslateTransform X="0" Y="0" x:Name="BackgroundLayer3Transform"/>
         </TransformGroup>
      </Grid.RenderTransform>
      <Ellipse Fill="#BF7493FF" Stroke="#BFFFFFFF" StrokeThickness="2" Height="64" 
               HorizontalAlignment="Left" Margin="101,321,0,0" VerticalAlignment="Top" Width="64"/>
      <Ellipse Fill="#BF7493FF" Stroke="#BFFFFFFF" StrokeThickness="2" Height="64" 
               HorizontalAlignment="Left" Margin="243,206,0,0" VerticalAlignment="Top" Width="64"/>
      <Ellipse Fill="#BF7493FF" Stroke="#BFFFFFFF" StrokeThickness="2" Height="64" 
               HorizontalAlignment="Right" Margin="0,101,181,0" VerticalAlignment="Top" Width="64"/>
      <Ellipse Fill="#BF7493FF" Stroke="#BFFFFFFF" StrokeThickness="2" Height="64" 
               HorizontalAlignment="Right" Margin="0,285,124,0" VerticalAlignment="Top" Width="64"/>
    </Grid>
  </Grid>
</UserControl>