WPF零基础学习-常用控件1

一,命名空间

xaml命名空间

xmlns:[前缀名]="命名空间描述"

自定义类或程序集映射语法

xmlns:[必选前缀]="clr-namespace:[命名空间];assembly=[程序集名称]"

二,WPF应用程序组成

App.config:配置文件 连接字符串 配置信息

App.xaml:设置应用程序起始文件,系统级资源

  一个xaml文件至少要有两个命名空间:1,默认命名空间 。2,带x前缀

        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

  

  StartupUri="View/MainWindow.xaml">:起始文件(开始的窗体)

   <Application.Resources>:定义整个WPF应用程序的相关资源

App.xaml.cs:App.xaml文件的后台类文件

MainWindow.xaml:Window-WPF应用程序界面与Xaml设计文件

MainWindow.xaml.cs:xaml窗口文件的后台代码文件

 

三,Window介绍

System.Window.Window

Window--ContentControl:内容控件  只能承载一个Content--Grid

1,常用属性

【1】ShowInTaskbar:窗口是否具有任务栏按钮

【2】WindowStartupLocation:窗口首次显示的位置

【3】WindowState:窗口最大化,最小化,正常尺寸显示

【4】Topmost:窗口显示在最上层

【5】Icon:图标,任何图片格式都可以

2,事件

【1】Loaded:加载

【2】Closing

【3】MouseDoubleClick

四,控件

WPF允许控件没有Name属性

1,Label 文本标签 ContentControl

2,TextBox 文本框 编辑与显示 特殊内容控件

3,PasswordBox 密码框 PasswordChar

【1】获取密码:string pwd = txt_UserPwd.Password.Trim();

4,Button 按钮 ContentControl【内容控件】

【1】Content:文本

【2】Background:背景颜色

【3】BorderBrush:边框颜色

【4】BorderThickness:边框的宽度

【5】Foreground:前景色,文本颜色

【6】IsDefault:键盘Enter激活

【7】IsCancel:键盘Esc激活

5,RadioButton 单选按钮 【内容控件】

同一组单选按钮,它们是互斥关系

GroupName:设置一个组名,不用组名的单选按钮,它们不具有互斥的关系

IsChecked:是否选中

Checked:选中时候的事件

6,CheckBox 复选框【内容控件】

允许选中多个

Content

Name:

IsChecked:是否选中(true,false,null)  。如果需要设置3种状态,要设置IsThreeState

 6.1:获取窗口中所有勾选的CheckBox的Content内容

        private void Btn_Get_Chk_Click(object sender, RoutedEventArgs e)
        {
            //获取窗口中所有勾选的CheckBox的Content内容
            string strContent = "";
            foreach (UIElement ele in grid1.Children)
            {
                if (ele is CheckBox)
                {
                    CheckBox chk=ele  as CheckBox;
                    if (chk.IsChecked == true)
                    {
                        if (strContent != "")
                        {
                            strContent += ",";                           
                        }
                        strContent += chk.Content.ToString();
                    }
                }
            }
            MessageBox.Show(strContent);
        }

  

6.2:代码动态添加checkbox

        //代码动态添加checkbox
        private void Btn_Add_Chek_Click(object sender, RoutedEventArgs e)
        {
            string[] names = {"体育2", "唱歌2", "跳舞2"};
            for (int i = 0; i < names.Length; i++)
            {
                CheckBox chk = new CheckBox();
                chk.Content = names[i];
                chk.HorizontalAlignment = HorizontalAlignment.Left;//水平对齐
                chk.VerticalAlignment = VerticalAlignment.Top;
                chk.Margin=new Thickness(btn_Add_Chek.Margin.Left+i*80,btn_Add_Chek.Margin.Top+40,0,0);
                grid1.Children.Add(chk);
            }
        }

 

WPF零基础学习-常用控件1

 

 

 

7,Image控件:显示图片【特殊内容控件】

属性:

Stretch:填充

  None=0(实际大小)。

  Fill=1(填充目标尺寸,不保留纵横比)。

  Uniform=2(保留纵横比,适合目标尺寸,可能图片显示不全),默认是这个。

  UniformToFill=3(保留纵横比,填充目标尺寸,对图片进行裁剪)

StretchDirection:填充

  UpOnly=0(内容小于父级时扩展,如果内容较大,不执行缩放)

  DownOnly=1(内容大于父级缩放,如果内容较小,不扩展)

  Both=2(拉伸以适应父级),默认是这个。

