按钮
Button控件
特别注意属性:
IsCancel:当设置值为true时,按钮就是为窗体取消按钮,在当前窗体任何位置按下Esc按键都会触发该按钮的点击事件。
IsDefault:当设置值为true时,窗体任何位置按下Enter键都会触发该按钮的点击事件。
ToggleButton控件和RepeatButton控件
- ToggleButton:类似于开关按钮,第一次点击时按下状态,再次点击是释放状态。每次按下都会触发一次Click事件。
- RepeatButton:保持按下状态会持续触发Click事件,直到释放按钮为止。
CheckBox控件
IsChecked:默认状态(是否选中)
IsThreeState:是否允许处于不确定状态,值为false是只能在选中和未选择中切换,要是之处于不确定状态需要后台代码调整。
RadioButton控件
该控件不同于CheckBox控件的突出点在于它的GroupName属性可以决定他是单选还是多选。如果GroupName值一样就只能先一个,每个都不同的话就是多选按钮。
如下定义,只能在男或女中选一个,但是是否棒棒哒都可以选:
<DockPanel>
<RadioButton Width="100" Height="50" GroupName="res">男</RadioButton>
<RadioButton Width="100" Height="50" GroupName="res">女</RadioButton>
<RadioButton Width="100" Height="50" GroupName="ress">棒棒哒</RadioButton>
</DockPanel>
工具提示
ToolTip
直接使用元素的ToolTip属性:
鼠标悬停时提示,案例如下:
<DockPanel>
<Button Width="150" Height="50" Content="按钮">
<Button.ToolTip>
<StackPanel>
<TextBlock>这个是按钮!</TextBlock>
</StackPanel>
</Button.ToolTip>
</Button>
</DockPanel>
可通过设置TooplTip的属性使之呈现不同效果:
<DockPanel>
<Button Width="150" Height="50" Content="按钮">
<Button.ToolTip>
<ToolTip Background="#60AA4030" Foreground="White">
<StackPanel>
<TextBlock>这个是按钮!</TextBlock>
</StackPanel>
</ToolTip>
</Button.ToolTip>
</Button>
</DockPanel>
Popup控件
它于ToolTip及其相似,最大不同点在于它不会自动显示或自动关闭,需要通过IsOpen属性控制。
<DockPanel>
<TextBlock Width="150" Height="50" Text="输入文本框" MouseEnter="run_MouseEnter" >
</TextBlock>
<Popup Name="popLink" StaysOpen="False" Placement="Mouse" MaxWidth="200"
PopupAnimation="Slide" AllowsTransparency = "True">
<Border BorderBrush="Beige" BorderThickness="2" Background="White">
<TextBlock Margin="10" TextWrapping="Wrap" >
For more information, see
<Hyperlink NavigateUri="http://en.wikipedia.org/wiki/Term" Click="lnk_Click">Wikipedia</Hyperlink>
</TextBlock>
</Border>
</Popup>
</DockPanel>
private void lnk_Click(object sender, RoutedEventArgs e)
{
Process.Start(((Hyperlink)sender).NavigateUri.ToString());
}
private void run_MouseEnter(object sender, MouseEventArgs e)
{
popLink.IsOpen = true;
}
特殊容器
ScrollViewer
封装需要需要滚动显示的内容:
<ScrollViewer Name="scroller">
<Grid Margin="0,10,0,0" Focusable="False">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"></ColumnDefinition>
<ColumnDefinition Width="*" MinWidth="50" MaxWidth="800"></ColumnDefinition>
<ColumnDefinition Width="Auto"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Label Grid.Row="0" Grid.Column="0" Margin="3"
VerticalAlignment="Center">Home:</Label>
<TextBox Grid.Row="0" Grid.Column="1" Margin="3"
Height="Auto" VerticalAlignment="Center"></TextBox>
<Button Grid.Row="0" Grid.Column="2" Margin="3" Padding="2">Browse</Button>
<Label Grid.Row="1" Grid.Column="0" Margin="3"
VerticalAlignment="Center">Network:</Label>
<TextBox Grid.Row="1" Grid.Column="1" Margin="3"
Height="Auto" VerticalAlignment="Center"></TextBox>
<Button Grid.Row="1" Grid.Column="2" Margin="3" Padding="2">Browse</Button>
<Label Grid.Row="2" Grid.Column="0" Margin="3"
VerticalAlignment="Center">Web:</Label>
<TextBox Grid.Row="2" Grid.Column="1" Margin="3"
Height="Auto" VerticalAlignment="Center"></TextBox>
<Button Grid.Row="2" Grid.Column="2" Margin="3" Padding="2">Browse</Button>
<Label Grid.Row="3" Grid.Column="0" Margin="3"
VerticalAlignment="Center">Secondary:</Label>
<TextBox Grid.Row="3" Grid.Column="1" Margin="3"
Height="Auto" VerticalAlignment="Center"></TextBox>
<Button Grid.Row="3" Grid.Column="2" Margin="3" Padding="2">Browse</Button>
<Label Grid.Row="4" Grid.Column="0" Margin="3"
VerticalAlignment="Center">Home:</Label>
<TextBox Grid.Row="4" Grid.Column="1" Margin="3"
Height="Auto" VerticalAlignment="Center"></TextBox>
<Button Grid.Row="4" Grid.Column="2" Margin="3" Padding="2">Browse</Button>
<Label Grid.Row="5" Grid.Column="0" Margin="3"
VerticalAlignment="Center">Network:</Label>
<TextBox Grid.Row="5" Grid.Column="1" Margin="3"
Height="Auto" VerticalAlignment="Center"></TextBox>
<Button Grid.Row="5" Grid.Column="2" Margin="3" Padding="2">Browse</Button>
<Label Grid.Row="6" Grid.Column="0" Margin="3"
VerticalAlignment="Center">Web:</Label>
<TextBox Grid.Row="6" Grid.Column="1" Margin="3"
Height="Auto" VerticalAlignment="Center"></TextBox>
<Button Grid.Row="6" Grid.Column="2" Margin="3" Padding="2">Browse</Button>
<Label Grid.Row="7" Grid.Column="0" Margin="3"
VerticalAlignment="Center">Secondary:</Label>
<TextBox Grid.Row="7" Grid.Column="1" Margin="3"
Height="Auto" VerticalAlignment="Center"></TextBox>
<Button Grid.Row="7" Grid.Column="2" Margin="3" Padding="2">Browse</Button>
</Grid>
</ScrollViewer>
GroupBox
显示具有圆角和标题的方框:
前台代码如下:
<GroupBox Margin="5" Header="测试使用">
<StackPanel>
<RadioButton>Group 1</RadioButton>
<RadioButton>Group 1</RadioButton>
<RadioButton>Group 1</RadioButton>
<RadioButton Margin="0,10,0,0" GroupName="Group2">Group 2</RadioButton>
</StackPanel>
</GroupBox>
Tabltem
界面切换显示:
后台代码:
<TabControl Margin="5">
<TabItem>
<TabItem.Header>
<StackPanel>
<TextBlock Margin="3" >Image and Text Tab Title</TextBlock>
</StackPanel>
</TabItem.Header>
<StackPanel Margin="3">
<CheckBox Margin="3">Setting One</CheckBox>
<CheckBox Margin="3">Setting Two</CheckBox>
<CheckBox Margin="3">Setting Three</CheckBox>
</StackPanel>
</TabItem>
<TabItem Header="Tab Two"></TabItem>
</TabControl>
Expander
通过小箭头隐藏或显示控制:
前台代码:
<Expander Margin="5" Padding="5" Header="说明文档"
BorderThickness="1" BorderBrush="Black">
<TextBlock TextWrapping="Wrap">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam mi sapien, viverra et, lacinia varius, ullamcorper sed, sapien. Proin rutrum arcu vitae tellus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque libero dui, eleifend faucibus, auctor at, aliquet a, nulla. Nunc eros. Phasellus mauris nisi, eleifend nec, adipiscing nec, luctus nec, lacus. Aliquam justo metus, vestibulum non, accumsan id, hendrerit at, nibh. Praesent accumsan urna quis tortor. Proin erat libero, facilisis nec, rhoncus ut, malesuada ut, ipsum. Donec id nibh.
</TextBlock>
</Expander>
列表控件
ListBox
前台代码如下:
<ListBox>
<ListBoxItem>1</ListBoxItem>
<ListBoxItem>11</ListBoxItem>
<ListBoxItem>111</ListBoxItem>
<ListBoxItem>1111</ListBoxItem>
<ListBoxItem>11111</ListBoxItem>
</ListBox>
ComboBox
前台代码:
<ComboBox Margin="5" >
<StackPanel Orientation="Horizontal">
<Label VerticalContentAlignment="Center">A</Label>
</StackPanel>
<StackPanel Orientation="Horizontal">
<Label VerticalContentAlignment="Center">B</Label>
</StackPanel>
<StackPanel Orientation="Horizontal">
<Label VerticalContentAlignment="Center">C</Label>
</StackPanel>
</ComboBox>
范围控件
通用属性:
- Value:控件的当前值
- Maximum:上限值
- Minimum:下限值
- SmallChang:Value属性是“小变化”向上或向下调整的数量。
- LargeChang:Value属性是“大变化”向上或向下调整的数量。
Slider
前台代码:
<Slider Maximum="100" Value="10"></Slider>
日期控件
通用属性:
- DisplayDateStart和DisplayDateEnd:设置日期的显示范围
- BlackoutDates:保存被禁用不能选中的日期集合
- SelectedDate:作为DateTime对象提供选择的日期。
- SelectedDates:作为DateTime对象提供选择的日期,Calendar控件支持。
- DisplayDate:设置初始显示日期
- FirstDayOfWeek:确定日历开始位置显示一星期中的哪一天
- IsTodayHighlighted:确定是否突出显示指定日期
- DisplayMode:日志显示模式
- SelectionMode:日期选中模式
- IsDropDownOpen:确定是否打开DatePicker控件的下拉日历视图
- SelectedDateFormat:确定DatePicker控件的文本显示选中的日期方式
Calendar
前台代码:
<StackPanel>
<Calendar Margin="3" SelectionMode="MultipleRange" SelectedDatesChanged="Calendar_SelectedDatesChanged" ></Calendar>
</StackPanel>
DatePicker
前台代码:
<StackPanel Grid.Column="1">
<DatePicker Margin="3" DateValidationError="DatePicker_DateValidationError" ></DatePicker>
</StackPanel>