Create an image for Windows 8 & Windows Phone

This effect is similar to the album that comes with Windows Phone, which is described as "moving an image back and forth in a certain area" in Chinese characters ".

This effect has been seen in many places, such as "Netease cloud reading" and "Fresh Fruit broadcast". The images are no longer static and cool.

Coding4fun hasSource codeThe general principle is a clip + a displacement animation.

Think about it as a panel container that nested an image and moved it with a displacement animation.Code

 

    canvas   height  =" 375 "  width  =" 500 " >    image   X: name   = "dream"   stretch   =" uniformtofill "  source   =" images/dream.jpg " >    image  >    canvas  > 

Unfortunately .. There is a problem, that is, the image will make the canvas large. Originally, WPF had a "cliptobound" attribute to cut out the portion of the internal element that exceeded, however, it seems that the layout of the Windows Store app XAML mode does not provide this attribute. Coding4fun achieves this effect. He wrote a dependency attribute that is super easy to use. In his "coding4fun. toolkit. Controls. Binding. frameworkelementbinding", the principle is to use clip and rectanglegeometry, so the following code is available.

  <  Canvas  Height  = "375"  Width  = "500"  >              <  Canvas. Clip  >                  <  Rectanglegeometry Rect  = "0 0 500 375"   />              </  Canvas. Clip  >              <  Image  X: Name  = "Dream"  Stretch  = "Uniformtofill"  Source  = "Images/dream.jpg"  >                  < Image. rendertransform  >                      <  Compositetransform  />                  </  Image. rendertransform  >              </  Image  >   </  Canvas  > 

Then, an animation is used to calculate the height and bandwidth of the current image to obtain the expected displacement value. To respond to the animation, an event trigger is added and the animation is started when the grid is loaded.

    < Grid. triggers  >              <  Eventtrigger  Routedevent  = "Grid. Loaded"   >                  <  Beginstoryboard  >                      <  Storyboard  Autoreverse  = "True"  Repeatbehavior = "Forever"  >                          <  Doubleanimationusingkeyframes  Storyboard. targetproperty  = "(Uielement. rendertransform). (compositetransform. translatey )"  Storyboard. targetname  = "Dream"  >                              <  Splinedoublekeyframe  Keytime  = "0: 0: 1"  />                             <  Splinedoublekeyframe  Keytime  = "0: 16"  Value  = "-263"  />                              <  Splinedoublekeyframe  Keytime  = "0: 17"  Value  = "-263"   />                          </  Doubleanimationusingkeyframes >                      </  Storyboard  >                  </  Beginstoryboard  >                  <  Beginstoryboard  >                      <  Storyboard  Autoreverse  = "True"  Repeatbehavior  = "Forever" >                          <  Doubleanimationusingkeyframes  Begintime  = "0: 17"  Storyboard. targetproperty  = "(Uielement. rendertransform). (compositetransform. translatex )"  Storyboard. targetname  = "Dream"  >                              <  Splinedoublekeyframe  Keytime = "0: 0: 1"  />                              <  Splinedoublekeyframe  Keytime  = "0: 16"  Value  = "-350"  />                              <  Splinedoublekeyframe  Keytime  = "0: 17"  Value  = "-350"   />                         </  Doubleanimationusingkeyframes  >                      </  Storyboard  >                  </  Beginstoryboard  >              </  Eventtrigger  >          </  Grid. triggers  > 

Wow ~ When the above animation was implemented, it shifted horizontally and vertically in 1-16 seconds at the same time, and then paused for one second before moving back.

This is what the visual test is like. This can be implemented by code. If you are interested, encapsulate the code. Otherwise, you must write a trigger every time to start the animation. It feels "bad ..

Then, it's easy to get a full screen effect. At least clip is not needed.

  <  Stackpanel  Margin  = "0-300 0 0"  >              <  Image  X: Name  = "Dream"  Stretch  = "Uniformtofill"  Source  = "Images/shorttop.jpg"  >                 <  Image. rendertransform  >                      <  Compositetransform  />                  </  Image. rendertransform  >              </  Image  >   </  Stackpanel  > 

The animation effect is similar to the above

  < Grid. triggers  >              <  Eventtrigger  Routedevent  = "Grid. Loaded"   >                  <  Beginstoryboard  >                      <  Storyboard  Autoreverse  = "True"  Repeatbehavior = "Forever"  >                          <  Doubleanimationusingkeyframes  Storyboard. targetproperty  = "(Uielement. rendertransform). (compositetransform. translatey )"  Storyboard. targetname  = "Dream"  >                              <  Splinedoublekeyframe  Keytime  = "0: 0: 1"  />                             <  Splinedoublekeyframe  Keytime  = "0: 5"  Value  = "300"  />                              <  Splinedoublekeyframe  Keytime  = "0: 0"  Value  = "300"   />                          </  Doubleanimationusingkeyframes >                      </  Storyboard  >                  </  Beginstoryboard  >              </  Eventtrigger  >          </  Grid. triggers  > 

However, please note that the image "drem" needs to increase its height by 300. Otherwise, an "image removal from the screen" phenomenon will occur.

Increase the width of drem by 300 using code or bind.

 
Dream. Height = Window. Current. bounds. height +300;
 

OK.

Then attach

Windows Phone Communication Group "157153754"

Windows 8 Communication Group "243302359"

Happy coding!