WPF 项目开发入门（七） From表单组件-EW帮帮网

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>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(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>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(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());
}

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>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(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){
 
}

6.6.4 ComboBox 下拉框

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

C#定义下拉数据结构

public partial class from : Window{
    //装载下拉列表的数据集合
    private ObservableCollection<User> _cuser = new ObservableCollection<User>();
    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; }
    }
}

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>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(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());
}

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>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(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>

C#业务代码

public partial class from : Window{
    //装载下拉列表的数据集合
    private ObservableCollection<User> _cuser = new ObservableCollection<User>();
    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);
        }
    }
}

注意在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>

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

本文含有隐藏内容，请开通VIP 后查看

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

6.6.1 TextBlock 和 TextBox文本编辑

FontSize ：字体大小

FontWeight：字符加粗

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

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

6.6.2 单选RadioButton按钮

6.6.3 复选框CheckBox

IsThreeState

6.6.4 ComboBox 下拉框

6.6.5 ListBox 列表框

6.6.6 GroupBox面板

网站公告

今日签到

热门文章

最新发布

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

6.6.1 TextBlock 和 TextBox文本编辑

FontSize ：字体大小

FontWeight：字符加粗

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

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

6.6.2 单选RadioButton按钮

6.6.3 复选框CheckBox

IsThreeState

6.6.4 ComboBox 下拉框

6.6.5 ListBox 列表框

6.6.6 GroupBox面板

网站公告

今日签到

热门文章

最新发布

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