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







多媒体控件
[b]MediaElement
MediaPlayer[/b]

导航控件
[b]WebView, WebViewBrush 显示web内容[/b]

进度控件

[b]ProgressBar ProgressRing [/b]

文本控件

[b]TextBox
PasswordBox
TextBlock
RichTextBlock[/b]

选择控件

[b]CheckBox
ComboBox
ListBox
RadioButton
Slider
ToggleButton
ToggleSwitch[/b]



总结：大部分控件还是跟sl for wp7 那一套差不多，但是由于屏幕再次变大，所以一些控件又回归了，比如combox,girdview,listvew等，但是wp7的pivot和panaroma没有了