目录
- [1. 布局控件](#1. 布局控件)
- [1.1 Grid](#1.1 Grid)
- [1.2 StackPanel](#1.2 StackPanel)
- [1.3 WrapPanel](#1.3 WrapPanel)
- [1.4 DockPanel](#1.4 DockPanel)
- [1.5 Canvas](#1.5 Canvas)
- [1.6 ScrollViewer](#1.6 ScrollViewer)
- [1.7 Border](#1.7 Border)
- [1.8 Viewbox](#1.8 Viewbox)
- [2. 基础控件](#2. 基础控件)
- [2.1 Button](#2.1 Button)
- [2.2 TextBlock](#2.2 TextBlock)
- [2.3 TextBox](#2.3 TextBox)
- [2.4 PasswordBox](#2.4 PasswordBox)
- [2.5 Label](#2.5 Label)
- [2.6 Image](#2.6 Image)
- [3. 选择控件](#3. 选择控件)
- [3.1 CheckBox](#3.1 CheckBox)
- [3.2 RadioButton](#3.2 RadioButton)
- [3.3 ComboBox](#3.3 ComboBox)
- [3.4 ListBox](#3.4 ListBox)
- [4. 范围控件](#4. 范围控件)
- [4.1 Slider](#4.1 Slider)
- [4.2 ProgressBar](#4.2 ProgressBar)
- [4.3 ScrollBar](#4.3 ScrollBar)
- [5. 容器与分组控件](#5. 容器与分组控件)
- [5.1 TabControl](#5.1 TabControl)
- [5.2 GroupBox](#5.2 GroupBox)
- [5.3 Expander](#5.3 Expander)
- [6. 菜单与工具栏](#6. 菜单与工具栏)
- [6.1 Menu](#6.1 Menu)
- [6.2 ContextMenu](#6.2 ContextMenu)
- [6.3 ToolBar](#6.3 ToolBar)
- [6.4 StatusBar](#6.4 StatusBar)
- [7. 日期与弹出控件](#7. 日期与弹出控件)
- [7.1 Calendar](#7.1 Calendar)
- [7.2 DatePicker](#7.2 DatePicker)
- [7.3 Popup](#7.3 Popup)
- [7.4 ToolTip](#7.4 ToolTip)
- [8. 数据展示控件](#8. 数据展示控件)
- [8.1 TreeView](#8.1 TreeView)
- [8.2 DataGrid](#8.2 DataGrid)
- [8.3 ListView](#8.3 ListView)
1. 布局控件
1.1 Grid
网格布局控件,通过行列表格精确定位子元素,是最常用的布局控件。
核心概念: 使用 RowDefinitions 和 ColumnDefinitions 定义行列,子元素通过 Grid.Row、Grid.Column 附加属性指定位置。
xml
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/> <!-- 自动高度 -->
<RowDefinition Height="*"/> <!-- 占剩余空间的 1 份 -->
<RowDefinition Height="2*"/> <!-- 占剩余空间的 2 份 -->
<RowDefinition Height="50"/> <!-- 固定高度 50px -->
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100"/> <!-- 固定宽度 -->
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<!-- 跨列 -->
<TextBlock Text="标题" Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="3"/>
<!-- 跨行 -->
<TextBlock Text="侧边栏" Grid.Row="1" Grid.Column="0" Grid.RowSpan="2"/>
</Grid>
| 高度/宽度值 | 说明 |
|---|---|
Auto |
根据内容自动调整 |
* |
按比例分配剩余空间 |
2* |
占 * 的两倍 |
固定值 |
固定像素大小 |
| 附加属性 | 说明 |
|---|---|
Grid.Row |
所在行索引(从 0 开始) |
Grid.Column |
所在列索引(从 0 开始) |
Grid.RowSpan |
跨越的行数 |
Grid.ColumnSpan |
跨越的列数 |
1.2 StackPanel
栈式布局,子元素沿水平或垂直方向依次排列。
xml
<!-- 垂直排列(默认) -->
<StackPanel Orientation="Vertical">
<Button Content="按钮1"/>
<Button Content="按钮2"/>
</StackPanel>
<!-- 水平排列 -->
<StackPanel Orientation="Horizontal">
<TextBlock Text="姓名:"/>
<TextBox Width="200"/>
</StackPanel>
| 属性 | 说明 |
|---|---|
Orientation |
Vertical(默认)或 Horizontal |
1.3 WrapPanel
流式布局,子元素按方向依次排列,超出宽度/高度后自动换行。
xml
<WrapPanel Orientation="Horizontal">
<Button Content="A" Width="80" Margin="5"/>
<Button Content="B" Width="80" Margin="5"/>
<Button Content="C" Width="80" Margin="5"/>
<!-- 放不下会自动换行 -->
</WrapPanel>
| 属性 | 说明 |
|---|---|
Orientation |
Horizontal(默认)或 Vertical |
ItemWidth |
统一子元素宽度 |
ItemHeight |
统一子元素高度 |
1.4 DockPanel
停靠布局,子元素可以停靠在上下左右或填充剩余空间。
xml
<DockPanel>
<Button Content="顶部" DockPanel.Dock="Top" Height="30"/>
<Button Content="底部" DockPanel.Dock="Bottom" Height="30"/>
<Button Content="左侧" DockPanel.Dock="Left" Width="100"/>
<Button Content="右侧" DockPanel.Dock="Right" Width="100"/>
<Button Content="填充剩余空间"/>
</DockPanel>
| 属性/附加属性 | 说明 |
|---|---|
DockPanel.Dock |
Top、Bottom、Left、Right |
LastChildFill |
True(默认)最后一个子元素填充剩余空间 |
1.5 Canvas
绝对定位布局,通过坐标精确控制子元素位置。
xml
<Canvas Width="300" Height="200">
<Rectangle Canvas.Left="10" Canvas.Top="10" Width="50" Height="50" Fill="Red"/>
<Ellipse Canvas.Left="100" Canvas.Top="50" Width="80" Height="80" Fill="Blue"/>
</Canvas>
| 附加属性 | 说明 |
|---|---|
Canvas.Left |
距左边距离 |
Canvas.Top |
距顶部距离 |
Canvas.Right |
距右边距离 |
Canvas.Bottom |
距底部距离 |
Canvas.ZIndex |
层叠顺序(值越大越靠前) |
1.6 ScrollViewer
滚动容器,当内容超出可视区域时提供滚动条。只能包含一个子元素。
xml
<ScrollViewer VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Disabled">
<StackPanel>
<!-- 大量内容 -->
</StackPanel>
</ScrollViewer>
| 属性 | 说明 |
|---|---|
VerticalScrollBarVisibility |
Auto、Visible、Hidden、Disabled |
HorizontalScrollBarVisibility |
同上 |
CanContentScroll |
True 按逻辑单位,False 按像素平滑滚动 |
1.7 Border
边框装饰控件,为子元素添加边框、背景、圆角等效果。只能包含一个子元素。
xml
<Border BorderBrush="Blue" BorderThickness="2" CornerRadius="8"
Background="LightBlue" Padding="10" Margin="5">
<TextBlock Text="带圆角边框的内容"/>
</Border>
| 属性 | 说明 |
|---|---|
BorderBrush |
边框颜色 |
BorderThickness |
边框粗细 |
CornerRadius |
圆角半径 |
Background |
背景色 |
Padding |
内边距 |
1.8 Viewbox
自动缩放容器,子内容会自动缩放以适应可用空间。
xml
<Viewbox Width="200" Height="200">
<Canvas Width="400" Height="400">
<!-- 内容会被缩小到 200x200 显示 -->
</Canvas>
</Viewbox>
| 属性 | 说明 |
|---|---|
Stretch |
Uniform(等比)、Fill(拉伸)、UniformToFill、None |
StretchDirection |
Both、UpOnly、DownOnly |
2. 基础控件
2.1 Button
按钮控件,响应用户点击操作。
xml
<!-- 普通按钮 -->
<Button Content="点击" Width="100" Height="30" Click="OnButtonClick"/>
<!-- 禁用 -->
<Button Content="禁用" IsEnabled="False"/>
<!-- 默认按钮(按 Enter 触发) -->
<Button Content="确定" IsDefault="True"/>
<!-- 取消按钮(按 Esc 触发) -->
<Button Content="取消" IsCancel="True"/>
<!-- 自定义内容(不只是文字) -->
<Button>
<StackPanel Orientation="Horizontal">
<Image Source="icon.png" Width="16" Height="16"/>
<TextBlock Text="图标按钮" Margin="5,0,0,0"/>
</StackPanel>
</Button>
| 属性 | 说明 |
|---|---|
Content |
按钮显示内容(支持任意控件) |
Click |
点击事件 |
IsEnabled |
是否可用 |
IsDefault |
是否为默认按钮 |
IsCancel |
是否为取消按钮 |
Command |
绑定命令(MVVM 模式) |
2.2 TextBlock
轻量级文本显示控件,支持富文本内联元素。
xml
<!-- 简单文本 -->
<TextBlock Text="Hello" FontSize="16" Foreground="Blue"/>
<!-- 自动换行 -->
<TextBlock Text="很长的文本..." TextWrapping="Wrap" Width="200"/>
<!-- 超长截断显示省略号 -->
<TextBlock Text="很长的文本..." TextTrimming="CharacterEllipsis" Width="100"/>
<!-- 富文本(内联元素) -->
<TextBlock>
<Run Text="红色" Foreground="Red"/>
<Run Text=" 蓝色" Foreground="Blue"/>
<LineBreak/>
<Bold>粗体</Bold>
<Italic> 斜体</Italic>
</TextBlock>
<!-- 超链接 -->
<TextBlock>
<Hyperlink NavigateUri="https://example.com"
RequestNavigate="OnNavigate">点击访问</Hyperlink>
</TextBlock>
| 属性 | 说明 |
|---|---|
Text |
显示文本 |
TextWrapping |
Wrap 换行、NoWrap 不换行 |
TextTrimming |
CharacterEllipsis、WordEllipsis、None |
TextAlignment |
Left、Center、Right、Justify |
LineHeight |
行高 |
FontSize |
字体大小 |
FontWeight |
Bold、Normal 等 |
Foreground |
文字颜色 |
内联元素: Run(文本段)、Span(样式段)、Bold、Italic、Underline、LineBreak(换行)、Hyperlink(超链接)。
TextBlock vs Label: TextBlock 更轻量,适合纯文本展示;Label 支持 Target 快捷键关联,适合表单标签。
2.3 TextBox
文本输入控件,支持单行和多行输入。
xml
<!-- 单行输入 -->
<TextBox Width="200" Height="28" Text="默认文本"/>
<!-- 多行输入 -->
<TextBox Width="300" Height="100" TextWrapping="Wrap" AcceptsReturn="True"
AcceptsTab="True" VerticalScrollBarVisibility="Auto"/>
<!-- 水平对齐方式 -->
<TextBox TextAlignment="Center"/>
<!-- 最大长度限制 -->
<TextBox MaxLength="50"/>
<!-- 只读 -->
<TextBox IsReadOnly="True" Text="只读内容"/>
<!-- 输入验证(只能输入数字) -->
<TextBox PreviewTextInput="OnPreviewTextInput"/>
| 属性 | 说明 |
|---|---|
Text |
文本内容 |
AcceptsReturn |
是否接受回车换行 |
AcceptsTab |
是否接受 Tab |
TextWrapping |
Wrap 换行 |
MaxLength |
最大字符数 |
IsReadOnly |
是否只读 |
TextAlignment |
文本对齐 |
SelectedText |
选中的文本 |
SelectionStart |
选中起始位置 |
常用事件: TextChanged(文本变化)、KeyDown/KeyUp(按键)、GotFocus/LostFocus(焦点)。
2.4 PasswordBox
密码输入控件,输入内容以掩码字符显示。
xml
<PasswordBox Width="200" Height="28" Password="123456" PasswordChar="*"/>
| 属性 | 说明 |
|---|---|
Password |
密码内容 |
PasswordChar |
掩码字符(默认 ●) |
MaxLength |
最大长度 |
常用事件: PasswordChanged。
2.5 Label
标签控件,支持快捷键关联到目标控件。
xml
<!-- 快捷键:按 Alt+N 聚焦到 NameBox -->
<Label Content="用户名(_N):" Target="{Binding ElementName=NameBox}"/>
<TextBox x:Name="NameBox" Width="200"/>
| 属性 | 说明 |
|---|---|
Content |
显示内容(支持任意控件) |
Target |
快捷键关联的目标控件 |
2.6 Image
图片显示控件。
xml
<Image Source="pack://application:,,,/Images/photo.png" Width="100" Height="100"
Stretch="Uniform"/>
| 属性 | 说明 |
|---|---|
Source |
图片路径 |
Stretch |
None、Fill、Uniform(等比)、UniformToFill(等比裁剪) |
3. 选择控件
3.1 CheckBox
复选框,允许用户选择多个选项。
xml
<CheckBox Content="选项A" IsChecked="True"/>
<CheckBox Content="选项B" IsChecked="False"/>
<!-- 三态:Checked / Unchecked / Indeterminate -->
<CheckBox Content="全选" IsThreeState="True" IsChecked="{x:Null}"/>
| 属性 | 说明 |
|---|---|
IsChecked |
True、False、{x:Null}(不确定) |
IsThreeState |
是否支持三态 |
Content |
显示文本 |
常用事件: Checked、Unchecked、Indeterminate。
3.2 RadioButton
单选按钮,同一 GroupName 内只能选中一个。
xml
<RadioButton Content="男" GroupName="Gender" IsChecked="True"/>
<RadioButton Content="女" GroupName="Gender"/>
| 属性 | 说明 |
|---|---|
GroupName |
分组名称,同组互斥 |
IsChecked |
是否选中 |
Content |
显示文本 |
3.3 ComboBox
下拉选择框。
xml
<!-- 普通下拉 -->
<ComboBox SelectedIndex="0">
<ComboBoxItem Content="北京"/>
<ComboBoxItem Content="上海"/>
<ComboBoxItem Content="广州"/>
</ComboBox>
<!-- 可编辑(允许输入) -->
<ComboBox IsEditable="True" Text="请选择...">
<ComboBoxItem Content="选项1"/>
<ComboBoxItem Content="选项2"/>
</ComboBox>
| 属性 | 说明 |
|---|---|
SelectedIndex |
选中项索引 |
SelectedItem |
选中项对象 |
SelectedValue |
选中值 |
IsEditable |
是否可输入 |
Text |
可编辑时的文本 |
IsDropDownOpen |
下拉是否展开 |
常用事件: SelectionChanged。
3.4 ListBox
列表框,显示一组可选项,支持单选和多选。
xml
<!-- 单选 -->
<ListBox Width="200" Height="120">
<ListBoxItem Content="苹果"/>
<ListBoxItem Content="香蕉"/>
<ListBoxItem Content="橘子"/>
</ListBox>
<!-- 多选 -->
<ListBox SelectionMode="Multiple">
<ListBoxItem Content="A"/>
<ListBoxItem Content="B"/>
</ListBox>
| 属性 | 说明 |
|---|---|
SelectionMode |
Single、Multiple、Extended(Shift/Ctrl多选) |
SelectedIndex |
选中索引 |
SelectedItem |
选中项 |
SelectedItems |
多选时所有选中项 |
常用事件: SelectionChanged。
4. 范围控件
4.1 Slider
滑块控件,通过拖动选择一个范围内的值。
xml
<Slider Minimum="0" Maximum="100" Value="50"
TickFrequency="10" TickPlacement="BottomRight"
IsSnapToTickEnabled="True" Width="300"/>
| 属性 | 说明 |
|---|---|
Minimum |
最小值 |
Maximum |
最大值 |
Value |
当前值 |
TickFrequency |
刻度间隔 |
TickPlacement |
刻度位置:None、TopLeft、BottomRight、Both |
IsSnapToTickEnabled |
是否对齐到刻度 |
Orientation |
Horizontal 或 Vertical |
IsDirectionReversed |
是否反转方向 |
常用事件: ValueChanged。
4.2 ProgressBar
进度条控件,显示操作进度。
xml
<!-- 确定进度 -->
<ProgressBar Minimum="0" Maximum="100" Value="65" Height="25"/>
<!-- 不确定进度(滚动动画) -->
<ProgressBar IsIndeterminate="True" Height="25"/>
| 属性 | 说明 |
|---|---|
Minimum |
最小值 |
Maximum |
最大值 |
Value |
当前值 |
IsIndeterminate |
不确定模式(持续滚动) |
Foreground |
前景色(进度条颜色) |
Orientation |
Horizontal 或 Vertical |
4.3 ScrollBar
滚动条控件,通常不单独使用(ScrollViewer 内部使用)。
xml
<ScrollBar Orientation="Horizontal" Minimum="0" Maximum="100" Width="300"/>
5. 容器与分组控件
5.1 TabControl
选项卡控件,将内容分组到多个标签页中,同一时间只显示一个。
xml
<TabControl SelectedIndex="0" TabStripPlacement="Top">
<TabItem Header="页签1">
<TextBlock Text="内容1"/>
</TabItem>
<TabItem Header="页签2">
<TextBlock Text="内容2"/>
</TabItem>
</TabControl>
| 属性 | 说明 |
|---|---|
SelectedIndex |
当前选中页索引 |
TabStripPlacement |
页签位置:Top、Bottom、Left、Right |
TabItem.Header |
页签标题(支持任意控件) |
常用事件: SelectionChanged。
5.2 GroupBox
分组框,为相关控件提供标题分组。
xml
<GroupBox Header="用户信息" Width="300">
<StackPanel>
<TextBox Margin="5"/>
<TextBox Margin="5"/>
</StackPanel>
</GroupBox>
5.3 Expander
可折叠面板,点击标题展开或收起内容。
xml
<Expander Header="详细信息" IsExpanded="True">
<TextBlock Text="折叠内容" Margin="5"/>
</Expander>
| 属性 | 说明 |
|---|---|
Header |
标题 |
IsExpanded |
是否展开 |
ExpandDirection |
展开方向:Down、Up、Left、Right |
6. 菜单与工具栏
6.1 Menu
菜单栏控件,支持多级菜单。
xml
<Menu>
<MenuItem Header="文件(_F)">
<MenuItem Header="新建(_N)" InputGestureText="Ctrl+N"/>
<MenuItem Header="打开(_O)" InputGestureText="Ctrl+O"/>
<Separator/>
<MenuItem Header="退出(_X)"/>
</MenuItem>
<MenuItem Header="编辑(_E)">
<MenuItem Header="复制(_C)"/>
<MenuItem Header="粘贴(_V)"/>
</MenuItem>
</Menu>
| 属性 | 说明 |
|---|---|
Header |
菜单标题,(_X) 设置 Alt 快捷键 |
InputGestureText |
显示快捷键提示文字 |
IsCheckable |
是否可勾选 |
IsChecked |
是否已勾选 |
Separator |
分隔线 |
常用事件: Click。
6.2 ContextMenu
右键上下文菜单。
xml
<TextBox Text="右键点击我">
<TextBox.ContextMenu>
<ContextMenu>
<MenuItem Header="复制" Command="ApplicationCommands.Copy"/>
<MenuItem Header="粘贴" Command="ApplicationCommands.Paste"/>
</ContextMenu>
</TextBox.ContextMenu>
</TextBox>
6.3 ToolBar
工具栏控件,通常放在 ToolBarTray 中管理。
xml
<ToolBarTray>
<ToolBar Band="0" BandIndex="0">
<Button Content="新建"/>
<Button Content="打开"/>
<Separator/>
<Button Content="保存"/>
</ToolBar>
<ToolBar Band="0" BandIndex="1">
<ComboBox Width="80">
<ComboBoxItem Content="宋体"/>
</ComboBox>
</ToolBar>
</ToolBarTray>
6.4 StatusBar
状态栏控件,通常放在窗口底部。
xml
<StatusBar>
<StatusBarItem>
<TextBlock Text="就绪"/>
</StatusBarItem>
<Separator/>
<StatusBarItem HorizontalAlignment="Right">
<TextBlock Text="行 1, 列 1"/>
</StatusBarItem>
</StatusBar>
7. 日期与弹出控件
7.1 Calendar
日历控件,用于选择日期。
xml
<Calendar SelectionMode="SingleDate" DisplayDateStart="2024-01-01"/>
| 属性 | 说明 |
|---|---|
SelectionMode |
SingleDate、SingleRange、MultipleRange、None |
DisplayDateStart |
可显示的最早日期 |
DisplayDateEnd |
可显示的最晚日期 |
SelectedDate |
选中日期 |
DisplayMode |
Month、Year、Decade |
常用事件: SelectedDatesChanged。
7.2 DatePicker
日期选择输入框,点击弹出日历。
xml
<DatePicker SelectedDateFormat="Long" Width="200"/>
| 属性 | 说明 |
|---|---|
SelectedDate |
选中日期 |
SelectedDateFormat |
Long(2024年1月1日)、Short(2024/1/1) |
DisplayDateStart |
可选最早日期 |
DisplayDateEnd |
可选最晚日期 |
7.3 Popup
弹出窗口控件,在指定位置悬浮显示内容。
xml
<Button Content="弹出" Click="OnShowPopup"/>
<Popup x:Name="MyPopup" Placement="Mouse" IsOpen="False">
<Border Background="White" BorderBrush="Gray" BorderThickness="1" Padding="10">
<TextBlock Text="弹出内容"/>
</Border>
</Popup>
csharp
private void OnShowPopup(object sender, RoutedEventArgs e)
{
MyPopup.IsOpen = true;
}
| 属性 | 说明 |
|---|---|
IsOpen |
是否显示 |
Placement |
定位方式:Mouse、Bottom、Top、Left、Right、Center |
PlacementTarget |
相对定位的目标元素 |
StaysOpen |
True 不自动关闭,False 点击外部关闭 |
AllowsTransparency |
是否允许透明 |
7.4 ToolTip
工具提示,鼠标悬停时显示。
xml
<!-- 简单提示 -->
<Button Content="按钮" ToolTip="这是一个按钮"/>
<!-- 富内容提示 -->
<Button Content="按钮">
<Button.ToolTip>
<ToolTip>
<StackPanel>
<TextBlock Text="标题" FontWeight="Bold"/>
<TextBlock Text="详细说明"/>
</StackPanel>
</ToolTip>
</Button.ToolTip>
</Button>
| 属性 | 说明 |
|---|---|
InitialShowDelay |
延迟显示时间(毫秒) |
ShowDuration |
显示持续时间(毫秒) |
Placement |
定位方式 |
8. 数据展示控件
8.1 TreeView
树形控件,展示层级结构数据。
xml
<TreeView>
<TreeViewItem Header="公司" IsExpanded="True">
<TreeViewItem Header="技术部" IsExpanded="True">
<TreeViewItem Header="前端组"/>
<TreeViewItem Header="后端组"/>
</TreeViewItem>
<TreeViewItem Header="产品部"/>
</TreeViewItem>
</TreeView>
| 属性 | 说明 |
|---|---|
IsExpanded |
是否展开 |
IsSelected |
是否选中 |
Header |
节点标题 |
常用事件: SelectedItemChanged。
8.2 DataGrid
数据表格控件,用于展示和编辑表格数据。
xml
<DataGrid AutoGenerateColumns="True" ItemsSource="{Binding Users}"/>
xml
<DataGrid AutoGenerateColumns="False" ItemsSource="{Binding Users}">
<DataGrid.Columns>
<DataGridTextColumn Header="姓名" Binding="{Binding Name}" Width="*"/>
<DataGridTextColumn Header="年龄" Binding="{Binding Age}" Width="80"/>
<DataGridCheckBoxColumn Header="启用" Binding="{Binding Enabled}" Width="60"/>
</DataGrid.Columns>
</DataGrid>
| 属性 | 说明 |
|---|---|
AutoGenerateColumns |
自动生成列 |
ItemsSource |
数据源 |
CanUserAddRows |
允许用户添加行 |
CanUserDeleteRows |
允许用户删除行 |
IsReadOnly |
是否只读 |
SelectionMode |
Single、Extended |
SelectionUnit |
FullRow、Cell |
列类型: DataGridTextColumn、DataGridCheckBoxColumn、DataGridComboBoxColumn、DataGridHyperlinkColumn、DataGridTemplateColumn(自定义模板)。
8.3 ListView
列表视图控件,支持多种显示模式。
xml
<ListView ItemsSource="{Binding Items}">
<ListView.View>
<GridView>
<GridViewColumn Header="名称" DisplayMemberBinding="{Binding Name}" Width="150"/>
<GridViewColumn Header="价格" DisplayMemberBinding="{Binding Price}" Width="100"/>
</GridView>
</ListView.View>
</ListView>