Re: Easy Inventory System - How to

pieterv — Wed, 08 Jul 2009 13:00:19 GMT

Thanks Tim, works perfectly.

Re: Easy Inventory System - How to

sorskoot — Wed, 08 Jul 2009 07:54:09 GMT

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>

Easy Inventory System - How to

pieterv — Sat, 04 Jul 2009 14:41:14 GMT

Hi All,

Does anyone know of an open source example of how to accomplish the background scrolling effect the guys achieved here?

http://easyinventorysystem.com/inventory.aspx

Thanks!

Designing with Silverlight

Re: Easy Inventory System - How to

Re: Easy Inventory System - How to

Easy Inventory System - How to