码迷,mamicode.com
首页 > 其他好文 > 详细

控件列表 (XAML)

时间:2014-08-17 16:47:32      阅读:967      评论:0      收藏:0      [点我收藏+]

标签:des   style   http   使用   os   io   strong   数据   

面向 Windows 的 XAML UI 框架提供丰富的控件库,这些控件可支持 UI 开发。这些控件中的一部分具有直观的表示;其他功能作为其他控件或内容(如图像和媒体)的容器。你可以通过下载控件和布局库示例以及 XAML 基本控件示例在操作中查看许多 Windows UI 控件。

下面是可在应用中使用的常见 XAML 控件的列表,按字母排序。要查看按功能分组的控件,请参阅按功能列出控件

你可以将应用 UI 中的大部分控件用于手机和电脑。这些控件通常有相似的外观,但在某些情况下,它们在手机和电脑上的外观不同。其他控件仅适用于手机应用,或仅适用于电脑应用。

 
<Page.BottomAppBar>
    <AppBar x:Name="bottomAppBar" Padding="10,0,10,0">
        <Grid>
            <StackPanel Orientation="Horizontal" HorizontalAlignment="Left">
                <Button Style="{StaticResource EditAppBarButtonStyle}" Click="Button_Click"/>
                <Button Style="{StaticResource RemoveAppBarButtonStyle}" Click="Button_Click"/>
                <Button Style="{StaticResource AddAppBarButtonStyle}" Click="Button_Click"/>
            </StackPanel>
            <StackPanel Orientation="Horizontal" HorizontalAlignment="Right">
                <Button Style="{StaticResource RefreshAppBarButtonStyle}" Click="Button_Click"/>
                <Button Style="{StaticResource HelpAppBarButtonStyle}" Click="Button_Click"/>
            </StackPanel>
        </Grid>
    </AppBar>
</Page.BottomAppBar>

参考:AppBar

方法:添加应用栏

设计:顶部应用栏、底部应用栏

示例代码:XAML AppBar 控件示例控件和布局库示例

应用栏按钮

使用应用栏样式显示命令的按钮。

参考:AppBarButton

设计:后退按钮底部应用栏

应用栏分隔符(仅限 Windows)

在视觉上分隔应用栏中的命令组。

参考:AppBarSeparator

应用栏切换按钮

使用应用栏样式的切换命令的按钮。

参考:AppBarToggleButton

音频

请参阅媒体元素

自动建议框(仅限 Windows Phone)

在用户键入时提供建议文本的文本输入框。

参考:AutoSuggestBox

B

 

边框

绘制另一对象周围的边框、背景或二者的容器控件。

bubuko.com,布布扣
 
<Border BorderBrush="Gray" BorderThickness="4" 
        Height="108" Width="64">
    <StackPanel>
        <Rectangle Fill="Yellow"/>
        <Rectangle Fill="Green"/>
    </StackPanel>
</Border>


参考:Border

示例代码:控件和布局库示例

按钮

响应用户输入和引发 Click 事件的控件。

bubuko.com,布布扣
 
<Button x:Name="button1" Content="Button" 
        Click="Button_Click" />


参考:Button

方法:添加按钮

设计:按钮

示例代码:XAML 基本控件示例控件和布局库示例

C

 

画布

支持相对于画布左上角的子元素的绝对位置的布局面板。

bubuko.com,布布扣
 
<Canvas Width="120" Height="120">
    <Rectangle Fill="Red"/>
    <Rectangle Fill="Blue" Canvas.Left="20" Canvas.Top="20"/>
    <Rectangle Fill="Green" Canvas.Left="40" Canvas.Top="40"/>
    <Rectangle Fill="Yellow" Canvas.Left="60" Canvas.Top="60"/>
</Canvas>


参考:Canvas

方法:快速入门:添加布局控件

示例代码:控件和布局库示例

复选框

用户可以选中或清除的一种控件。

bubuko.com,布布扣
 
<CheckBox x:Name="checkbox1" Content="CheckBox" 
          Checked="CheckBox_Checked"/>


参考:CheckBox

方法:添加复选框

设计:复选框

示例代码:XAML 基本控件示例控件和布局库示例

 

组合框

用户可以从中进行选择的项目下拉列表。

bubuko.com,布布扣
 
<ComboBox x:Name="comboBox1" SelectionChanged="ComboBox_SelectionChanged" Width="100">
    <x:String>Item 1</x:String>
    <x:String>Item 2</x:String>
    <x:String>Item 3</x:String>
