Use C # To develop Metro-style application roadmap-control Classification

Shortcut Toolbar Control:AppBar

<Page.BottomAppBar>    <AppBar Padding="10,0,10,0">        <Grid>            <Button Click="GoHome" HorizontalAlignment="Left"                     IsEnabled="{Binding Frame.CanGoBack, ElementName=pageRoot}"                      Style="{StaticResource HomeAppBarButtonStyle}"/>            <StackPanel Orientation="Horizontal" HorizontalAlignment="Right">                <Button IsEnabled="{Binding CanFlipPrevious}" Click="PreviousButton_Click"                         Style="{StaticResource PreviousAppBarButtonStyle}"/>                <Button IsEnabled="{Binding CanFlipNext}" Click="NextButton_Click"                         Style="{StaticResource NextAppBarButtonStyle}"/>            </StackPanel>        </Grid>    </AppBar></Page.BottomAppBar>

You can specify the topappbar or bottomappbar of the page to set the AppBar of the page, which is usually used to display a shortcut toolbar at the top or bottom. It is displayed when you right click or move the mouse to the top or bottom.

Button Control

Button common button

<Button Click="Button_Click">Button Text</Button>

Hyperlinkbutton hyperlink

<HyperlinkButton Content="Next page" Click="HyperlinkButton_Click"/>

Repeat button can repeat the button that responds to the Click Event

<RepeatButton/>

Collection Data Control:

Flipview a set that can be viewed each time

<FlipView Width="350" Height="150">    <FlipViewItem>        <Image Width="100" Height="100" Source="Images/Logo.png"/>    </FlipViewItem>    <FlipViewItem>        <Image Width="100" Height="100" Source="Images/SplashScreen.png"/>    </FlipViewItem></FlipView>

Gridview

Listview

Semanticzoom content zoom controls http://msdn.microsoft.com/zh-cn/library/windows/apps/hh465319

<SemanticZoom>    <ZoomedInView>        <Grid><Grid>    </ZoomedInView>    <ZoomedOutView>        <Grid><Grid>    </ZoomedOutView></SemanticZoom>

Pop-up button
Context Menu
Popupmenu

Tooltip

ImageImages

<Image Source="Images/Logo.png"/>

Vector GraphicsShapes

Layout Control
The content in the canvas is absolutely positioned.

<Canvas Width="150" Height="150">    <Rectangle         Canvas.Top="25"         Canvas.Left="25"         Fill="Red"         Height="100"         Width="100"/>    <Ellipse        Canvas.Top="75"         Canvas.Left="75"         Fill="Blue"         Height="100"         Width="100"/></Canvas>

 

GridIs a flexible row-column Control

Scrollviewer

Stackpanel

Wrapgrid

 

 

 

Multimedia controls
Mediaelement 
Mediaplayer

Navigation controls
Webview,WebviewbrushShow Web Content

Progress Control

Progressbar Progressring 

Text Control

Textbox
Passwordbox
Textblock
Richtextblock

Select Control

Checkbox
ComboBox
ListBox
Radiobutton
Slider
Togglebutton
Toggleswitch

 

Summary: Most of the controls are similar to the SL for WP7 one, but some controls return as the screen grows again, such as combox, girdview, and listvew, however, the partition and panaroma of WP7 are gone.