Windows XP
Windows Vista
Windows 7
Windows Azure
Windows Server
Windows Phone
Windows Phone

Windows Phone 7 : The Silverlight Controls (part 9) - Layout Controls - ScrollViewer Controls

1/20/2014 2:08:28 AM
3.4. ScrollViewer Controls

ListBox controls provide a very useful way of scrolling up and down through a list of items. Sometimes you will want a layout that is more flexible than the ListBox, but that is still too large to display all at once and requires the ability to scroll. None of the container controls that we have seen so far has any scrolling capability at all because it is provided instead by the ScrollViewer control.

ScrollViewer controls will take into account the size of the control that is placed inside them, and if it is larger than the ScrollViewer, then automatic scrolling facilities will be made available to allow the user to access the parts of the contained control that would otherwise be out of view. Only a single control can be directly contained within a ScrollViewer, but by using a Grid, StackPanel, or Canvas as that control, we can then place additional child controls indirectly into the ScrollViewer, too.

The ScrollViewer contains a StackPanel whose Width and Height have both been set to Auto so that they automatically expand to match the sizes of the controls contained within. Eight Button controls have then been placed into the StackPanel, causing it to grow much larger than the ScrollViewer that contains it.

When the project is launched, the first five buttons are visible because they fit within the area defined for the ScrollViewer. The remaining buttons are still accessible, however, by dragging the area inside the ScrollViewer. It is actually very tolerant of where we initiate the drag: even if you start dragging within one of the buttons, it will still understand the gesture and begin scrolling its contents.

Figure 19 shows the ScrollViewerExample project with its StackPanel partly scrolled. The scrollbar on the right indicates the position through the overall extent of the StackPanel.

Figure 19. Scrolling through the contents of a ScrollViewer

The ScrollViewer can be controlled using its HorizontalScrollBarVisible and VerticalScrollBarVisible properties. Each of these can be set to Disabled, Auto, Hidden, or Visible; and by default it is set to Auto for vertical scrolling and Disabled for horizontal scrolling.

Setting one of these properties to Auto or Visible will enable scrolling in that particular direction. On desktop Silverlight apps, Auto will cause the scrollbar to appear only when it is actually needed, whereas Visible will display it all the time; but in Windows Phone 7, the scrollbar always appears just when it is actually being scrolled. If the scrollbar is set to Disabled, scrolling in that direction will be switched off, even if the content is large enough to allow scrolling. Finally, Hidden scrollbars allow scrolling, but don't display a scrollbar.

3.5. Border Controls

The final control that we will look at is a simple one. Many of the other controls we have seen support a background color or a border, but they are not supported in all instances. The TextBlock, for example, offers neither of these properties. Any time we find a need for a background or border, but the control we need it for does not provide it, we can place that control into a Border.

Border controls allow a single child control to be placed inside them and can then set a background color behind it and a border around it.

The border thickness can be set independently for each of its four edges. The BorderThickness property can be given a single number (which it will use for all edges), two numbers (the first will apply to the left and right edge; the second applies to the top and bottom) or four numbers (for the left, top, right, and bottom edges), separated by spaces or commas.

The control can also display rounded corners using the CornerRadius property.

While the Border can be defined with a Width and Height if you want, it is also possible to omit both of these properties from its definition. When the control is configured in this way, it will exactly match itself to the control that is contained within it.

4. User Interface Design

Clearly there is an enormous amount of complexity and flexibility in the Silverlight page designs. Because Silverlight's original environment was inside a web browser, some of those functions are not appropriate or do not function properly on Windows Phone 7 devices. The vast majority performs exactly as expected, however, providing enormous potential for flexible UIs and game configurations.

If you are unsure about how a control should be presented or what its features are, Microsoft has released a User Interface Design and Interaction Guide document that might well provide answers or inspiration. You can visit http://go.microsoft.com/?linkid=9713252 to download it as a PDF file.

Other -----------------
- Windows Phone 7 : The Silverlight Controls (part 1) - Display Controls -TextBlock Controls, Image Controls, ProgressBar Controls
- Windows Phone 8 : Using Sound (part 2) - Recording Sounds
- Windows Phone 8 : Using Sound (part 1) - Playing Sounds with MediaElement, Using XNA Libraries, Playing Sounds with XNA, Adjusting Playback
- Windows Phone 8 : Localizing Your Phone Application
- Windows Phone 7 : Running Silverlight Projects in the Browser (part 2)
- Windows Phone 7 : Running Silverlight Projects in the Browser (part 1)
- Windows Phone 7 : Running XNA Projects in Windows (part 5)
- Windows Phone 7 : Running XNA Projects in Windows (part 4) - Converting the Game Framework to Run on Windows
- Windows Phone 7 : Running XNA Projects in Windows (part 3) - Input Differences, Isolated Storage, Application Life Cycle
- Windows Phone 7 : Running XNA Projects in Windows (part 2) - Display Differences
- First look: Apple Watch

- 10 Amazing Tools You Should Be Using with Dropbox
- How to create your first Swimlane Diagram or Cross-Functional Flowchart Diagram by using Microsoft Visio 2010 (Part 1)

- How to create your first Swimlane Diagram or Cross-Functional Flowchart Diagram by using Microsoft Visio 2010 (Part 2)

- How to create your first Swimlane Diagram or Cross-Functional Flowchart Diagram by using Microsoft Visio 2010 (Part 3)
Popular tags
Microsoft Access Microsoft Excel Microsoft OneNote Microsoft PowerPoint Microsoft Project Microsoft Visio Microsoft Word Active Directory Biztalk Exchange Server Microsoft LynC Server Microsoft Dynamic Sharepoint Sql Server Windows Server 2008 Windows Server 2012 Windows 7 Windows 8 Adobe Indesign Adobe Flash Professional Dreamweaver Adobe Illustrator Adobe After Effects Adobe Photoshop Adobe Fireworks Adobe Flash Catalyst Corel Painter X CorelDRAW X5 CorelDraw 10 QuarkXPress 8 windows Phone 7 windows Phone 8 BlackBerry Android Ipad Iphone iOS
Popular keywords
HOW TO Swimlane in Visio Visio sort key Pen and Touch Creating groups in Windows Server Raid in Windows Server Exchange 2010 maintenance Exchange server mail enabled groups Debugging Tools Collaborating
Top 10
- Microsoft Excel : How to Use the VLookUp Function
- Fix and Tweak Graphics and Video (part 3) : How to Fix : My Screen Is Sluggish - Adjust Hardware Acceleration
- Fix and Tweak Graphics and Video (part 2) : How to Fix : Text on My Screen Is Too Small
- Fix and Tweak Graphics and Video (part 1) : How to Fix : Adjust the Resolution
- Windows Phone 8 Apps : Camera (part 4) - Adjusting Video Settings, Using the Video Light
- Windows Phone 8 Apps : Camera (part 3) - Using the Front Camera, Activating Video Mode
- Windows Phone 8 Apps : Camera (part 2) - Controlling the Camera’s Flash, Changing the Camera’s Behavior with Lenses
- Windows Phone 8 Apps : Camera (part 1) - Adjusting Photo Settings
- MDT's Client Wizard : Package Properties
- MDT's Client Wizard : Driver Properties
Windows XP
Windows Vista
Windows 7
Windows Azure
Windows Server
Windows Phone
2015 Camaro