</ComboBox>


参考:ComboBox

方法:添加组合框和列表框

设计:下拉列表

示例代码:XAML 基本控件示例控件和布局库示例

命令栏

一个特殊的应用栏,用于调整应用栏按钮元素的大小。

 
    <CommandBar>
        <AppBarButton Icon="Back" Label="Back" Click="AppBarButton_Click"/>
        <AppBarButton Icon="Stop" Label="Stop" Click="AppBarButton_Click"/>
        <AppBarButton Icon="Play" Label="Play" Click="AppBarButton_Click"/>
    </CommandBar>


参考:CommandBar

方法:添加应用栏

设计:底部应用栏

示例代码:XAML AppBar 控件示例控件和布局库示例

内容对话(仅限 Windows Phone)

可自定义以包含任何 XAML 内容的对话框。

参考:ContentDialog

上下文菜单

请参阅弹出菜单

D

 

日期选取器

使用户可以选择日期的控件。

bubuko.com,布布扣
 
<DatePicker Header="Arrival Date"/>

参考:DatePicker

方法:快速入门:添加 DatePicker

设计:日期选取器

示例代码:XAML DatePicker 和 TimePicker 控件示例控件和布局库示例

日期选取器浮出控件(仅限 Windows Phone)

使用户可以选择日期的浮出控件。

参考:DatePickerFlyout

F

 

弹性框

请参阅堆叠面板

翻转视图

显示用户可逐一浏览的项目集合的控件。

bubuko.com,布布扣
 
<FlipView x:Name="flipView1" SelectionChanged="FlipView_SelectionChanged">
    <Image Source="Assets/Logo.png" />
    <Image Source="Assets/SplashScreen.png" />
    <Image Source="Assets/SmallLogo.png" />
</FlipView>


参考:FlipView

方法:添加 FlipView 控件

设计:翻转视图

示例代码:XAML FlipView 控件示例控件和布局库示例

浮出控件

显示要求用户交互的消息。(与对话框不同,浮出控件不创建一个单独的窗口,而且不阻止其他用户交互。)

bubuko.com,布布扣
 
<Flyout>
    <StackPanel>
        <TextBlock>All items will be permanently removed from your cart.</TextBlock>
        <Button Click="DeleteConfirmation_Click">Empty my cart</Button>
    </StackPanel>
</Flyout>


参考:Flyout

方法:快速入门:添加浮出控件

设计:浮出控件

示例代码:XAML Flyout 和 MenuFlyout 示例控件和布局库示例

G

 

网格

支持以行和列排列子元素的布局面板。

bubuko.com,布布扣
 
<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="50"/>
        <RowDefinition Height="50"/>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="50"/>
        <ColumnDefinition Width="50"/>
    </Grid.ColumnDefinitions>
    <Rectangle Fill="Red"/>
    <Rectangle Fill="Blue" Grid.Row="1"/>
    <Rectangle Fill="Green" Grid.Column="1"/>
    <Rectangle Fill="Yellow" Grid.Row="1" Grid.Column="1"/>
</Grid>


参考:Grid

方法:快速入门:添加布局控件

示例代码:控件和布局库示例

网格视图

显示可在行和列中水平滚动的项目集合的控件。

bubuko.com,布布扣
 
<GridView x:Name="gridView1" SelectionChanged="GridView_SelectionChanged">
    <x:String>Item 1</x:String>
    <x:String>Item 2</x:String>
</GridView>


参考:GridView

方法:添加 ListView 和 GridView 控件

设计:网格视图和列表视图

示例代码:XAML ListView 和 GridView 基本示例XAML ListView 和 GridView 自定义交互性示例XAML GridView 分组和 SemanticZoom 示例控件和布局库示例

H

 

集线器

一个容器控件,使用户可以查看并导航至内容的不同部分。

 
<Hub>
    <HubSection>
        <!--- hub section content -->
				</HubSection>
    <HubSection>
        <!--- hub section content -->
				</HubSection>
</Hub>

参考:Hub

方法:快速入门:使用中心

设计:中心

示例代码:XAML Hub 控件示例控件和布局库示例

超链接

请参阅“超链接按钮”

“超链接”按钮

类似于标记文本的按钮,通常嵌入在文本块中使用。

bubuko.com,布布扣
 
