ZuneUIXTools/test/2.1/SCROLLBAR.UIX

<!-- Copyright (C) Microsoft Corporation. All rights reserved. -->
<UIX
  xmlns="http://schemas.microsoft.com/2007/uix"
  xmlns:sys="assembly://mscorlib/System"
  xmlns:iris="assembly://UIX/Microsoft.Iris"
  xmlns:zune="assembly://ZuneShell/ZuneUI"
  xmlns:styles="res://ZuneShellResources!Styles.uix"
  xmlns:animations="res://ZuneShellResources!Animations.uix"
  xmlns:me="Me">

  <UI Name="ScrollControl">
    <Properties>
      <ScrollingData Name="ScrollData" ScrollingData="$Required"/>
      <Boolean Name="Horizontal" Boolean="false"/>
      <Boolean Name="RegionHover" Boolean="false"/>
    </Properties>
  </UI>

  <UI Name="ScrollBar" Base="me:ScrollControl">
    <Properties>
      <Boolean Name="ClickToPage" Boolean="true"/>

      
      <Color Name="ThumbColor" Color="{styles:Styles.ScrollBarThumb}"/>

      <Color Name="BarColor" Color="{styles:Styles.ColumnDivider}"/>
      <Color Name="PageColor" Color="{styles:Styles.ScrollBarBackground}"/>

      <Color Name="ScrollPathColor" Color="{styles:Styles.ScrollPath}"/>

      
      <Int32 Name="Size" Int32="11"/>

      <Int32 Name="MinimumThumbSize" Int32="25"/>
    </Properties>

    <Locals>
      <iris:Command Name="ScrollUpCommand"/>
      <iris:Command Name="ScrollDownCommand"/>
    </Locals>

    <Input>
      
      <ClickHandler Name="RightClickInterceptor" HandlerStage="Direct,Bubbled" ClickType="RightMouse" />
    </Input>

    <Scripts>
      
      <Script>
        bool canScroll = ([ScrollData.CanScrollUp] || [ScrollData.CanScrollDown]);

        Root.Visible = canScroll;
        UI.Enabled = canScroll;
      </Script>

      <Script>
        if ([Horizontal])
        {
          Root.MaximumSize = new Size(0, Size);
        }
        else
        {
          Root.MaximumSize = new Size(Size, 0);
        }
      </Script>

      <Script>Bar.Horizontal = [Horizontal];</Script>

      <Script>
        if ([RegionHover])
        {
          Bar.RegionHover = true;
        }
        else
        {
          Bar.RegionHover = false;
        }
      </Script>
    </Scripts>

    <Content>
      <Panel Name="Root" Layout="Dock">
        <Children>

          <me:ScrollBarArea Name="Bar" ScrollData="{ScrollData}" Horizontal="{Horizontal}"
              ClickToPage="{ClickToPage}" ThumbColor="{ThumbColor}" BarColor="{BarColor}"
              ScrollPathColor="{ScrollPathColor}" MinimumThumbSize="{MinimumThumbSize}">
          </me:ScrollBarArea>

        </Children>
      </Panel>
    </Content>
  </UI>

  <UI Name="ScrollBarArea">
    <Properties>
      <ScrollingData Name="ScrollData" ScrollingData="$Required"/>
      <Boolean Name="Horizontal" Boolean="$Required"/>

      <Boolean Name="ClickToPage" Boolean="true"/>

      <Color Name="ThumbColor" Color="{styles:Styles.PrimaryLabelSelected}"/>
      <Color Name="BarColor" Color="{styles:Styles.PrimaryLabel}"/>
      <Color Name="ScrollPathColor" Color="{styles:Styles.SecondaryLabel}"/>
      <Color Name="PageColor" Color="{ScrollPathColor}"/>

      <Int32 Name="ArrowSize" Int32="12"/>

      <Boolean Name="RegionHover" Boolean="false"/>

      <Int32 Name="MinimumThumbSize" Int32="$Required"/>

      <AnchorLayoutInput Name="PageUpAnchorVertical"        Top="Parent,0"        Bottom="Current,0"    Left="Current,0,3"  Right="Current,1"/>
      <AnchorLayoutInput Name="PageDownAnchorVertical"      Top="Current,1"       Bottom="Parent,1"     Left="Current,0,3"  Right="Current,1"/>
      <AnchorLayoutInput Name="ThumbAnchorVertical"         Top="Parent,0.5"      Bottom="Parent,0.6"   Left="Parent,0"     Right="Parent,1"/>
      <AnchorLayoutInput Name="BackgroundAnchorVertical"    Top="Parent,0"        Bottom="Parent,1"     Left="Current,1"    Right="Current,1,1"/>
      <AnchorLayoutInput Name="ScrollPathAnchorVertical"    Top="Parent,0"        Bottom="Parent,1"     Left="Parent,0,3"   Right="Current,1"/>
      <AnchorLayoutInput Name="ShadowAnchorVertical"        Top="Current,0,-3"    Bottom="Current,1,3"  Left="Current,0"    Right="Current,1" ContributesToWidth="false" ContributesToHeight="false"/>
      <AnchorLayoutInput Name="SecondArrowVertical"         Right="Parent,1"      Bottom="Parent,1,37"/>

      <AnchorLayoutInput Name="PageUpAnchorHorizontal"      Left="Parent,0"       Right="Current,0"     Top="Current,0,3"   Bottom="Current,1"/>
      <AnchorLayoutInput Name="PageDownAnchorHorizontal"    Left="Current,1"      Right="Parent,1"      Top="Current,0,3"   Bottom="Current,1"/>
      <AnchorLayoutInput Name="ThumbAnchorHorizontal"       Left="Parent,0.5"     Right="Parent,0.6"    Top="Parent,0"      Bottom="Parent,1"/>
      <AnchorLayoutInput Name="BackgroundAnchorHorizontal"  Left="Parent,0"       Right="Parent,1"      Top="Current,1"     Bottom="Current,1,1"/>
      <AnchorLayoutInput Name="ScrollPathAnchorHorizontal"  Left="Parent,0"       Right="Parent,1"      Top="Current,0,3"   Bottom="Background,0"/>
      <AnchorLayoutInput Name="ShadowAnchorHorizontal"      Left="Current,0,-3"   Right="Current,1,3"   Top="Current,0"     Bottom="Current,1" ContributesToWidth="false" ContributesToHeight="false"/>
      <AnchorLayoutInput Name="SecondArrowHorizontal"       Right="Parent,1,37"   Bottom="Parent,1"/>
    </Properties>

    <Locals>
      
      <AnchorLayoutInput Name="DummyInput"/>
      <AnchorLayoutInput Name="LayoutInput"/>
      <AnchorLayoutInput Name="ShadowLayout"/>

      <iris:Command Name="PageUpCommand" />
      <iris:Command Name="PageDownCommand" />

      
      <Single Name="InitialPosition"/>
    </Locals>

    <Input>
      <DragHandler Name="Dragger"/>
    </Input>

    <Scripts>

      
      <Script>
        UI.AllowDoubleClicks = false;
      </Script>

      <Script>
        
        
        Dragger.RelativeTo = ScrollableRegion;
      </Script>

      <Script>
        if ([Horizontal])
        {
          ThumbAnchorHorizontal.Right.Offset = MinimumThumbSize;
          PageDownAnchorHorizontal.Right.Offset = MinimumThumbSize;
          BackgroundAnchorHorizontal.Right.Offset = MinimumThumbSize;
          ScrollPathAnchorHorizontal.Right.Offset = MinimumThumbSize;

          LayoutInput = ThumbAnchorHorizontal;

          PageUp.LayoutInput      = PageUpAnchorHorizontal;
          PageDown.LayoutInput    = PageDownAnchorHorizontal;
          Background.LayoutInput  = BackgroundAnchorHorizontal;
          ScrollPath.LayoutInput  = ScrollPathAnchorHorizontal;
          SecondArrow.LayoutInput = SecondArrowHorizontal;

          Shadow.LayoutInput = ShadowAnchorHorizontal;
          Shadow.Content = styles:Styles.ScrollbarShadowHoverHoriz;

          Current.Margins = new Inset(0,3,0,0);
          Accent.Content = styles:Styles.ScrollbarAccentHoriz;

          ScrollableRegion.Margins = new Inset(ArrowSize, 0, MinimumThumbSize + ArrowSize, 0);

          FirstArrow.Content  = styles:Styles.ScrollbarArrowLeft;
          SecondArrow.Content = styles:Styles.ScrollbarArrowRight;
          FirstArrow.Margins = new Inset(-8,5,0,0);
          SecondArrow.Margins = new Inset(0,0,5,1);

          PageUp.Margins = new Inset(ArrowSize * -1,0,0,0);
          PageDown.Margins = new Inset(0,0,ArrowSize * -1,0);

          Background.Margins = new Inset(ArrowSize * -1,0,ArrowSize * -1,0);
          ScrollPath.Margins = new Inset(ArrowSize * -1,0,ArrowSize * -1,0);
        }
        else
        {
          ThumbAnchorVertical.Bottom.Offset = MinimumThumbSize;
          PageDownAnchorVertical.Bottom.Offset = MinimumThumbSize;
          BackgroundAnchorVertical.Bottom.Offset = MinimumThumbSize;
          ScrollPathAnchorVertical.Bottom.Offset = MinimumThumbSize;

          LayoutInput = ThumbAnchorVertical;

          PageUp.LayoutInput      = PageUpAnchorVertical;
          PageDown.LayoutInput    = PageDownAnchorVertical;
          Background.LayoutInput  = BackgroundAnchorVertical;
          ScrollPath.LayoutInput  = ScrollPathAnchorVertical;
          SecondArrow.LayoutInput = SecondArrowVertical;

          Shadow.LayoutInput = ShadowAnchorVertical;
          Shadow.Content = styles:Styles.ScrollbarShadowHoverVert;

          Current.Margins = new Inset(3,0,0,0);
          Accent.Content = styles:Styles.ScrollbarAccentVert;

          ScrollableRegion.Margins = new Inset(0, ArrowSize, 0, MinimumThumbSize + ArrowSize);

          FirstArrow.Content  = styles:Styles.ScrollbarArrowUp;
          SecondArrow.Content = styles:Styles.ScrollbarArrowDown;
          FirstArrow.Margins = new Inset(5,-8,0,0);
          SecondArrow.Margins = new Inset(0,0,1,5);

          PageUp.Margins = new Inset(0,ArrowSize * -1,0,0);
          PageDown.Margins = new Inset(0,0,0,ArrowSize * -1);

          Background.Margins = new Inset(0,ArrowSize * -1,0,ArrowSize * -1);
          ScrollPath.Margins = new Inset(0,ArrowSize * -1,0,ArrowSize * -1);
        }
      </Script>

      
      <Script>
        float rawPercent = [ScrollData.CurrentPage] - 1.0;
        float rawBottomPercent = rawPercent + 1.0;

        float topPercent = rawPercent / [ScrollData.TotalPages];
        float bottomPercent = rawBottomPercent / ScrollData.TotalPages;

        if ([Horizontal])
        {
          LayoutInput.Left.Percent = topPercent;
          LayoutInput.Right.Percent = bottomPercent;
        }
        else
        {
          LayoutInput.Top.Percent = topPercent;
          LayoutInput.Bottom.Percent = bottomPercent;
        }

        Current.LayoutInput = DummyInput;
        Current.LayoutInput = LayoutInput;
      </Script>

      <Script>
        if ([Dragger.Dragging])
        {
          if ([Horizontal])
          {
            Shadow.Content = styles:Styles.ScrollbarShadowPressedHoriz;
          }
          else
          {
            Shadow.Content = styles:Styles.ScrollbarShadowPressedVert;
          }
        }
      </Script>

      <Script>
        if ([RegionHover])
        {
          ScrollPath.Visible = true;
        }
        else
        {
          ScrollPath.Visible = false;
        }
      </Script>

      <Script>
        
        if ([Dragger.Dragging])
          InitialPosition = (ScrollData.CurrentPage - 1.0) / ScrollData.TotalPages;
      </Script>

      <Script><![CDATA[
       [DeclareTrigger(Dragger.EndPosition)]

        float delta = 0.0;

        
        
        int maxPerpendicularDelta = 150;
        if (Horizontal)
        {
          if (sys:Math.Abs([Dragger.AbsoluteDragSize].Height) < maxPerpendicularDelta)
            delta = Dragger.RelativeDragSize.X;
        }
        else
        {
          if (sys:Math.Abs([Dragger.AbsoluteDragSize].Width) < maxPerpendicularDelta)
            delta = [Dragger.RelativeDragSize].Y;
        }

        
        float trackSize = 1.0 - (1.0 / ScrollData.TotalPages);

        
        
        
        ScrollData.ScrollToPosition( (InitialPosition + delta) / trackSize );
     ]]></Script>

      <Script>
        [DeclareTrigger(PageUpCommand.Invoked)]
        ScrollData.PageUp();
      </Script>

      <Script>
        [DeclareTrigger(PageDownCommand.Invoked)]
        ScrollData.PageDown();
      </Script>
    </Scripts>

    <Content>
      <Panel Name="Root">
        <Children>

          <Panel Name="ScrollableRegion" Layout="Anchor">
            <Children>

              
              
              <me:ClickArea Name="PageUp" Visible="{ClickToPage}" FocusedColor="{PageColor}"
                  Model="{PageUpCommand}" Alpha="0.5"/>

              
              
              <me:ClickArea Name="PageDown" Visible="{ClickToPage}" FocusedColor="{PageColor}"
                  Model="{PageDownCommand}" Alpha="0.5"/>

              
              <ColorFill Name="Current" Content="{ThumbColor}" Layout="Center">
                <Children>

                  <Graphic Name="Accent"/>

                </Children>
              </ColorFill>



                  <Graphic Name="FirstArrow" SizingPolicy="SizeToContent" StretchingPolicy="None">
                    <LayoutInput>
                      <AnchorLayoutInput Left="Parent,0" Top="Parent,0"/>
                    </LayoutInput>
                  </Graphic>

                  <Graphic Name="SecondArrow" SizingPolicy="SizeToContent" StretchingPolicy="None"/>

              <Graphic Name="Shadow"/>

              
              <ColorFill Name="Background" Content="{BarColor}"/>

              <ColorFill Name="ScrollPath"  Content="{ScrollPathColor}" Layout="Anchor">
                <Animations>
                  <Animation Animation="{animations:Animations.ComponentShow}" />
                </Animations>
              </ColorFill>

            </Children>
          </Panel>

        </Children>
      </Panel>
    </Content>
  </UI>

  
  <UI Name="ClickArea">
    <Properties>
      <iris:Command Name="Model" Command="$Required"/>

      <Color Name="Color" Color="Transparent"/>
      <Color Name="FocusedColor" Color="LightGray"/>
    </Properties>

    <Locals>
      <Timer Name="RepeatTimer" AutoRepeat="true" Enabled="false"/>
    </Locals>

    <Input>
      <DragHandler Name="Dragger"/>
    </Input>

    <Scripts>

      
      <Script>
        UI.AllowDoubleClicks = false;
      </Script>

      <Script>
        if (![Dragger.Dragging])
        {
          RepeatTimer.Interval = zune:OSInfo.DefaultKeyDelay;
        }
      </Script>

      

      <Script>
        if ([UI.MouseFocus])
        {
          Content.Content = FocusedColor;
        }
        else
        {
          Content.Content = Color;
        }
      </Script>


      <Script><![CDATA[
        [InitialEvaluate(false)]
        if ([Dragger.Dragging] && Model != null)
        {
          Model.Invoke();
          RepeatTimer.Enabled = true;
        }
        else
        {
          RepeatTimer.Enabled = false;
        }
      ]]></Script>

      <Script><![CDATA[
        [InitialEvaluate(false)]
        [DeclareTrigger(Dragger.EndPosition)]

        Vector3 draggerPosition = Dragger.EndPosition;
        float draggerX = draggerPosition.X;
        float draggerY = draggerPosition.Y;

        bool repeatEnabled = ((draggerX >= 0.0) && (draggerX <= 1.0) &&
                              (draggerY >= 0.0) && (draggerY <= 1.0));

        RepeatTimer.Enabled = (Model != null && repeatEnabled);

      ]]></Script>


      <Script>
        [InitialEvaluate(false)]
        [DeclareTrigger(RepeatTimer.Tick)]

        
        if (Dragger.Dragging &amp;&amp; RepeatTimer.Enabled)
        {
          Model.Invoke();
        }
        else
        {
          RepeatTimer.Enabled = false;
        }

        RepeatTimer.Interval = zune:OSInfo.DefaultKeyRepeat;
      </Script>
    </Scripts>

    <Content>
      <ColorFill Name="Content" Layout="Fill" />
    </Content>
  </UI>

</UIX>