使用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没有了