Source:图片来源

 

        //代码导入图片
        private void Btn_AddIamge_Click(object sender, RoutedEventArgs e)
        {
            //【1】相对路径的图片导入
            //imgPic.Source = new BitmapImage(new Uri("/imgs/boy.png", UriKind.Relative));//参数2:指明相对路径

            //WPF:支持两种授权:  applicaiton:/// 和 siteoforigin://
            //applicaiton
            //siteoforigin:图片文件-属性-生成操作-内容
            //pcak URI 方案 pack://授权//路径
            //【2】绝对路径的图片导入
            //imgPic.Source = new BitmapImage(new Uri("pack://application:,,,/imgs/boy.png", UriKind.Absolute));//参数2:指明绝对路径

            //【3】bin目录下的文件的图片导入,要设置下面2项
            //图片文件-属性-生成操作-内容
            //图片文件-属性-复制到输出目录-始终内容
            imgPic.Source = new BitmapImage(new Uri(AppDomain.CurrentDomain.BaseDirectory + "/imgs/boy.png", UriKind.Absolute));//参数2:指明绝对路径

            //【4】完整路径图片的导入
            //imgPic.Source = new BitmapImage(new Uri("E://VS workspace//image//设计用图片//背景图02.png", UriKind.Absolute));//参数2:指明绝对路径
        }

  

事件:

  

7,Border控件:显示边框【不是布局面板,只能有一个元素作为它的子元素】

  【作用:围绕在其他元素周围 ,设置背景,布局面板一起使用】

  【要显示多个元素怎么办:布局面板作为它的一个子元素,布局面板可以存放多个子元素】

属性: 

BorderBrush:边框颜色

BorderThickness:边框线条粗细

CornerRadius:圆角

Background:背景

Padding:Border与嵌套里面元素的距离

8,ComboBox:下拉框【条目控件:ItemsControl】

属性:

IsEditable:是否可编辑

IsDropDownOpen:下拉框是否展开

绑定数据方式

1,ItemSource

2,Items.Add

3,DataContext=List  需要添加:ItemsSource="{Binding}"

        private void Btn_Add_cmbItems_Click(object sender, RoutedEventArgs e)
        {
            
            cmb_Change.Items.Clear();//先清除

            cmb_Change.SelectedValuePath = "ClassId";//指定项的值对应的属性名
            cmb_Change.DisplayMemberPath = "ClassName";//项的显示文本对应的属性名

            //【数据绑定方法1】
            //cmb_Change.ItemsSource = GetClassInfo();//指定数据源【注意:绑定了数据源,不能直接移除,也不能添加】

            //注意:绑定了数据源,不能直接移除,也不能添加
            //如果想动态添加移除,就用add方式,一项一项的添加
            //【数据绑定方法2】
            //foreach (ClassInfo item in GetClassInfo())
            //{
            //    cmb_Change.Items.Add(item);
            //}
            ////移除
            //cmb_Change.Items.RemoveAt(0);

            //【数据绑定方法3】
            cmb_Change.DataContext = GetClassInfo();
        }

        //模拟从数据库获取的数据
        private List<ClassInfo> GetClassInfo()
        {
            List<ClassInfo> list = new List<ClassInfo>();
            list.AddRange(new ClassInfo[]
            {
                new ClassInfo()
                {
                    ClassId = 0,
                    ClassName = "计算机一班"
                },
                new ClassInfo()
                {
                    ClassId = 1,
                    ClassName = "计算机二班"
                },
                new ClassInfo()
                {
                    ClassId = 3,
                    ClassName = "计算机三班"
                },
            });
            return list;
        }

 

事件:

 选择项改变事件:SelectionChanged

 

9,ListBox:列表框【条目控件:ItemsControl】

手动添加项:

绑定数据源:

        private void Btn_ListBox_Click(object sender, RoutedEventArgs e)
        {
            lst_class.Items.Clear();//先清除手动添加的

            //【1】绑定数据源的方式1
            //lst_class.ItemsSource = GetClassInfo();
            //lst_class.DisplayMemberPath = "ClassName";
            //lst_class.SelectedValuePath = "ClassId";
            //lst_class.SelectedIndex = 0;

            //如果要冬天添加,移除项,跟ComboBox一样的,不能添加移除
            //lst_class.Items.Add(11);
            //lst_class.Items.Add("string");
            //lst_class.Items.Add(11.22);

            //【2】绑定数据源的方式2
            lst_class.DataContext = GetClassInfo();
            lst_class.DisplayMemberPath = "ClassName";
            lst_class.SelectedValuePath = "ClassId";
            lst_class.SelectedIndex = 0;
        }

  

属性:

  SelectionMode:选一个或多个

