使用C#開發Metro 風格應用的路線圖 — 控制項分類介紹

快捷工具列控制項：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>

通過指定page的TopAppBar或BottomAppBar來設定頁面的appbar，通常用來在頂部或底部顯示一個快捷工具列。當右鍵的時候或滑鼠移到頂或底的時候顯示.

按鈕控制項

 Button 普通按鈕

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

Hyperlinkbutton 超連結

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

Repeat button 可以重複響應click事件的按鈕

<RepeatButton/>

集合資料控制項:

Flipview 每次可翻閱一項的集合

<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 內容變焦控制項http://msdn.microsoft.com/zh-cn/library/windows/apps/hh465319

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

退出鍵
Context menu
PopupMenu

ToolTip

圖片 Images

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

向量圖形 shapes

布局控制項
Canvas中的內容是絕對位置的

<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>

 

Grid是一個靈活的行列形式的控制項

ScrollViewer

StackPanel

WrapGrid

 

 

 

多媒體控制項
MediaElement 
MediaPlayer

導航控制項
WebView, WebViewBrush  顯示web內容

進度控制項

ProgressBar ProgressRing 

文本控制項

TextBox
PasswordBox
TextBlock
RichTextBlock

選擇控制項

CheckBox
ComboBox
ListBox
RadioButton
Slider
ToggleButton
ToggleSwitch

 

總結：大部分控制項還是跟sl for wp7 那一套差不多，但是由於螢幕再次變大，所以一些控制項又迴歸了，比如combox,girdview,listvew等，但是wp7的pivot和panaroma沒有了