Silverlight for Windows Phone support basic controls :
- ScrollBar, Slider - selecting from continuous range of values
- TextBox - entering text
- CheckBox - check\uncheck
- RadioButton - select a single option from a list of options
- Button - commands
ApplicationBar
ApplicationBar is somewhat like a tool bar in desktop windows application. ApplicationBar help to create consistent user experience. Up to 4 buttons are supported
For example :
Note that ApplicationBar is not part of the visual tree. It is not UIElement and it inherit directly from object class.
When the phone is held upright the ApplicationBar appears at the bottom of the phone.
All buttons (called icons) display bitmap. The bitmap should be png file 48 pixels square , the actual image should occupy 26 pixels in the middle and color should be white.
A list of icons reside on your hard disk. Mine is on C:\Program Files\Microsoft SDKs\Windows Phone\v7.1\Icons , it is recommended to use icons from dark directory for your programs.
It is also possible to use text based menu items.
It is recommended to use ApplicationBar in case you need menu and not write your own.
ApplicationBar has property name Buttons which is a collection of actually ApplicationBarIconButton.
ApplicationBarIconButton has properties :
and event Click which occurs when the button is clicked.
Source sample
ApplicationBar.zip
MainPage.xaml
Four ApplicationBarIconButton are defined each with Text,IconUri,Name and Click event.
MainPage.xaml.cs
Handlers for edit,save,delete are almost the same as the IsolatedStorage example in Windows Phone - Application Architecture (6) so i see no point going over it again.
The handler for help is as follows :
Run the application to produce :
Notice edit,save,delete,help on the bottom - this is the ApplicationBar.
Click the help button to produce :
Elements and Controls
Most visual elements have the following hierarchy :
- object
- DepedencyObject (abstract)
- UIElement (abstract)
- FrameworkElement (abstract)
TextBlock, Image, Border, MediaElement, Shape and panel inherits FrameworkElement .
Some classes inherits Control
- object
- DepedencyObject (abstract)
- UIElement (abstract)
- FrameworkElement (abstract)
- Control (abstract)
What's the difference between element and control ?
- Controls involves more user interaction : Button, Slider, TextBox
- Control is build from elements :
- Button is a Border with TextBlock
- Slider is composed of few Rectangulars
RangeBase
- Control (abstract)
- RangeBase (abstract)
- ProgressBar
- Slider
- ScrollBar
Properties :
- Minimum - minimum value
- Maximum - maximum value
- SmallChange
- LargeChange
- Value
Event
Source sample
StandardControls_NK.zip
This sample has a slider and a rectangle. Moving the slider alter the background of the rectangle. In fact it control the red portion of the background while Green=Blue=0
Slider.xaml
Slider.xaml.cs
Run the application ,click Slider button and drag the slider to the right to produce :
Button
Button is composed of elements : Border, TextBlock so the same properties apply : e.g BorderBrush for the Border and FontStyle for the TextBlock
Sample source
StandardControls_NK.zip
The sample use two buttons :
- button with simple content - text
- button with more complicate content - grid with TextBlock and Bitmap.
Button.xaml
Run the application ,click "Button" button to produce :
Note that you can disable Button via IsEnabled
Button precedence
from first to last :
- Local Setting - property defined for the element
- Style Setting
- Theme Style
- Property Inheritance - property defined e.g. for Page and inherited by element inside the page
- Default Values - of the element
Other ButtonBase Controls
Basically the inheritence hirarchy is as followes
- Control (abstract)
- ContentControl
- ButtonBase (abstract)
- Button
- HyperlinkButton - Button that display hyperlink
- RepeatButton - Raise its Click event repeatly from the time it is pressed until the time it is released
- ToggleButton - Base class for control that can change state
Source sample
The sample present CheckBox,HyperlinkButton,RepeatButton,ToggleButton,RadioButton.
It also show that Style may be applied to base class.E.g. you can define a style whose TargetType is Control and set there e.g. Background, now every control can use this style e.g. Button or RadioButton.
OtherButtonBaseControls.xaml
Run the application ,click "Other ButtonBase Controls" button to produce :
Nathan
No comments:
Post a Comment