事件:

        //ListBox选择项发生改变的时候
        private void Lst_class_SelectionChanged(object sender, SelectionChangedEventArgs e)
        {
            //选择项类型  由绑定或添加数据的类型决定的
            MessageBox.Show(lst_class.SelectedItem.ToString());//字符串,int
            //如果类型是实体类
            ClassInfo selItem=lst_class.SelectedItem as ClassInfo;
            MessageBox.Show(selItem.ClassName);
        }

  

10,DatePicker:日期控件

属性:

  DisplayDate:默认显示的日期,并不会显示到文本框

  DisplayDateStart:选择范围的开始日期

  DisplayDateEnd:选择范围的结束日期

  Style:样式

  SelectedDateFormat:选择的日期的格式 long:2021年2月21日  short:2021/2/21

  FirstDayOfWeek:设置每周的第一天

  IsTodayHighlighted:高亮显示,默认True

  SelectedDate:文本框显示的日期

自定义格式:

  SelectedDate:代码修改的方式-行不通

  自定义Style,改变template模板来实现自定义

  

事件:

11,Calendar:日期控件

可视化的日历控件 

属性:

   DisplayMode:显示模式按年显示还是按月显示 

  DisplayDateStart:选择范围的开始日期

  DisplayDateEnd:选择范围的结束日期

  SelectionMode:选择的范围模式

  

12,Slider:滑块控件:移动来选择一个范围的值

常用用途:改变其他属性的值

属性:

Maximum="100":最大值

Minimum="0":最下值

Value="50":当前的值

Orientation="Horizontal":方向水平还是垂直

TickPlacement="Both" :刻度的位置。Both两边都有刻度

TickFrequency="5":刻度的间隔

 IsSnapToTickEnabled:True->Value值是Int。False->Value值是浮点型

 SelectionStart="20"

SelectionEnd="50"

IsSelectionRangeEnabled="True":选择的范围高亮显示

IsDirectionReversed="True":增加值的方向

 

13,ProgressBar:进度条:显示操作过程

14,StackPanel:布局控件:子元素排列成一排或一列

经常嵌套在其他布局控件里,与其他布局控件结合使用

子元素超出的部分,会被隐藏

Orientation="Vertical":垂直对齐,HorizontalAlignment="Center" 、Left 、Right、Stretch

Orientation="Horizontal":水平对齐,HorizontalAlignment="Center" 、Top、Bottom、Stretch

15,WrapPanel:布局控件:子元素按顺序排列

弥补了StackPanel的不足

如果按水平方向:从左到右,超出部分,自动换行

如果按垂直方向:从上到下,超出部分,自动换列

调整面板的尺寸,内部的元素的布局--自动调整

属性:

Orientation="Horizontal":方向

ItemHeight="30":子元素高度

ItemWidth="60":子元素宽度

 

【1】设计代码:

    <Grid>
        <Border BorderBrush="Red" BorderThickness="3" CornerRadius="5"  Margin="20"  >
            <WrapPanel Name="wp_Panel" Orientation="Horizontal" ItemHeight="30" ItemWidth="60">

            </WrapPanel>
        </Border>
    </Grid>

  

【2】窗体代码:

        private void MainWindow_OnLoaded(object sender, RoutedEventArgs e)
        {
            for (int i = 0; i < 100; i++)
            {
                Button btn=new Button();
                btn.Content = "btn" + i.ToString("00") + "号";
                btn.Background=new SolidColorBrush(Colors.Gray);
                btn.Name = "btn" + i;
                btn.Margin=new Thickness(10,5,0,0);
                wp_Panel.Children.Add(btn);//添加到面板中

            }
        }

  

【3】效果

WPF零基础学习-常用控件1

 

16,DockPanel:停靠面板(自适应效果)

WPF零基础学习-常用控件1

 

 

 停靠面板:顶部,左边,右边,下边,中间

Winfrom Dock:Top Left Right Botton

特点:先添加的子元素,优先占用边角(优先占有权),所有子元素区域不会重叠

与其他布局控件结合使用

<!--LastChildFill 默认为true 最后的元素完全填充剩余的部分-->
<!--如果在一侧,依靠了多个元素,它们按顺序依次排列-->

17,Canvas:画布面板