<HyperlinkButton Content="www.microsoft.com" NavigateUri="http://www.microsoft.com"/>


参考:HyperlinkButton

方法:添加按钮

设计:超链接

示例代码:XAML 基本控件示例控件和布局库示例

I

 

图像

显示图像的控件。

bubuko.com,布布扣
 
<Image Source="Assets/Logo.png" />


参考:Image

方法:快速入门:图像和 ImageBrush

示例代码:XAML 图像示例XAML 基本控件示例控件和布局库示例

项目控件

显示数据模板所指定 UI 中项目集合的控件。

 
<ItemsControl/>

参考:ItemsControl

 

L

 

列表框

显示用户可以从中进行选择的嵌入式项列表的控件。

bubuko.com,布布扣
 
<ListBox x:Name="listBox1" SelectionChanged="ListBox_SelectionChanged" Width="100">
    <x:String>Item 1</x:String>
    <x:String>Item 2</x:String>
    <x:String>Item 3</x:String>
</ListBox>


参考:ListBox

方法:添加组合框和列表框

设计:列表框

示例代码:XAML 基本控件示例控件和布局库示例

 

列表选取器浮出控件(仅限 Windows Phone)

显示用户可以从中进行选择的项目列表的浮出控件。

参考:ListPickerFlyout

列表视图

显示可在列表中垂直滚动的项目集合的控件。

bubuko.com,布布扣
 
<ListView x:Name="listView1" SelectionChanged="ListView_SelectionChanged">
    <x:String>Item 1</x:String>
    <x:String>Item 2</x:String>
</ListView>


参考:ListView

方法:添加 ListView 和 GridView 控件

设计:网格视图和列表视图

示例代码:XAML ListView 和 GridView 基本示例XAML ListView 和 GridView 自定义交互性示例控件和布局库示例

M

 

地图控件(仅限 Windows Phone)

显示地图的控件。

参考:MapControl

设计:地图

媒体元素

可播放音频和视频内容的控件。

 
<MediaElement/>

参考:MediaElement

设计:音频感知应用

示例代码:XAML 媒体播放示例

菜单浮出控件

临时显示与用户当前正在执行的操作相关的命令或选项的列表。

bubuko.com,布布扣
 
<MenuFlyout>
    <MenuFlyoutItem Text="Reset" Click="Reset_Click"/>
    <MenuFlyoutSeparator/>
    <ToggleMenuFlyoutItem Text="Shuffle" 
                          IsChecked="{Binding IsShuffleEnabled, Mode=TwoWay}"/>
    <ToggleMenuFlyoutItem Text="Repeat" 
                          IsChecked="{Binding IsRepeatEnabled, Mode=TwoWay}"/>
</MenuFlyout>



参考:MenuFlyoutMenuFlyoutItemMenuFlyoutSeparatorToggleMenuFlyoutItem

方法:快速入门:添加 MenuFlyout

示例代码:XAML Flyout 和 MenuFlyout 示例控件和布局库示例

多行文本框

请参阅文本框

P

 

平移滚动查看器

请参阅滚动查看器

“密码”框

用于输入密码的一种控件。

bubuko.com,布布扣
 
<PasswordBox x:Name="passwordBox1" IsPasswordRevealButtonEnabled="True" 
             PasswordChanged="PasswordBox_PasswordChanged" />


参考:PasswordBox

方法:快速入门:添加文本输入和编辑控件

设计:密码框

示例代码:XAML 文本显示示例XAML 文本编辑示例控件和布局库示例

选取器浮出控件(仅限 Windows Phone)

可用于创建自定义选取器的控件。

参考:PickerFlyout

透视(仅限 Windows Phone)

全屏的容器和导航模型,它还提供在不同的透视之间快速移动的方法(视图或筛选器),这些透视通常在同一组数据中。

参考:Pivot

设计:透视

弹出菜单

提供你指定的命令的自定义菜单。

参考:PopupMenu

设计:上下文菜单

示例代码:XAML 基本控件示例

进度条

通过显示一个长条来指示进度的控件。

bubuko.com,布布扣

显示特定值的进度条。

 
<ProgressBar x:Name="progressBar1" Value="50" Width="100"/>


bubuko.com,布布扣

显示不确定进度的进度条。

 
<ProgressBar x:Name="indeterminateProgressBar1" IsIndeterminate="True" Width="100"/>


参考:ProgressBar

方法:添加进度控件

设计:进度栏和进度环

