• WPF 项目开发入门（七） From表单组件

    From表单组件和HTML编辑元素一样，用于编辑页面录入数据使用的组件。主要分为以下几个组件TextBlock 和 TextBox文本编辑，CheckBox复选框，RadioButton单选框，ComboBox下拉组件等组成。

    6.6.1 TextBlock 和 TextBox文本编辑

    TextBlock 和TextBox 处理字符串的文本框。对字体的处理包含以下几种属性设置。

    • FontSize ：字体大小

    • FontWeight：字符加粗

    • FontStyle：设置是正常显示还是对角

    • TextTrimming: 文本修剪 包含以下几种属性

    CharacterEllipsis ：当区域内无法显示字符时，可在字符末尾显示“…”。

    WordEllipsis ：显示全部字符串,如果显示不下字符末尾显示“…”。

    Wrap：字符串都将根据区域的宽度自动换行。

    NoWrap：根据长度显示字符串内容。

    WrapWithOverflow：中间不会出现换行符。如果字符串太长不会显示所有单词。

    <Grid>
    <StackPanel>
        <TextBlock Text="我我AAAAAAAACCCCCCCDDDD"------字符串显示组件
                       FontSize="20"------字体大小
                       Width="120"
                       FontWeight="Bold"------字符加粗
                       FontStyle="Italic"-----正常显示
                       TextTrimming="CharacterEllipsis"-------无法显示的字符末尾显示“...”
                       />

            <TextBlock Text="AAA BBB CCC DDD EEE FFF"
                       FontSize="20"
                       Width="120"
                       FontWeight="Bold"------字符加粗
                       FontStyle="Italic"-----正常显示
                       TextTrimming="WordEllipsis"-------无法显示的字符末尾显示“...”
                       />

            <TextBlock FontSize="20"---多行显示字符第
                       Width="120">
                <Run Text="AAA"/>---多行显示字符第一行字符
                <LineBreak/>
                <Run Text="BBB"/>---多行显示字符第二行字符
            TextBlock>

            <TextBox FontSize="20"
                     Width="120"
                     Text="aaabbbcccdddeeefff abc"
                     TextWrapping="NoWrap"/>-----根据长度显示字符串内容

            <TextBox FontSize="20"
                     Width="120"
                     Text="aaabbbcccdddeeefff abc"
                     TextWrapping="Wrap"/>-----自动换行

            <TextBox FontSize="20"
                     Width="120"
                     Text="aaabbbcccdddeeefff abc"
                     TextWrapping="WrapWithOverflow"/>-----自动去除多余字符
        StackPanel>
    Grid>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wISJW9iq-1656038404257)(D:\build\Typora\wpf\Snipaste_2021-12-14_17-45-45.png)]

    6.6.2 单选RadioButton按钮

    RadioButton 是一个单选控件，允许您从某个组中选择一个项目。例如，男，女选择。

    • GroupName：指定 GroupName 属性，即使它们位于同一容器（面板等）上，也可以作为不同的组进行操作。
    • IsChecked ： IsChecked 以选择状态。共有三种类型的内容：True、False 和 null（未确认）
    <StackPanel Margin="10">
    <RadioButton x:Name="sex1"-------单选控件全局名称
                 Content="男" -------选择项目
                 GroupName="1" ------与下边女为一组
                 IsChecked="True"----默认被选中
                 FontSize="20"/>
    <RadioButton x:Name="sex2"-------单选控件全局名称
                 Content="女"
                 GroupName="1"-----与上边男为一组
                 FontSize="20"/>
StackPanel>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YYBouCHX-1656038404259)(D:\build\Typora\wpf\Snipaste_2021-12-14_17-57-04.png)]

    事件设置

    单选控件主要有事件由 Checked 和 Unchecked 两个事件。

    <StackPanel Margin="10">
    <RadioButton x:Name="sex1" Content="男"  GroupName="1" 
                 IsChecked="True"
                 Checked="sex1_Checked" ----定义选中事件
                 FontSize="20"/>
    <RadioButton x:Name="sex2" Content="女" GroupName="1"
                  Checked="sex1_Checked" ----定义选中事件
                 FontSize="20"/>
