2 Replies Latest reply on Aug 8, 2011 4:11 AM by r4raghs

    Spark List Effects

    Francisc Level 3

      Hello!

       

      How can I achieve what I used to in MX Lists with this:

       

      <mx:DefaultTileListEffect id="myTileListEffect"
                  fadeOutDuration="500"
                  fadeInDuration="500"
                  moveDuration="1500" />

       

      Thanks!

        • 1. Re: Spark List Effects
          VRPDeveloper Level 3

          There is no direct propertyor method which you can use to get this things to be done. But you can do it in this way

           

          <?xml version="1.0" encoding="utf-8"?>
          <!-- http://blog.flexexamples.com/2010/06/25/fading-an-item-renderer-background-fill-on-a-spark-list-control-in-flex-4/ -->
          <s:Application name="Spark_List_itemRenderer_fade_test"
                  xmlns:fx="http://ns.adobe.com/mxml/2009"
                  xmlns:s="library://ns.adobe.com/flex/spark"
                  xmlns:mx="library://ns.adobe.com/flex/mx">

              <s:List id="lst"
                      itemRenderer="skins.FadingItemRenderer"
                      horizontalCenter="0" verticalCenter="0">
                  <s:layout>
                      <s:VerticalLayout gap="0"
                              horizontalAlign="contentJustify"
                              requestedRowCount="7" />
                  </s:layout>
                  <s:dataProvider>
                      <s:ArrayList source="[One,Two,Three,Four,Five,Six,Seven,Eight,Nine,Ten]" />
                  </s:dataProvider>
              </s:List>

          </s:Application>

           

          And the custom Spark List item renderer, skins/FadingItemRenderer.mxml, is as follows:

           

          <?xml version="1.0" encoding="utf-8"?>
          <!-- http://blog.flexexamples.com/2010/06/25/fading-an-item-renderer-background-fill-on-a-spark-list-control-in-flex-4/ -->
          <s:ItemRenderer name="FadingItemRenderer"
                  xmlns:fx="http://ns.adobe.com/mxml/2009"
                  xmlns:s="library://ns.adobe.com/flex/spark"
                  xmlns:mx="library://ns.adobe.com/flex/mx"
                  autoDrawBackground="false">
              <s:states>
                  <s:State name="normal" />
                  <s:State name="hovered" />
                  <s:State name="selected" />
              </s:states>
              <s:transitions>
                  <s:Transition fromState="normal" toState="hovered" autoReverse="true">
                      <s:Fade target="{bgRect}" duration="600" />
                  </s:Transition>
              </s:transitions>

              <s:Rect id="bgRect"
                      includeIn="hovered,selected"
                      left="0" right="0" top="0" bottom="0">
                  <s:fill>
                      <s:SolidColor color="{getStyle('rollOverColor')}"
                                    color.selected="{getStyle('selectionColor')}" />
                  </s:fill>
              </s:Rect>

              <s:Label id="labelDisplay"
                      left="5" right="5" top="5" bottom="4" />

          </s:ItemRenderer>

           

          Hope it will help you!!

          • 2. Re: Spark List Effects
            r4raghs Level 1

            this one does n't work for me !

             

            any workaround to achieve DefaultTileListEffect for spark list with tilelayout in AIR ?