示例代码:XAML 基本控件示例控件和布局库示例

进度环

通过显示一个 环来指示不确定进度的控件。

bubuko.com,布布扣
 
<ProgressRing x:Name="progressRing1" IsActive="True"/>


参考:ProgressRing

方法:添加进度控件

设计:进度栏和进度环

示例代码:XAML 基本控件示例控件和布局库示例

“推送”按钮

请参阅按钮

R

 

单选按钮

允许用户从一组选项中选择单个选项的控件。将单选按钮分组到一起时,它们互相排斥。

bubuko.com,布布扣
 
<RadioButton x:Name="radioButton1" Content="RadioButton 1" GroupName="Group1" 
             Checked="RadioButton_Checked"/>
<RadioButton x:Name="radioButton2" Content="RadioButton 2" GroupName="Group1" 
             Checked="RadioButton_Checked" IsChecked="True"/>
<RadioButton x:Name="radioButton3" Content="RadioButton 3" GroupName="Group1" 
             Checked="RadioButton_Checked"/>


参考:RadioButton

方法:添加单选按钮

设计:单选按钮

示例代码:XAML 基本控件示例控件和布局库示例

重复按钮

从按下到释放为止重复引发 Click 事件的一种按钮。

bubuko.com,布布扣
 
<RepeatButton x:Name="repeatButton1" Content="Repeat Button" 
              Click="RepeatButton_Click" />


参考:RepeatButton

方法:添加按钮

示例代码:控件和布局库示例

可编辑对话框

使用户可以编辑带有格式化文本、超链接和图像等内容的富文本文档的控件。

 
<RichEditBox />

参考:RichEditBox

方法:快速入门:添加文本输入和编辑控件

设计:文本输入拼写检查

示例代码:XAML 文本示例控件和布局库示例

S

 

滚动条

提供具有滑动的 Thumb(其位置对应于一个值)的滚动条的一种控件。

 
<ScrollBar/>

参考:ScrollBar

滚动查看器

可让用户平移和缩放其内容的容器控件。

bubuko.com,布布扣
 
<ScrollViewer ZoomMode="Enabled" MaxZoomFactor="10" 
              HorizontalScrollMode="Enabled" HorizontalScrollBarVisibility="Visible"
              Height="200" Width="200">
    <Image Source="Assets/Logo.png" Height="400" Width="400"/>
</ScrollViewer>


参考:ScrollViewer

设计:滚动查看器

示例代码:XAML 滚动、平移以及缩放示例控件和布局库示例

搜索框(仅限 Windows)

使用户可以输入搜索查询的控件。

bubuko.com,布布扣
 
<SearchBox />

参考:SearchBox

方法:添加搜索

设计:搜索框

示例代码:SearchBox 控件示例控件和布局库示例

语义缩放

让用户在项目集合的两个视图之间缩放的容器控件。

bubuko.com,布布扣
 
<SemanticZoom>
    <ZoomedInView>
        <GridView></GridView>
    </ZoomedInView>
    <ZoomedOutView>
        <GridView></GridView>
    </ZoomedOutView>
</SemanticZoom>

参考:SemanticZoom

方法:添加语义式缩放控件

设计:语义式缩放独特的 Windows:语义式缩放

示例代码:XAML GridView 分组和 SemanticZoom 示例控件和布局库示例

形状

可以显示的各种保留模式图形对象,例如椭圆、矩形、直线、贝塞尔曲线等。

bubuko.com,布布扣bubuko.com,布布扣
 
<Ellipse/>
<Path/>
<Rectangle/>

参考:Shapes

方法:快速入门:绘制形状

示例代码:基于 XAML 矢量的绘图示例

单行文本框

一个单行纯文本字段。请参阅文本框

滑块

一种可让用户通过沿轨迹移动 Thumb 控件从一个值范围中进行选择的控件。

bubuko.com,布布扣
 
<Slider x:Name="slider1" Width="100" ValueChanged="Slider_ValueChanged" />


参考:Slider

方法:添加滑块

设计:滑块

示例代码:XAML 基本控件示例

堆叠面板

可以将子元素按水平或垂直方向排列到单行中的布局面板。

bubuko.com,布布扣
 
<StackPanel>
    <Rectangle Fill="Red"/>
    <Rectangle Fill="Blue"/>
    <Rectangle Fill="Green"/>
    <Rectangle Fill="Yellow"/>
</StackPanel>