StackPanel>
-----------------     c#业务代码    ----------------------
private void sex1_Checked(object sender, RoutedEventArgs e){
      RadioButton ra = sender as RadioButton;
      MessageBox.Show(ra.Content.ToString().Trim());
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14

    6.6.3 复选框CheckBox

    CheckBox 是一个允许您选择多个项目的选择框。

    • IsChecked 选框状态：三种类型的状态：开、关闭 和 Indeterminate对应属性设置（Ture,False,{x:Null}）。
    <StackPanel Margin="10">
    <CheckBox x:Name="z1" Margin="5,0,0,0" 
              Content="看书" IsChecked="True" />-----打开
    <CheckBox x:Name="z2" Margin="5,0,0,0" 
              Content="打游戏"  IsChecked="{x:Null}" />-----Indeterminate
    <CheckBox x:Name="z3" Margin="5,0,0,0" 
            Content="打球" IsChecked="False"/>-----关闭
StackPanel>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DaoHiA2d-1656038404259)(D:\build\Typora\wpf\Snipaste_2021-12-14_18-31-41.png)]

    • IsThreeState

    只有当 IsThreeState 属性设置为 True 时，才有 开、关闭 和 Indeterminate 三种状态，当设置为 False 时，只能选择 开 或 关闭 两种状态。

    • 事件设置

    当 IsChecked 状态发生变化时，会通知 Checked、Unchecked 和 Indeterminate 三个事件之一。

    private void MyCheckBox_Checked(object sender, RoutedEventArgs e){

}
private void MyCheckBox_Unchecked(object sender, RoutedEventArgs e){
       
}
private void MyCheckBox_Indeterminate(object sender, RoutedEventArgs e){
 
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9

    6.6.4 ComboBox 下拉框

    ComboBox 是用于从下拉列表中选择数据的控件。

    C#定义下拉数据结构

    public partial class from : Window{
    //装载下拉列表的数据集合
    private ObservableCollection _cuser = new ObservableCollection();
    public from() {
            InitializeComponent();
        	//设置下拉列表数据内容
            _cuser.Add(new User { Id = 1, Name = "zht", Dept = "部门1" });
            _cuser.Add(new User { Id = 2, Name = "zhtbs", Dept = "部门2" });
            _cuser.Add(new User { Id = 3, Name = "王**", Dept = "部门3" });
            MyComboBox.ItemsSource = _cuser;//MyComboBox组件装入数据
    }
    //定义下拉框数据模型
    public class User{
            public int Id { get; set; }
            public string Name { get; set; }
            public string Dept { get; set; }
    }
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18

    XAML页面内容

    • SelectedValue 设置默认选择中的属性注意一定要设置在ItemsSource="{Binding }"属性之前。
    <StackPanel Margin="10">
    <ComboBox x:Name="MyComboBox"
              Height="40" Width="240" FontSize="20"
              VerticalAlignment="Center"
              SelectedValuePath="Id"-------------下拉VALUE值对应数据属性
              DisplayMemberPath="Name" />--------下拉TEXT值对应数据属性
StackPanel>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-IXKiuAfU-1656038404260)(D:\build\Typora\wpf\Snipaste_2021-12-14_18-57-46.png)]

    事件设置

    注意SelectedValue初始值为null，如果直接SelectedValue.ToString()会出现错误，需要判断一下是否为空。

    <ComboBox x:Name="MyComboBox"
          Height="40" Width="240" FontSize="20"
          VerticalAlignment="Center"
          SelectedValuePath="Id"
          DisplayMemberPath="Name" 
          SelectionChanged="MyComboBox_SelectionChanged"/>
-----------------     c#业务代码    ----------------------
private void MyComboBox_SelectionChanged(object sender, 
					SelectionChangedEventArgs e){
	var bo= sender as ComboBox;
	if (bo.SelectedValue==null) {
                return;
	}
	User u=bo.SelectedItem as User;//获得数据结构
     MessageBox.Show(bo.SelectedValue.ToString());
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16

    ComboBox.ItemTemplate 自定义下拉内容

    <ComboBox x:Name="MyComboBox"
          Height="40" Width="240" FontSize="20"
          VerticalAlignment="Center"
          SelectedValuePath="Id"
          SelectionChanged="MyComboBox_SelectionChanged">
    <ComboBox.ItemTemplate>-------下拉内容定义
        <DataTemplate>
            <StackPanel Orientation="Horizontal">
                <TextBlock Text="{Binding Id}" FontSize="20" Margin="5"/>
                <TextBlock Text="{Binding Name}" FontSize="20" Margin="5"/>
                <TextBlock Text="{Binding Dept}" FontSize="20" Margin="5"/>
            StackPanel>
        DataTemplate>
    ComboBox.ItemTemplate>
ComboBox>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FgNiWSZR-1656038404260)(D:\build\Typora\wpf\Snipaste_2021-12-14_19-15-55.png)]

    6.6.5 ListBox 列表框

    从列表组件中选择任何行。可以进行单项选择或多项选择操作。ListBox上添加控件并进行排列，数据绑定方法使用ItemTemplate和DataTemplate实现，方法与ListView和ComboBox相同。ListView 和 ComboBox 的区别在于有一个属性叫做 SelectionMode。SelectionMode 是用于在 ListBox 中选择单个项目或允许多个选择的设置。

    • Single

      单项选择，只能选择一项。

    • Extended

      通过在按住键盘上的 Control 键或 Shift 键的同时单击来进行多项选择。用法和Excel中选择行时一样，按住Control可以选中被点击的行，按住Shift可以选中从第一个选中行到下一个选中行的行，可以一起选择。

    • Multiple

      无需按键盘上的键即可进行多项选择。单击的行变为选中状态，可以再次单击以取消选中它。

    <ListBox x:Name="MyListBox"
         HorizontalAlignment="Left" VerticalAlignment="Top"
         Margin="10" Width="260" Height="180">
    <ListBox.ItemTemplate>-------摸板设置
        <DataTemplate>
            <StackPanel Orientation="Horizontal">------摸板内容
                <TextBlock Text="{Binding Name}" Margin="10" />
                <TextBlock Text="{Binding Dept}"  Margin="10" />
            StackPanel>
        DataTemplate>
    ListBox.ItemTemplate>
