2011-07-23 6 views
3

リストのスクロールバーとしてvsliderを使用するにはどうすればよいですか?私はこれを持っているが、ここからそれを把握することはできません。リストのスクロールバーとしてvsliderを使用するにはどうすればよいですか?

<?xml version="1.0" encoding="utf-8"?> 
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"  
      xmlns:mx="library://ns.adobe.com/flex/mx"  
      xmlns:s="library://ns.adobe.com/flex/spark" height="100%" width="100%"> 

<s:VSlider id="slider" minimum="0" maximum="{listy.height}" liveDragging="true"/> 

<s:List id="listy" width="50%" height="100"> 
    <s:layout> 
     <s:VerticalLayout id="vLayout" verticalScrollPosition="{slider.value}" /> 
    </s:layout> 

    <mx:ArrayCollection> 
     <fx:String>Flash</fx:String> 
     <fx:String>Director</fx:String> 
     <fx:String>Dreamweaver</fx:String> 
     <fx:String>ColdFusion</fx:String> 
     <fx:String>Flash</fx:String> 
     <fx:String>Director</fx:String> 
     <fx:String>Dreamweaver</fx:String> 
     <fx:String>ColdFusion</fx:String> 
     <fx:String>Flash</fx:String> 
     <fx:String>Director</fx:String> 
     <fx:String>Dreamweaver</fx:String> 
     <fx:String>ColdFusion</fx:String> 
    </mx:ArrayCollection> 
</s:List> 
</s:Application> 

EDIT:以下ネイトの提案を使用して、私は今、それが働いてんだけど、それはvsliderだけでなく、デフォルトのスクロールバーの両方が表示されます。どのようにデフォルトのスクロールバーを隠すのですか? verticalScrollPolicy = "off"に設定しようとしましたが、動作しませんでした。 thx

答えて

2

それは完全に可能です、私はそれをprooveすることを目指しています!すべての冗談を脇に控えて、ここでそれはちょうどいくつかの簡単なバインディングで動作している、あなたは非常に近い!

<?xml version="1.0" encoding="utf-8"?> 
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"  
       xmlns:mx="library://ns.adobe.com/flex/mx"  
       xmlns:s="library://ns.adobe.com/flex/spark" height="100%" width="100%"> 

    <s:Group> 
     <s:layout> 
      <s:HorizontalLayout/> 
     </s:layout> 

     <s:List id="listy" width="50%" height="100" 
       change="slider.value=listy.layout.verticalScrollPosition" creationComplete=" 
       listy.dataGroup.addEventListener(MouseEvent.MOUSE_WHEEL, function():void{ 
        slider.value=listy.layout.verticalScrollPosition} 
       );"> 
      <s:layout> 
       <s:VerticalLayout id="vLayout" verticalScrollPosition="{slider.value}" /> 
      </s:layout> 

      <mx:ArrayCollection> 
       <fx:String>Flash</fx:String> 
       <fx:String>Director</fx:String> 
       <fx:String>Dreamweaver</fx:String> 
       <fx:String>ColdFusion</fx:String> 
       <fx:String>Flash</fx:String> 
       <fx:String>Director</fx:String> 
       <fx:String>Dreamweaver</fx:String> 
       <fx:String>ColdFusion</fx:String> 
       <fx:String>Flash</fx:String> 
       <fx:String>Director</fx:String> 
       <fx:String>Dreamweaver</fx:String> 
       <fx:String>ColdFusion</fx:String> 
      </mx:ArrayCollection> 
     </s:List> 

     <s:VSlider id="slider" height="{listy.height}" 
        minimum="0" maximum="{listy.dataGroup.contentHeight - listy.height}" 
        showDataTip="false" scaleY="-1" liveDragging="true"/> 

    </s:Group> 
</s:Application> 

Pingの私、あなたがそれをどのように、なぜ:)

+0

非常にいいです。しかし、私の矢印キーを使ってリストをスクロールすると、vsliderは、 –

+0

BAHの詳細に従いません! J/k - あなたのために編集しました。リストのコンポーネントにchange = "slider.value = listy.layout.verticalScrollPosition"が追加されています。これは、選択した項目が変更されたときに、vsliderの位置を更新することを示します。ピースのケーキ – Nate

+0

非常にいいです。どうも! –

0

私があなたの目標に達することを提案する最良の方法はスキニングです。 と同じに見えるVScrollBarのスキンを作成します。その後、カスタムScrollerスキンを作成し(パターンとしてspark.skins.spark.ScrollerSkinとする)、そこにこれらのスクロールスキンを割り当てます。次にカスタムListスキン(spark.skins.spark.ListSkinに基づいて)を作成し、ScrollerのスキンをScrollerに割り当てます。

何らかの理由で元のVSliderを使用する必要がある場合は、Scrollerにスライダーを書き込んで、Listのスキンで使用する必要があります。

私はあなたに最初の方法をお勧めします。

0

どのようにリストのスクロールバーとしてvsliderを使用しますか?私はこれを持っているが、 はここからそれを把握することはできません。

残念ながら、私は、これは大きな手直しなしで可能であるとは考えていません。

リストは、ListSkin内でScrollerとDataGroupとして実装されています。
Scrollerには、2つのスキンパーツ、verticalScrollBarとhorizo​​ntalScrollBarがあります。 veritcalScrollBarをVSliderに置き換えたいとします。

残念ながら、スキンにはVScrollBarインスタンスが必要であり、そのクラスを置き換えるために使用できるインターフェイスクラスはありません。 (Scrollerの実装は、Flex 2/3のアプローチを使用して実装することができたため、難しくなりませんでした)

この作業を行うには黒い魔法を使用しています。

しかし、VscrollBarをVSliderのように見せかけることは、あなたの最善の策のようです。

+0

これはちょうどdownvotedれたを取得しない場合。どうして? – JeffryHouser

関連する問題