参考:StackPanel

方法:快速入门:添加布局控件

示例代码:控件和布局库示例

静态文本/段落

请参阅文本块

T

 

文本块

显示文本的控件。

bubuko.com,布布扣
 
<TextBlock x:Name="textBlock1" Text="I am a TextBlock" />


参考:TextBlockRichTextBlock

方法:快速入门:显示文本

设计:键入

示例代码:XAML 文本示例控件和布局库示例

文本框

单行或多行纯文本字段。

bubuko.com,布布扣
 
<TextBox x:Name="textBox1" Text="I am a TextBox" 
         TextChanged="TextBox_TextChanged" />


参考:TextBox

方法:快速入门:添加文本输入和编辑控件

设计:文本输入框文本输入拼写检查

示例代码:XAML 文本示例控件和布局库示例

时间选取器

使用户可以设置时间值的控件。

bubuko.com,布布扣
 
<TimePicker Header="Arrival Time"/>

参考:TimePicker

方法:快速入门:添加 TimePicker

设计:时间选取器

示例代码:XAML DatePicker 和 TimePicker 控件示例控件和布局库示例

时间选取器浮出控件(仅限 Windows Phone)

使用户可以设置时间值的浮出控件。

参考:TimePickerFlyout

切换按钮

可以在 2 个状态之间进行切换的一种按钮。

bubuko.com,布布扣
 
<ToggleButton x:Name="toggleButton1" Content="Button" 
              Checked="ToggleButton_Checked"/>


参考:ToggleButton

方法:添加按钮

切换开关

可以在 2 种状态之间进行切换的一种开关。

bubuko.com,布布扣
 
<ToggleSwitch x:Name="toggleSwitch1" Header="ToggleSwitch" 
              OnContent="On" OffContent="Off" 
              Toggled="ToggleSwitch_Toggled"/>


参考:ToggleSwitch

方法:添加切换开关

设计:切换开关

示例代码:XAML 基本控件示例控件和布局库示例

工具提示

显示元素信息的一种弹出窗口。

bubuko.com,布布扣
 
<Button Content="Button" Click="Button_Click" 
        ToolTipService.ToolTip="Click to perform action" />


参考:ToolTipToolTipService

方法:添加工具提示

设计:工具提示

示例代码:XAML 基本控件示例控件和布局库示例

V

 

VariableSizedWrapGrid

支持以行和列排列子元素的布局面板。每个子元素都可以跨越多行和多列。

bubuko.com,布布扣
 
<VariableSizedWrapGrid MaximumRowsOrColumns="3" ItemHeight="44" ItemWidth="44">
    <Rectangle Fill="Red"/>
    <Rectangle Fill="Blue" Height="80" 
               VariableSizedWrapGrid.RowSpan="2"/>
    <Rectangle Fill="Green" Width="80" 
               VariableSizedWrapGrid.ColumnSpan="2"/>
    <Rectangle Fill="Yellow" Height="80" Width="80" 
               VariableSizedWrapGrid.RowSpan="2" 
               VariableSizedWrapGrid.ColumnSpan="2"/>
</VariableSizedWrapGrid>


参考:VariableSizedWrapGrid

方法:快速入门:添加布局控件

示例代码:控件和布局库示例

视频

请参阅媒体元素

Viewbox

可以将其内容缩放至指定大小的容器控件。

bubuko.com,布布扣
 
<Viewbox MaxWidth="25" MaxHeight="25">
    <Image Source="Assets/Logo.png"/>
</Viewbox>
<Viewbox MaxWidth="75" MaxHeight="75">
    <Image Source="Assets/Logo.png"/>
</Viewbox>
<Viewbox MaxWidth="150" MaxHeight="150">
    <Image Source="Assets/Logo.png"/>
</Viewbox>


参考:Viewbox

示例代码:控件和布局库示例

W

 

Web 视图

可托管 Web 内容的容器控件。

 
<WebView x:Name="webView1" Source="http://dev.windows.com" Height="400" Width="800" />


 
<Rectangle Height="400" Width="800">
    <Rectangle.Fill>
        <WebViewBrush SourceName="webView1"/>
    </Rectangle.Fill>
</Rectangle>








控件列表 (XAML),布布扣,bubuko.com

控件列表 (XAML)

标签:des   style   http   使用   os   io   strong   数据   

原文地址:http://www.cnblogs.com/watchfluture/p/3917810.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!