第四章-控件
布局控件:
Grid、StackPanel、WrapPanel、DockPanel、UniformGrid、Border。除了Border继承Decorator外，其他全都继承Pane1
内容控件:
1、不带header的:Label、Button、checkBox、RadioButton、ToolTip、ScrolleViewer、
2、带hearder的:GroupBox、Expander、TabControl
一、控件属性
字体属性
FontFamily:希望使用的字体的名称
FontSize:字体大小
FontStyle:字体风格，Normal、Italic、Oblique
FontWidth:文本粗细,Bold
FontStreth:字体拉伸程度
内容属性Content
对齐:HorizontalAlignment、VerticalAlignment
二、Label控件
<StackPanel> <Label Width="100" Margin="5" Target="{Binding ElementName=txtName}">_Name</Label> <TextBox Width="100" Margin="5" x:Name="txtName"/> <Label Width="100" Margin="5" Target="{Binding ElementName=txtAge}">_Age</Label> <TextBox Width="100" Margin="5" x:Name="txtAge"></TextBox> </StackPanel>
标签文本中的下划线指示快捷键(如果确实需要在标签中显示下划线，必须添加两个下划线)。所有记忆符都使用 Alt 键和已经确定的快捷键工作,例如想快速访问txtName,则可以使用Alt+N
如果不需要记忆符功能可使用TextBloc该控件更加轻量级
如果需要实现换行则必须要使用TextBlock、
<TextBlock TextWrapping="Wrap" Width="40">1111111111111111111111111111</TextBlock>
三、Button控件
<StackPanel> <!--IsCancel:关联ESC键，当按下ESC时，Click事件触发--> <Button Width="100" Height="30" Margin="5" IsCancel="True" Click="Button_Click"> 按钮</Button> <!--IsDefault：焦点聚焦于该按钮--> <Button Width="100" Height="30" Margin="5" IsDefault="True" Click="Button_Click">按钮</Button> <!--将图片与文字在同一个按钮中显示--> <Button Width="200" Height="100" Margin="5" IsDefault="True" Click="Button_Click"> <StackPanel> <Image Width="100" Height="60" Source="/Image/用户头像_1759838580.png" /> <TextBlock FontSize="20">用户登录</TextBlock> </StackPanel> </Button> </StackPanel>
四、CheckBox
List列表控件
以下两个功能归整其实是一个功能
1、单击任意显示第几项和内容，选择状态
2、List列表控件发生变化，显示点击的最后一项的第几项和内容、选择内容
<StackPanel> <ListBox Name="lst" CheckBox.Click="ListBox_Click" SelectionChanged="ListBox_Click"> <CheckBox>中国</CheckBox> <CheckBox>美国</CheckBox> <CheckBox>俄罗斯</CheckBox> </ListBox> <TextBlock x:Name="txtInfo"> </TextBlock> <Button Width="50" Click="Button_Click">获取所有已选择的内容</Button> </StackPanel>
private void ListBox_Click(object sender, RoutedEventArgs e) { //事件由CheckBox触发（避免ListBox内部存在其他控件），则将选择的对象设置为CheckBox CheckBox cb = e.OriginalSource as CheckBox; if (cb != null) { lst.SelectedItem = cb; } //获取ListBox的选项 if (lst.SelectedItem != null) { if(e.OriginalSource is CheckBox cbox) { if(cbox !=null) { CheckBox a; txtInfo.Text = $"选项的索引为{lst.SelectedIndex},内容为{cbox.Content},状态为{cbox.IsChecked}"; } } } } private void Button_Click(object sender, RoutedEventArgs e) { string result=""; foreach (var item in lst.Items) { if (item is CheckBox cbox) { if (cbox.IsChecked == true) { result += $"{cbox.Content},"; } } } result = result.Trim(','); MessageBox.Show(result); } }
五、RadioButton
<StackPanel> <!--互斥--> <RadioButton GroupName="country">中国</RadioButton> <RadioButton GroupName="country">美国</RadioButton> <RadioButton GroupName="country">俄罗斯</RadioButton> </StackPanel>
如果没有指定GroupName那么按照布局分组，如果有那么其优先级最高
六、ToolTip
WPF 为工具提示(当在一些感兴趣的内容上悬停鼠标时，就会弹出的黄色方框)提供了一个灵活模型。因为在 WPF 中工具提示是内容控件，所以可在工具提示中放置任何可视化元素。还可改变各种时间设置来控制工具提示的显示和隐藏速度
<StackPanel> <!--ToolTipService.ShowDuration显示的时间--> <!--ToolTipService.InitialShowDelay延时显示--> <Button Width="50" Height="40" ToolTip="这个是按钮" ToolTipService.ShowDuration="5000" Margin="5">按钮</Button> <Button Width="50" Height="40" ToolTip="这个是按钮" ToolTipService.InitialShowDelay="5000" Margin="5">按钮</Button> <!--ToolTip可以显示图片或文字+图片--> <Button Width="150" Height="80" Margin="5" Content="按钮"> <Button.ToolTip> <StackPanel> <TextBlock>Hello</TextBlock> <!--图片--> </StackPanel> </Button.ToolTip> </Button> <!--改变提示位置--> <Button Width="150" Height="80" Margin="5" Content="按钮"> <Button.ToolTip> <ToolTip Placement="Left"> <StackPanel> <TextBlock>Hello Left</TextBlock> <!--图片--> </StackPanel> </ToolTip> </Button.ToolTip> </Button> </StackPanel>
七、Popup
<StackPanel> <TextBlock> Hello World <Run x:Name="runTxt" MouseEnter="Run_MouseEnter" Text="This is C#" TextDecorations="Underline"></Run> </TextBlock> <!--AllowsTransparency:透明 PopupAnimation动画 --> <Popup StaysOpen="False" x:Name="pop" Placement="Mouse" PlacementTarget="{Binding ElementName=runTxt}" AllowsTransparency="True" PopupAnimation="None" > <Button>按钮</Button> </Popup> </StackPanel>
八、ScrollViewer
<!--垂直/水平方向滚动条可见状态 自动、禁用、隐藏、一直可见--> <DockPanel> <StackPanel DockPanel.Dock="Top" Orientation="Horizontal" HorizontalAlignment="Center" Height="120"> <Button Margin="5" Width="150" Height="30" Click="Button_Click1">上一条</Button> <Button Margin="5" Width="150" Height="30" Click="Button_Click">下一条</Button> <Button Margin="5" Width="150" Height="30" Click="Button_Click_1">下一页</Button> </StackPanel> <ScrollViewer VerticalScrollBarVisibility="Auto" Name="scroll"> <StackPanel> <Button Height="20" Width="180" Margin="10">按钮1</Button> <Button Height="20" Width="180" Margin="10">按钮2</Button> <Button Height="20" Width="180" Margin="10">按钮3</Button> <Button Height="20" Width="180" Margin="10">按钮4</Button> <Button Height="20" Width="180" Margin="10">按钮5</Button> <Button Height="20" Width="180" Margin="10">按钮6</Button> <Button Height="20" Width="180" Margin="10">按钮7</Button> <Button Height="20" Width="180" Margin="10">按钮8</Button> <Button Height="20" Width="180" Margin="10">按钮9</Button> <Button Height="20" Width="180" Margin="10">按钮10</Button> <Button Height="20" Width="180" Margin="10">按钮11</Button> <Button Height="20" Width="180" Margin="10">按钮12</Button> <Button Height="20" Width="180" Margin="10">按钮13</Button> <Button Height="20" Width="180" Margin="10">按钮14</Button> </StackPanel> </ScrollViewer> </DockPanel>
九、GroupBox
<StackPanel> <GroupBox Header="基本资料" Height="100" Width="120"> <StackPanel> <TextBlock Height="30" Margin="5">姓名</TextBlock> <TextBlock Height="30" Margin="5">年龄</TextBlock> </StackPanel> </GroupBox> <GroupBox Header="详细资料" Height="100" Width="120"> <StackPanel> <TextBlock Height="30" Margin="5">姓名</TextBlock> <TextBlock Height="30" Margin="5">年龄</TextBlock> </StackPanel> </GroupBox> </StackPanel>
十、TabControl
<StackPanel Orientation="Vertical"> <TabControl SelectionChanged="TabControl_SelectionChanged"> <TabItem Header="选项1"> <Button>按钮1</Button> </TabItem> <TabItem Header="选项2"> <Button>按钮2</Button> </TabItem> <TabItem Header="选项3"> <Button>按钮3</Button> </TabItem> </TabControl> </StackPanel>
十一、Expander
<StackPanel> <!-- IsExpanded:是否展开--> <Expander Header="企业例程" IsExpanded="True"> <TextBlock>bdfghjkl</TextBlock> </Expander> <Expander Header="企业成立时间"> <TextBlock>SSSSS</TextBlock> </Expander> </StackPanel>
十二、TextBox
<StackPanel> <!--AcceptsReturn:允许使用Enter键作为换行--> <!--SelectAll()--> <TextBox Width="200" Height="80" TextWrapping="Wrap" AcceptsReturn="True" VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Auto" > </TextBox> <PasswordBox Width="300" Height="30" Margin="15" PasswordChar="*" > </PasswordBox> </StackPanel>
十三、ListBox
ListBox只能显示一项，ListView显示多项
<!-- 默认不选择，IsSelected可指定默认选择 SelectionMode:支持多选，单选、连选(Ctrl or Shift) --> <ListBox x:Name="listbox" SelectionMode="Multiple" SelectionChanged="ListBox_SelectionChanged"> <!--ListBoxItem在此处可不写--> <ListBoxItem> <StackPanel> <TextBlock>中国</TextBlock> <Button Height="20"></Button> </StackPanel> </ListBoxItem> <ListBoxItem>美国</ListBoxItem> <ListBoxItem IsSelected="True">俄罗斯</ListBoxItem> </ListBox>
private void ListBox_SelectionChanged(object sender, SelectionChangedEventArgs e) { //SelectedItem获取刚开始选择的一项，SelectedItem获取所有选择项 ListBox lst = (ListBox)sender; int index = lst.SelectedIndex; if (lst != null) { ListBoxItem item = lst.SelectedItem as ListBoxItem; if (item != null) { var obj = item.Content; } } }
十四、ComboBox
<ComboBox Height="30" Width="100" SelectionChanged="ComboBox_SelectionChanged"> <ComboBoxItem>中国</ComboBoxItem> <ComboBoxItem>美国</ComboBoxItem> <ComboBoxItem>俄罗斯</ComboBoxItem> </ComboBox>
十五、范围控件
ScrollBar、Slider、ProgressBar
主要属性:minvalue，maxvalue,value
private void ProgressBar_Loaded(object sender, RoutedEventArgs e) { int max = 100; proBar.Maximum = max; proBar.Minimum = 0; //异步执行 Task.Run(async () => { for (int i = 0; i < max; i++) { Dispatcher.Invoke(() => { //UI线程 proBar.Value = i; }); //外部Task管理的线程 await Task.Delay(100); } }); }
<ProgressBar x:Name="proBar" Width="200" Height="30" Margin="130" Loaded="ProgressBar_Loaded"></ProgressBar>
浙公网安备 33010602011771号