WPF零基础学习-常用控件1

 

 

    <Grid >
        <Canvas ClipToBounds="False">
            <Button Content="first" Width="30" Height="20" Canvas.Left="20" Canvas.Top="30" Canvas.Right="30"></Button>
            <Button Content="second" Width="50" Height="20" Canvas.Left="20" Canvas.Bottom="30"></Button>
            <Button Content="third" Width="50" Height="20" Canvas.Right="20" Canvas.Top="30"></Button>
            <Button Content="four" Width="50" Height="20" Canvas.Right="20" Canvas.Bottom="30"></Button>
            <Button Content="center" Width="50" Height="20" Canvas.Left="124" Canvas.Bottom="150" Canvas.Top="243"></Button>
            <Button Content="center2" Width="50" Height="20" Canvas.Left="150" Canvas.Bottom="-10"></Button>
            <!--重叠效果 优先显示 后添加的元素显示在上面。如果要改变优先级:Panel.ZIndex="1"-->
            <!--优先显示顺序,Panel.ZIndex的值越大,就显示在最上面。如果Panel.ZIndex相同,后添加的显示在上面-->
            <Button Content="按钮1" Width="50" Height="20" Canvas.Left="150" Canvas.Top="100" Panel.ZIndex="2"></Button>
            <Button Content="按钮2" Width="50" Height="20" Canvas.Left="160" Canvas.Top="110" Panel.ZIndex="1"></Button>
        </Canvas>
    </Grid>

  

画布面板(坐标面板):定义区域,子元素的显示位置,指定相对于面板的坐标,来定位子元素显示的位置

附加属性:Canvas.Left Canvas.Right Canva.Top Canvs.Bottom

坐标(left,top)(left,bottom)(rigth,top)(rigth,bottom)

不能为子元素指定两个以上的附加属性,如果指定了,忽略后者。

  例如:Canvas.Left="20" Canvas.Top="30" Canvas.Right="30" 会把Canvas.Right="30"忽略。

当窗口大小变化,Canvas的尺寸就随之变动,子元素的位置也随之变化,子元素的坐标相对Canvas的位置没有变

 ClipToBounds:默认false  如果有溢出,就显示外边。如果为true ,如果有溢出,就裁剪了。

<!--重叠效果 优先显示 后添加的元素显示在上面。如果要改变优先级:Panel.ZIndex="1"-->
<!--优先显示顺序,Panel.ZIndex的值越大,就显示在最上面。如果Panel.ZIndex相同,后添加的显示在上面-->

 应用:图画,精确定位,最简单的布局。

 

 

18,Grid 网格面板(最复杂,强大,灵活的一个控件,布局整个页面布局)

类似于Winform中的TableLayoutPanel ,行和列的方式布局页面或页面中某一块区域

单元格:可以放一个元素或多个元素,一个单元格其实也是一个容器:可以放多个控件 StarkPanel/WrapPanel/Grid等

可以使边框可见,方便布局可视。

网格结构:定义行和列

指定元位置:

行:Row

列:Column

 

跨列:Grid.ColumnSpan="2"代表跨2列

跨行:

 WPF零基础学习-常用控件1

 

 

<Window x:Class="_005_Grid_网格面板.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:_005_Grid_网格面板"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Grid ShowGridLines="True" Background="LightBlue">
        <!--定义的Grid的行和列-->
        <!--没有设置Height和Width 就平均分配-->
        <Grid.RowDefinitions>
            <!--尺寸的三种方式:1,固定尺寸-->
            <RowDefinition Height="30"></RowDefinition>
            <!--尺寸的三种方式:2,按比例-->
            <RowDefinition Height="*"></RowDefinition>
            <!--2* 是 * 的2倍-->
            <RowDefinition Height="2*"></RowDefinition>
            <!--尺寸的三种方式:3,自动调整,按内容-->
            <RowDefinition Height="Auto"></RowDefinition>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"></ColumnDefinition>
            <ColumnDefinition Width="1.5*"></ColumnDefinition>
            <ColumnDefinition Width="3*"></ColumnDefinition>
        </Grid.ColumnDefinitions>
        <!--元素位置的指定,指定该元素所在的行索引和列索引,索引从0开始,如果没有指定
        ,默认就是第一个,跨行或跨列 RowSpan ColSpan-->
        <!--在第1行第2列放一个TextBox控件-->
        <TextBox Grid.Column="1" TextAlignment="Center" Background="Red">第1行第2列</TextBox>
        <!--第2行第2列,跨2列。 Grid.ColumnSpan="2"代表跨2列-->
        <TextBlock Grid.Row="1" Grid.Column="1" Grid.ColumnSpan="2" Background="LightGray">第2号第2列</TextBlock>
        <!--第3行第2列放多个控件-->
        <WrapPanel Grid.Column="1" Grid.Row="2" ItemHeight="30" ItemWidth="40">
            <Button Content="btn1" ></Button>
            <Button Content="btn1" ></Button>
            <Button Content="btn1" ></Button>
            <Button Content="btn1" ></Button>
        </WrapPanel>
        <!--网格控件嵌套网格控件-->
        <Grid Grid.Column="2" Grid.Row="2" Background="Olive">
            <Grid.RowDefinitions>
                <RowDefinition ></RowDefinition>
                <RowDefinition ></RowDefinition>
                <RowDefinition ></RowDefinition>
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition ></ColumnDefinition>
                <ColumnDefinition ></ColumnDefinition>
            </Grid.ColumnDefinitions>
            <Button Content="btn11"></Button>
            <Button Content="btn12" Grid.Column="1"></Button>
            <!--合并单元格的效果 ,第二行的第1列和第2列合并-->
            <StackPanel Grid.Column="0" Grid.Row="1" Grid.ColumnSpan="2" Background="LavenderBlush" Orientation="Horizontal">
                <Label Content="lbl1"></Label>
                <Label Content="lbl2"></Label>
                <Label Content="lbl3"></Label>
                <Label Content="合并单元格
                       "></Label>
            </StackPanel>
        </Grid>
    </Grid>