ListBox>
<StackPanel Orientation="Horizontal">
    <RadioButton x:Name="Single" Content="Single" 
                 Checked="RadioButton_Checked"/>-------选择单项模式
    <RadioButton x:Name="Extended" Content="Extended"
                 Checked="RadioButton_Checked"/>-------选择多选按键模式
    <RadioButton x:Name="Multiple" Content="Multiple"
                 Checked="RadioButton_Checked"/>-------选择多选模式
StackPanel>
<Button FontSize="20"  Content="看数据"   Click="Button_Click"/>
StackPanel>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22

    C#业务代码

    public partial class from : Window{
    //装载下拉列表的数据集合
    private ObservableCollection _cuser = new ObservableCollection();
    public from() {
            InitializeComponent();
        	//设置下拉列表数据内容
            _cuser.Add(new User { Id = 1, Name = "zht", Dept = "部门1" });
            _cuser.Add(new User { Id = 2, Name = "zhtbs", Dept = "部门2" });
            _cuser.Add(new User { Id = 3, Name = "王**", Dept = "部门3" });
            MyListBox.ItemsSource = _cuser;//MyComboBox组件装入数据
            Single.IsChecked=true;//选择单项模式
    }
    //定义下拉框数据模型
    public class User{
            public int Id { get; set; }
            public string Name { get; set; }
            public string Dept { get; set; }
    }
    //列表模式变化
    private void RadioButton_Checked(object sender, RoutedEventArgs e){
        if (Single.IsChecked.Value){
            MyListBox.SelectionMode = SelectionMode.Single;
        }else if (Extended.IsChecked.Value) {
            MyListBox.SelectionMode = SelectionMode.Extended;
        } else {
            MyListBox.SelectionMode = SelectionMode.Multiple;
        }
    }
    //列表数据获得
    private void Button_Click(object sender, RoutedEventArgs e) {
        User u = MyListBox.SelectedItem as User;
        //获得数据结构
        foreach (var item in MyListBox.SelectedItems) {
            User s = item as User;
            MessageBox.Show(s.Name);
        }
    }
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 注意在ListBox 不同模式中，使用对应额方法 SelectedItem 和 SelectionItems 来获得数据内容。

    6.6.6 GroupBox面板

    GroupBox 是标题面板。

    <GroupBox Margin="10">
    <GroupBox.Header>--------头部信息
        <StackPanel Orientation="Horizontal">
            <CheckBox Content="check box" FontSize="20"/>
            <TextBlock Text="AAA" FontSize="20" Margin="10,0,0,0"/>
        StackPanel>
    GroupBox.Header>
    <StackPanel>
        <RadioButton FontSize="20" Content="CCC"/>
        <RadioButton FontSize="20" Content="DDD"/>
    StackPanel>
GroupBox>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QOfOwWF1-1656038404261)(D:\build\Typora\wpf\Snipaste_2021-12-14_20-27-58.png)]

  • 相关阅读:
    Eviews用向量自回归模型VAR实证分析公路交通通车里程与经济发展GDP协整关系时间序列数据和脉冲响应可视化...
    显示控件——AV输入显示
    flex布局(弹性盒子三)
    synchronized有几种用法？
    vue3 Driver.js 页面分步引导
    Pytorch D2L Subplots方法对画图、图片处理
    2022牛客多校十 F-Shannon Switching Game?（博弈+bfs）
    Softing smartLink产品系列新版本为工厂资产管理提供了扩展功能
    CentOS7和CentOS8 Asterisk 20.0.0 简单图形化界面8--PJSIP的环境NAT设置
    使用mqtt.fx向EMQX服务器发送消息
  • 原文地址：https://blog.csdn.net/zhtbs/article/details/125441149