</Window>

  

19,GroupBox

Winform Groupbox:分组容器控件

Wpf GroupBox:分组,带标题   HeaderedContentControl 带标题的内容控件

只能有一个子元素作为它的内容 Content Header

结合布局控件(容器)就可以放多个控件了

 WPF零基础学习-常用控件1

 

 代码:

<Window x:Class="_006_GroupBox_带标题的内容控件.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:_006_GroupBox_带标题的内容控件"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800" Loaded="MainWindow_OnLoaded">
    <Grid>
        <!--分组控件 内容控件-->
        <GroupBox Header="导航菜单" Width="200" Height="100" BorderThickness="2" BorderBrush="Red" Margin="33,27,0,0" HorizontalAlignment="Left" VerticalAlignment="Top"  >
            <Label Content="这是一个GroupBox控件"></Label>
        </GroupBox>
        <!--分组控件 内容控件 放多个控件的办法-->
        <GroupBox Header="导航菜单2" Width="200" Height="100" BorderThickness="2" BorderBrush="Red" Margin="33,172,0,0" HorizontalAlignment="Left" VerticalAlignment="Top"  >
            <StackPanel>
                <Label Content="这是一个GroupBox控件"></Label>
                <Label Content="这是一个GroupBox控件"></Label>
                <Label Content="这是一个GroupBox控件"></Label>
            </StackPanel>
        </GroupBox>
        <!--分组控件 内容控件 放多个控件的办法-->
        <GroupBox Header="导航菜单3" Width="200" Height="100" BorderThickness="2" BorderBrush="Red" Margin="33,300,0,0" HorizontalAlignment="Left" VerticalAlignment="Top" 
                  Name="gb_Info">
            <StackPanel Orientation="Vertical" Name="sp_First">
                <StackPanel Orientation="Horizontal" Name="sp_userName">
                    <Label Content="用户名:" Width="80"></Label>
                    <TextBox Name="txt_userName" Text="userNmae"></TextBox>
                </StackPanel>
                <StackPanel Orientation="Horizontal">
                    <Label Content="密码:" Width="80"></Label>
                    <TextBox Text="123456"></TextBox>
                </StackPanel>
            </StackPanel>
        </GroupBox>
    </Grid>
</Window>

  

20,Expander(可折叠控件)

 带标题   HeaderedContentControl 带标题的内容控件

 折叠展开的特点:IsExpander

展开方向:ExpandDirection="Down"  Up/Left/Right

是否隐藏:IsExpanded="False" 默认False

事件:Expanded Collapsed

WPF零基础学习-常用控件1

 

代码:

 

    <Grid>
        <Expander Header="用户权限" HorizontalAlignment="Left" Height="169" Margin="85,73,0,0" VerticalAlignment="Top" Width="auto"
                  Padding="2" ExpandDirection="Down" IsExpanded="False" BorderThickness="2" BorderBrush="Red">
           <StackPanel>
               <CheckBox Content="管理员"></CheckBox>
               <CheckBox Content="系统管理员"></CheckBox>
               <CheckBox Content="业务"></CheckBox>
           </StackPanel>
        </Expander>

    </Grid>

  

 

 

 

HorizontalAlignment:水平对齐

VerticalAlignment:垂直对齐

HorizontalContentAlignment:文本水平对齐方式

VerticalContentAlignment:文本垂直对齐方式

FlowDirection="RightToLeft":子元素的流动方向

 

上一篇:Python编程基础 第五章 编程练习 编程题:幻方的判断。


下一篇:[Python] 几个概念