2020-12-16-----不定期WPF期末考试总复习知识点总结

WPF是什么?

他是微软推出的图形展示系统,他时用户界面标志升级的标志。

xmlns非地址,而是XML的一个命名空间,
XML是指标准通用置标语言,他是定义文档结构和内容的标准的国际语言。

WPF程序的启动窗口并非MAinwindow,而是APP.xaml中的APP类。
startupUri="mainwindow.xaml"这使得窗口第一个展现Mainwindow
在这里插入图片描述
在这里插入图片描述

**

特性

**

布局

stakpanel竖着排,按照空间出现的顺序,从上到下的排列控件,进行布局
在这里插入图片描述
wrappanel控件横着拍,按控件出现的顺序从左往右进行布局

数据集成和数据处理能力

  1. 数据绑定
    第一、绑定类型决定控件显示防式
    控件=数据内容+控件显示。
    绑定类型决定了控件的显示方式。
    所有控件都有style(样式)、templates(模板)、resource dictionary(资源字典)
    第二、如按钮,其内容类型是System.Object ,能够获取所有类型的数据(包括图片),并将其显示出来。WPF许多控件的控件核心就是Content Model
    第三、数据绑定来绑定contentmodel
    </content mode/>
    其实就是内容模板,主要有三个:指派生于System.Windows.Controls.Control类的各种控件
    1.contentcontrol
    其内容的数据类型是Object,能够存储各类信息,没有任何限制,但只能有一个content,若是多个,需要用panel容器。有如下集中空间的内容是content control:button ,checkbox,comoboxitem,ContentControl、Frame、GridViewColumnHeader、GroupItem、Label、ListBoxItem、ListViewItem、NavigationWindow、RadioButton、RepeatButton、ScrollViewer、StatusBarItem、ToggleButton、ToolTip、UserControl、Window
    2.headercontentcontrol控件
    继承自content control类,是带有header的content control。header的类型也是object类型
    在这里插入图片描述
    groupbox的使用
    3.itemscontrol模型
    包含了一个对象集合,包含的数据类型是items source和items control。
    1.items source
    2.items
    随 WPF 附带的每个 ItemsControl 具有一个对应的类,该类代表 ItemsControl 中的一个项。下表列出了随 WPF 附带的 ItemsControl 对象及其相应的项容器。
    ItemsControl项容器
    ComboBox ComboBoxItem
    ContextMenu MenuItem
    ListBox ListBoxItem
    ListView ListViewItem
    Menu MenuItem
    StatusBar StatusBarItem
    TabControl TabItem
    TreeView TreeViewItem
    4.headereditemscontrol
    继承自items control,有header属性。因为 HeaderedContentControl. WPF 的 Header 属性附带三个从 HeaderedItemsControl 继承的控件:MenuItem、ToolBar、TreeViewItem HeaderedItemsControl模型可以理解为如下结构:一个HeaderedItemsControl包含一个Items集合,每一个Item包含一个Header属性,一个子Items集合,以TreeView和TreeViewItem为例:

  2. 控件间绑定
    在这里插入图片描述
    WPF体系结构
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

第二章 XAML

是微软创造的一种新的描述性语言语言,全名为可扩展应用程序标记语言,用于搭建应用程序用户界面,实现了用户界面与业务逻辑完全分离。
在一个xaml中,仅能包含一个顶级元素.顶级元素:
①Window元素(窗口
包含一个类名,两个xmlns命名空间(可自增),三个属性(title、height、width)
②Page元素(该元素和Window元素类似,但是它用于可导航的应用程序)
③Application元素(该元素定义应用程序资源和启动设置)
虽然看起来是平面结构,但在XAML中是树状结构
在这里插入图片描述
基础语法
一、标签
标签以<>开始,以</>结束,一个标签意味一个对象。
1.非自闭合,成对出现
2.自闭合
二、属性
以键值对形式出现,attribute=Value,如height=“525”
三、内容
标签对之间的就成为内容(content)

简单属性
xaml使用标签定义UI元素,每个标签对应.NET FRAMEWOk 类库的一个控件类,通过设置标签的属性attribute来实现对控件对象属性property赋值
1.字符串简单赋值在这里插入图片描述
复杂属性
属性元素复杂赋值
如长方形fill属性
fill类型是brush类型,他是一个抽象类,要用抽象类的子类进行赋值
附加属性
复杂属性如Grid.column=1它一般位于标签内部,来设置标签的,并非标签所有控件的属性,因此,附加属性用在控件布局里面。

特殊字符的处理
如<>。
在这里插入图片描述
在这里插入图片描述
https://www.cnblogs.com/Laggage/p/10425423.html 借鉴此处
命名空间
XAML如同.Net其他语言一样,也是通过命名空间有效组织其中控件,但他们的 命名空间并非一对一的关系,而是一对多的关系。
其命名空间的语法如下:
xmlns[:可选的映射前缀]=“命名空间”
xmlns后面跟一个可选的映射前缀,之间用:隔开,如果没写这个命名空间前缀,则意味着所有来自这个命名空间的所有标签都不需要加前缀。Name来自于X,所以x:Name=。
没有加命名空间前缀的可以叫做默认的命名空间
默认命名空间只能有一个,而且应该选择使用最频繁的座位默认命名空间。
命名空间看似是一个网址,但其实并不是,因为它遵循了其解析器标准的命名规则,是声明程序集和.Net命名空间的引用。
.Net指的是后台的CS代码,其中在这里插入图片描述
和CS中system.windows一样
在这里插入图片描述
一个XAML的完整界面必须同时具备以上两个命名空间,否则无法正常实例化。
名称空间的标记扩展:放在{}中,使用类似对象标签的方式来精确解析。
XAML内置特性
1.x:Class
告诉XAML编译器将XAML编译器编译的结果和后台编译的结果哪一个类进行合并,其必须是根节点,所指类型必须是partical
在这里插入图片描述
在这里插入图片描述
2.x:ClassModiffier定义类型的模式Public、Internal
用于告诉XAML编译器其标签的访问级别
3.x:Name
在这里插入图片描述
在这里插入图片描述
4.x:Key
资源检索
注意:在XAML中使用string类,需要引用一个命名空间。
在这里插入图片描述
之后再引用过程中需要用sys来引导
在这里插入图片描述
后台也可以使用
this.findresource(“my string”) as string;
5.x:Type提供CLR类
是数据类型的名称。要是需要在XAML中表达一个数据类型就需要x:Type来扩展标记。
6.x:null–设置空值
大部分情况下我们其实并不需要对一个属性设置空值,如果一个属性具有默认值而又不需要默认值就需要用到null值了,我们可以将任意一个stlye设置为空值。
在这里插入图片描述
在这里插入图片描述
如上示。
首先要为这个资源设立内容,它是针对于button这个类型,作为一个数据类型,需要x:Key来表示。
setter设置属性,其宽高以及margin都是针对于button的。
在设置button时,都会用到x:key除了最后一个设置了style={x:null}
7.x:Array—设置CLR数组
其在XAML代码中可以设置数组,如下所示为listboxitem赋值
在这里插入图片描述
8.x:Static
静态字段和属性值
在这里插入图片描述
在这里插入图片描述
在实际开发中,如果这个开发的项目是趋向于国际化的,一般把需要显示的字放在资源字典的Static属性,所以xLStatic的使用相当频繁。
9.x:Code–XAML的内嵌代码
不太常用,它的作用是在Xaml文档中设置C#后台代码,这样的好处是不用把CS代码和XAML代码分两个文档放,但这样不宜维护,不易调试,一般不用。
10.x:XData指令元素,提供数据源

第三章 布局

WPF布局是通过Panel面板对页面元素的规划和安排。即将一些控件放在合适的位置。
布局控件=自定义的布局元素+内置布局控件。
一、布局原则
流式布局:所有元素终使默认自动的向左上角靠近。其每个元素的位置的设定依赖于相邻元素的位置和尺寸。
合成布局:允许布局间嵌套
1.根据内容调整尺寸
2.两段布局

二、布局面板
1.属性
WPF布局面板由System.Windows.Controls.Panel抽象类派生
具有三个公共属性:1.background 2.Children 3.isitemhost (指该布局内是否有内容模型为itemscontrol类型的)。子元素对自身的对其方式(如宽高垂直水平,四周间隙有一定的决定作用)
在这里插入图片描述
2.类型
在这里插入图片描述
(1)、Canvas(画布)
在这里插入图片描述
Canvas.Left的含义是指距离左边的边的距离。right,top,bottom同理
在这里插入图片描述
在这里插入图片描述
根据声明的顺序不一样,后声明的会将先声明的覆盖掉。即为 Canvas设置重叠深度

(2).DockPanel(停靠面板)
让子元素停靠在整个面板的某一条边上,当某个子元素停靠在相同的边上时,会根据声明的先后顺序依次停靠,系统会默认最后一个声明的元素来填满整个空间。
如图所示
在这里插入图片描述
确定元素顶的是哪个边
在这里插入图片描述
调整声明顺序后,布局会变得不一样
在这里插入图片描述
3.StackPanel(堆式面板)
可通过设置属性oriebtation来设置子控件时水平还是垂直堆放。
在这里插入图片描述
因此我们能够看出orientation的默认值是vertical。
在这里插入图片描述
外加一个border限制住了大小,当窗口扩展时,其大小也不会变。
4.WrapPanel(自动折行面板)
允许很多控件存在,按声明顺序,并从左往右放,当摆满一行后就可以自动折行。可以通过设置itemwidth和itemheight属性来约束子元素的宽度和高度。
在这里插入图片描述
5.uniformGrid(简化网格布局)
unifromgrid将界面划分成几个单元格。每个单元格具有相同的大小,在使用时,需要设置行和列的数目。
在这里插入图片描述
在这里插入图片描述
在使用此控件时,若只设置列值,则行值等于子元素数目除以列值
1.设置单元格数目大于子元素数目,剩下的单元格为空
2.当代码中给出的单元格小于子元素的数目,uniformgrid把剩下的放在外面
通过声明顺序来确定输出顺序。
<Grid>
(1)、能够通过使用Grid.rowdefinitions和Grid.Columns属性定义单元格行数,能够构建大小不一的单元格,具有跨院单元格和空白列的功能。
Grid.row和Grid.column可以改变button的输出顺序。
Grid引用百分比尺寸,即转为星花的单位。星花允许行和列的高度能设置成星花单位。允许行和列在按照内容尺寸或绝对尺寸分配空间后,占用网格控件的一个百分比值。

在这里插入图片描述
(2)、共享尺寸组
在Grid布局的情况下,位于同一列的一组控件可以设置相同的大小,尺寸大小由最宽的决定,位于同一行的一组控件可以设置相同的大小,尺寸大小由最高的决定。
方法:在某一列或行设置SharedSizeGroup属性(随便起名),在空间上设置IsSharedSizeSCope=“True”.ShowGridLines="Ture"是划分界线。

在这里插入图片描述
(3)、跨越行和列
grid.columnspan=""
Grid.ColumnSpan=""
使得元素跨越多个单元格
(4)、GridSplitter
是指网格分割线,它支持用户在运行时编辑行和列,能够在拖动分割线时,改变行高和列宽,
使用GridSplitter时,必须要在Grid布局的条件下使用,否则无法拖动。
其中有一个属性是ShowsPreview,默认是false,作用在于使得用户拖动分割线时,立即改变Grid结构,而要是True则会在鼠标释放后在会被应用大小。
在这里插入图片描述
HorizontalAlignment="stretch"定义垂直分割线水平拉伸

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

  <Grid>
        <Grid.RowDefinitions>
            <RowDefinition/>
            <RowDefinition/>
        </Grid.RowDefinitions>
        <Grid Grid.Row="0">
            <Grid.ColumnDefinitions>
                <ColumnDefinition/>
                <ColumnDefinition/>
            </Grid.ColumnDefinitions>
            <Rectangle Fill="Thistle" ></Rectangle>
            <GridSplitter Width="10"  VerticalAlignment="Stretch" Grid.RowSpan="2"  HorizontalAlignment="Right" />

            <Rectangle Fill="Yellow"  Grid.Row="0" Grid.Column ="1" ></Rectangle>
        </Grid>
        <GridSplitter Height="10"  HorizontalAlignment="Stretch"  VerticalAlignment="Bottom" />

        <Grid Grid.Row="1">
            <Grid.ColumnDefinitions>
                <ColumnDefinition/>
                <ColumnDefinition/>
            </Grid.ColumnDefinitions>
            <Rectangle Fill="Yellow"   Grid.Row="1" Grid.Column ="0" ></Rectangle>
            <GridSplitter Width="10"  VerticalAlignment="Stretch" Grid.RowSpan="2"  HorizontalAlignment="Right" />
            <Rectangle Fill="Thistle" Grid.Row="1" Grid.Column ="1" ></Rectangle>
        </Grid>



    </Grid>
</Window>


本章案例整理
一、Windows窗口界面
在这里插入图片描述
在这里插入图片描述

  <DockPanel>
        <Button DockPanel.Dock="Top">菜单栏区</Button>
        <Button DockPanel.Dock="Top">工具条区域</Button>
        <Button DockPanel.Dock="Bottom">状态栏区域</Button>
        <Button DockPanel.Dock="Left">文件夹区域</Button>
        <Button DockPanel.Dock="Right" >详细信息列表区域</Button>
    </DockPanel>


</Window>

二、用户搜索界面
在这里插入图片描述

   <StackPanel Background="AliceBlue">
        <TextBlock Margin="4">Look for:</TextBlock>
        <ComboBox Margin="4"></ComboBox>
        <TextBlock Margin="4">Filtered by:</TextBlock>
        <ComboBox Margin="4"></ComboBox>
        <Button Margin="4,5">Search</Button>
        <CheckBox Margin="4">Search in titles only</CheckBox>
        <CheckBox Margin="4">Search in Keyword</CheckBox>
    </StackPanel>

三、计算机

    <Grid   Background="Green" >
        <Grid.RowDefinitions>
            <RowDefinition></RowDefinition>
            <RowDefinition></RowDefinition>
            <RowDefinition></RowDefinition>
            <RowDefinition></RowDefinition>
            <RowDefinition></RowDefinition>
            <RowDefinition></RowDefinition>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition  ></ColumnDefinition>
            <ColumnDefinition ></ColumnDefinition>
            <ColumnDefinition  ></ColumnDefinition>
            <ColumnDefinition ></ColumnDefinition>
        </Grid.ColumnDefinitions>
        <TextBox Grid.Row="0" Grid.ColumnSpan="4" Margin="2,4,2,2"/>
        <Button  Grid.Row="1" Grid.Column="0"  Margin="2">1</Button>
        <Button  Grid.Row="1" Grid.Column="1"  Margin="2"  >2</Button>
        <Button  Grid.Row="1" Grid.Column="2"  Margin="2">3</Button>
        <Button  Grid.Row="1" Grid.Column="3"  Margin="2">+</Button>
        <Button  Grid.Row="2" Grid.Column="0"  Margin="2" >4</Button>
        <Button  Grid.Row="2" Grid.Column="1"  Margin="2">5</Button>
        <Button   Grid.Row="2" Grid.Column="2"  Margin="2">6</Button>
        <Button   Grid.Row="2" Grid.Column="3"  Margin="2" >-</Button>
        <Button   Grid.Row="3" Grid.Column="0"  Margin="2">7</Button>
        <Button   Grid.Row="3" Grid.Column="1"  Margin="2">8</Button>
        <Button   Grid.Row="3" Grid.Column="2"  Margin="2" >9</Button>
        <Button   Grid.Row="3" Grid.Column="3" Margin="2">*</Button>
        <Button   Grid.Row="4" Grid.ColumnSpan="2" Margin="2">0</Button>
        <Button   Grid.Row="4" Grid.Column="2" Margin="2" >.</Button>
        <Button   Grid.Row="4" Grid.Column="3" Margin="2">/</Button>
        <Button   Grid.Row="5" Grid.ColumnSpan="2" Margin="2">Del</Button>
        <Button   Grid.Row="5" Grid.Column="2" Grid.ColumnSpan="2"                   Margin="2">=</Button>
    </Grid>

在这里插入图片描述

第四章 控件

每个应用程序的UI都是由窗口及用户控件组成的。空间都继承自System.Windows.Control类的元素。他们有各自默认的外观,但是能够通过改变属性来根据用户需求做出相应的改变。
一、理念
显示数据相应用户操作的UI元素称之为控件。能够展示数据,成为空间的数据内容,也能够响应用户操作之后执行方法或事件,即为空间的行为或算法内容。他是数据和行为的载体,无固定的形象。
二、类型
注意:父类和基类是一样的,派生类就是子类。
(1)、布局控件:可容纳多个控件或这嵌套其他的布局控件。他们拥有同样的父类Panel。
(2)、内容控件:只能容纳一个其他控件作为内容。父类为ContentControl
(3)、带标题的内容控件:内容控件可加标题(Header)。父类为HeaderContentControl
(4)、条目控件:内容为一个集合,一般情况下,这个集合的数据类型一致。基类是ItemsControl。
(5)、带标题的条目控件:即条目控件可加标题。基类是HeaderedItemsControl
(6)、特殊内容控件
有的控件的数据内容的数据类型是唯一的,如textbox容纳字符串,image容纳图片。

控件的内容可能是数据,也有可能是控件。当还是控件时形成了空间嵌套,呈现出可树形结构.如果不考虑控件的内部结构,我们成为逻辑树,如果连控件本身的树也考虑在内,(比逻辑树更繁多),我们称为可视元素树。
控件通过内容属性引导其他控件作为自己内容的对象。有的内容属性是Content,有的是Child,而某些集合有的是Items有的是Children。

族:符合某类类容模式的元素,每个元素用它最基本的基类来命名。
1.ContentControl族
其族特点:(1)、皆派生自ContentControl类。
(2)、他们都是控件
(3)、内容是content
(4)、内容单一
2.HeaderedContentControl
其族特点:(1)均派生自HeaderedContentControl类,而HeaderedContentControl是ContentControl的派生类
(2)、控件均带标题
(3)、内容属性为Content和Header
(4)、内容属性均允许一个元素作为器内容。
3.ItemControl族
其族特点:
(1)、派生自ItemControl类
(2)、都是控件,用于显示列表化的数据
(3)、内容属性为Items或者ItemsSource
(4)、每种ItemControl都对应着自己的条目容器(Item、Containner)
4.HeaderItemControl族
其族特点:
(1)、派生自HeaderItemControl类
(2)、都是控件,用于显示列表化的数据,支持显示一个标题
(3)、内容属性为Items或者ItemsSource和header
5、Decorator族
其族特点:(1)、Decorator类
(2)、起UI作用
(3)、内容属性为Child
(4)、内容单一
6.TextBox和TextBlock
显示文本,TextBlock框只能够显示不能够编辑 ,称为静态文本,需要一定的操作格式,内容属性是Lines,其为了显示一个简单的字符串,保留了一个Text作为内容属性;TextBox则允许用户编辑里面的内容,内容属性是Text。
7.Shape族元素
(1)、均派生自Shape类。
(2)、用于2D的图像绘制
(3)、无内容属性
(4)、使用Fill属性设置填充,使用Stroke设置边线。
8.Panel族
(1)、均派生自Panel
(2)、控制UI布局
(3)、内容属性为Children
(4)、内容可以是多个元素,Panel控制布局

三、菜单、工具栏和状态栏
菜单与工具栏都处于页面上方,两者实现的功能相同。不同之处在于显示位置和交互模型。菜单有层级关系,占用了界面少部分的屏幕;工具栏处于菜单下方,是菜单中的部分快捷方式或者命令。他们共同实现项目程序的功能,而状态栏位于主界面左下角,显示当前的状态信息。

(1)、菜单
菜单有两种,第一种是ContentMenu,第二种是Menu
1.ContentMenu
上下文菜单弹出式菜单,只有用户右击或者按下shift+F10就会触发。
2.Menu
层级关系的的MenuItem控件放入。
在这里插入图片描述
打开文件
后台
OpenFileDialog ofd = new OpenFileDialog();
ofd.Filter = “文本文件|.txt|图片|.jpg|所有文件|.”; //过滤器
if (ofd.ShowDialog() == true)
{
string file_name = ofd.FileName;//获取打开文件的路径
}

(2)、工具栏
位于菜单下方,具有宿主类型(ToolBarTray)和项类型(ToolBar)
在这里插入图片描述

 <DockPanel LastChildFill="False">
        <Menu DockPanel.Dock="Top">
            <MenuItem Header="_File">
                <MenuItem Header="_Open" Click="Open_Clicked"/>
                <MenuItem Header="_Exit" Click="Exit_Clicked"/>
            </MenuItem>
            <MenuItem Header="_Edit">
                <MenuItem Header="_Cut"/>
                <MenuItem Header="_Copy"/>
            </MenuItem>
        </Menu>
        <DockPanel LastChildFill="False">
            <Menu>……</Menu>
            <ToolBarTray DockPanel.Dock="top">
                <ToolBar>
                    <Button>Open</Button>
                    <Button>Cut</Button>
                    <Button>Copy</Button>
                    <Button>Pase</Button>
                    <Button>Exit</Button>
                </ToolBar>

                <ToolBar Header="Search">
                    <TextBox Width="120"/>
                    <Button Width="25">Go</Button>
                </ToolBar>
            </ToolBarTray>
        </DockPanel>



</DockPanel> 

</Window>

(3)、状态栏
窗体底部,显示空间文本状态,StatusBar也是容器控件。

在这里插入图片描述
在这里插入图片描述

Window窗体的ResizeMode属性
指的是窗体是否可调节大小
属性值:
(1)、CanMinimize指的是不可调节,但可以最小化;此时最大化不能用
在这里插入图片描述

(2)、NoResize:也不可调节,同时无最大最小化按钮
在这里插入图片描述
(3)、CanResize:默认常见不改的
(4)、CanResizeWithGrip:可根据网格调节
在这里插入图片描述

容器控件
可容纳子控件
(1)、Expander–可上下展开的容器
在这里插入图片描述
在这里插入图片描述

   <Grid>
        <Expander Header="Expander example">
            <Border Margin="6" Padding="6">
                <StackPanel>
                    <TextBox>I am first textbox</TextBox>
                    <TextBox>I am second textbox</TextBox>
                </StackPanel>
            </Border>
        </Expander>
    </Grid>

在默认情况下,是不展开的,默认了折叠状态,点击标题头,设置属性IsExpanded="True"展开即可。
(2)、GroupBox
GroupBox是对控件进行分组的可视化容器控件
在这里插入图片描述

 <GroupBox  Header="GroupBox example" Margin="15,100,15,15">
            <StackPanel>
                <RadioButton Content="Male" IsChecked="True"/>
                <RadioButton Content="Female"/>
            </StackPanel>
        </GroupBox>

(3)、TabControl容器控件:他是一个带标签的控件,具有header属性

 <TabControl >
            <TabItem Header="1">
                <StackPanel >
                    <GroupBox  Header="GroupBox example" Margin="15,100,15,15">
                        <StackPanel>
                            <RadioButton Content="Male" IsChecked="True"/>
                            <RadioButton Content="Female"/>
                        </StackPanel>
                    </GroupBox>
                </StackPanel>
            </TabItem>
            <TabItem Header="2"></TabItem>
        </TabControl>

在这里插入图片描述
4.4范围控件
继承自RangeBase,RangeBase又继承自Control。
(1)、Randbase公有属性
Maximun 上限的最大值
Minimum 下限的最小值
LargeChangeValue 属性值的最大变化
SmallChangeValue 属性值的最小变化
Value 控件当前值
注意:当Value值变化时,Slider、ScrollBar事件响应,但是ProgessBar控件在value变化时并不响应,他能响应Click(点击),Dragdrop(拖放完成),DragOver(拖放对象悬浮于拖放区域,在拖放区域内移动时多次触发),Mousemove,mouseup,mousedown这六事件。
(2)类型
1.Slider
属性:issnaptotickenabled 为true时指的是移动范围只能时整数
tickplacement指的是刻度的位置,both指上下都有,None指没有,bottom下方,top上方
tickfrequency指的是刻度大小间隔
我们时常会遇到要使滑动之后的值处于某个范围,故而得selectionStart=”最小值“,SelectionEnd=”最大值“
在这里插入图片描述

2.ScrollBar 滚动条
属性: Orientation设置时水平(H)滚动条还是竖直(V)
Maximum最大值
Minimum最小值
在这里插入图片描述

3.ProgressBar 进度条
当前任务的工作状态,不与用户交互,也无键盘鼠标响应时间,可以连接远程服务器、程序安装情况,下载数据等,给用户一个系统状态的反馈
在这里插入图片描述
这个绿色的是不断滚动的
属性:isindeterminate决定了是不是有绿色的那个滚动条
当然颜色也是可以改变的,如backgroud="yellow”,foreground=“white”
条是黄色的,滚动的是白色的

文本编辑控件
1.Password

 <StackPanel Margin="10">
                    <Label Content="Text:"/>
                    <TextBox />
                    <Label Content="Password:"/>
                    <PasswordBox />
                </StackPanel>

在这里插入图片描述
将密码显示为几个点
属性:passwordchar用什么字符来显示密码
<PasswordBox PasswordChar="x" MaxLength="10"/>

多于十个则不在显示

2.textbox
属性:accepts return 决定文本框多行,当用户按下回车键,换到下一行;
TextWrapping是文字到达右边界会自动换行
isreadonly防止用户编辑
可以制作一个SelectionChanged事件
在这里插入图片描述
selectionstart:获取光标位置。
selectionlength:获取选择长度
selectiontext:获取选中字符
字体属性:
在这里插入图片描述
6.列表控件
WPF有四个列表控件,1.ListBox 2.ComoBox 3.ListView 4.TreeView。列表通过Items和ItemsSource添加数据源。
1.items是逐条添加数据源
ListBox list =new ListBox();
list.Items.ADD(“one”);
2.ItemsSource是以集合形式添加
String[] Items = new string[] { “one”, “two” };
ListBox list1 = new ListBox();
list1.ItemsSource = Items;
在这里插入图片描述
在这里插入图片描述
ItemsControl具有一个名为ItemsPanel的属性,数据类型为ItemsPanelTemplate,是一种控件TemPlate,用于使程序员控制ItemsControl的条目容器
在这里插入图片描述代码:`

<ListBox.ItemsPanel >



</ListBox.ItemsPanel>
1
1
1

    </ListBox>
</Grid>`

由此可见,我们通过改变ItemsPanelTemplate改变布局模板
在这里插入图片描述

 <Grid >
        <ListBox>
            <ListBox.ItemsPanel>
                <ItemsPanelTemplate>
                    <UniformGrid Columns="4"/>
                </ItemsPanelTemplate>
            </ListBox.ItemsPanel>
            <ListBoxItem Content="Item1"/>
            <ListBoxItem Content="Item2"/>
            <ListBoxItem Content="Item3"/>
            <ListBoxItem Content="Item4"/>
            <ListBoxItem Content="Item5"/>
            <ListBoxItem Content="Item6"/>
            <ListBoxItem Content="Item7"/>
            <ListBoxItem Content="Item8"/>
            <ListBoxItem Content="Item9"/>
            <ListBoxItem Content="Item10"/>
            <ListBoxItem Content="Item11"/>
            <ListBoxItem Content="Item12"/>
        </ListBox>

    </Grid>

2.ComoBox
从用户看就是文本输入和下拉菜单组成的,用户可以预先确定选择一个选项,也可以直接在文本框中输入文本
在这里插入图片描述

 <Grid >
        <ComboBox Height="20">
            <ComboBoxItem >qq</ComboBoxItem>
            <ComboBoxItem IsSelected="True" >dd</ComboBoxItem>
            <ComboBoxItem Content="ComboBox Item3"/>
            <ComboBoxItem Content="ComboBox Item4"/>
            <ComboBoxItem Content="ComboBox Item5"/>
        </ComboBox>

    </Grid>

3.TreeView 列表款的嵌套,形成了好几个树杈
在这里插入图片描述

<Grid >
        <TreeView>
            <TreeViewItem Header="Name">
                <TreeViewItem Header="Tom"/>
                <TreeViewItem Header="Alice"/>
            </TreeViewItem>
            <TreeViewItem Header="Hobby">
                <TreeViewItem Header="Sing"/>
                <TreeViewItem Header="Draw"/>
            </TreeViewItem>
        </TreeView>


    </Grid>

习题:
在这里插入图片描述

InitializeComponent();
            TreeViewItem item1 = new TreeViewItem() { Header = "北京" };
            TreeViewItem item11 = new TreeViewItem() { Header = "故宫" };
            item11.Items.Add("南大门");
            item11.Items.Add("神武门");
            item11.Items.Add("东华门");
            item11.Items.Add("西华门");
            item1.Items.Add(item11);
            item1.Items.Add("颐和园");
            item1.Items.Add("水立方");
            tw.Items.Add(item1);
      

习题2:
在这里插入图片描述
在这里插入图片描述
7.构建控件
(1)、ToolTip表示工具提示属性,还可以当做一个类用
在这里插入图片描述
在这里插入图片描述

        <Button ToolTip="please click to enter next step"/>
        <Button Height="25" Content="Mouse" HorizontalAlignment="Left">
            <Button.ToolTip>
                <ToolTip Background="Green" Foreground="White" 
                                        HasDropShadow="False" Placement="Mouse">
                    <TextBlock Margin="5" Text="ToolTip类的使用方法"/>
                </ToolTip>
            </Button.ToolTip>
        </Button>

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
2.Thumb
Thumb类,表示可由用户拖动的控件,一般设置在Canvas内,因为它可以确定绝对定位。

 <Thumb x:Name="thumb1" Height="15" Width="20" 
                 Background="Yellow" Canvas.Left="100" Canvas.Top="100" 
                 DragDelta="ThumbMove" DragStarted="ThumbStart">
        </Thumb>
  private void ThumbStart(object sender,System.Windows.Controls.Primitives.DragStartedEventArgs e)
        {
            
          startleft = Canvas.GetLeft(thumb1);
              starttop = Canvas.GetTop(thumb1);
        }

        private void ThumbMove(object sender,System.Windows.Controls.Primitives.DragDeltaEventArgs e)
        {
            double left = startleft + e.HorizontalChange;
            double top = starttop + e.VerticalChange;
            Canvas.SetLeft(thumb1, left);
            Canvas.SetTop(thumb1, top);
        }

3.Border
是一个装饰控件,用于绘制边框,他只能有一个子控件,要想有多个需要有一个布局控件。
属性:
(1).backgroud背景
(2). bordergroud边框颜色
(3).borderthickness边框宽度
(4).ConerRadius 圆角效果
(5).Padding 在边框内部和边框之间留白,(margin是指外部留白)
在这里插入图片描述

 <Border Background="Thistle" BorderThickness="5" BorderBrush="Yellow" Canvas.Left="12" Canvas.Top="3" CornerRadius="20,15,10,5">
            <TextBlock  Text="WPF border"></TextBlock>
        </Border>
        

4.Popup创建浮动窗口

<StackPanel>
            <Button Click="PopupDisplay"  Height="25" Margin="20"/>
        <Popup x:Name="popup" Placement="Mouse" >
            <TextBox>I'm a wpf popup!</TextBox>
        </Popup>
        </StackPanel>
 private void PopupDisplay(object sender, RoutedEventArgs e)
        {
            popup.IsOpen = !popup.IsOpen;//IsOpen表示Popup控件是否可见  }

        }

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
(2)、弹出式菜单ContextMenu

 <Button x:Name="cmd" Content="Popup" Click="Button_Clicked">
            <Button.ContextMenu>
                <ContextMenu x:Name="menu">
                    <MenuItem Header="MenuItem0">
                        <MenuItem Header="MenuItem01"/>
                        <MenuItem Header="MenuItem02"/>
                        <MenuItem Header="MenuItem03"/>
                    </MenuItem>
                    <MenuItem Header="MenuItem1"/>
                </ContextMenu>
            </Button.ContextMenu>
        </Button>

private void Button_Clicked(object sender, RoutedEventArgs e)
{
menu.IsOpen = true;
}
在这里插入图片描述
5.scrollviewer(滚动查看器)
在这里插入图片描述

    <ScrollViewer HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto" >
        <StackPanel >
            <TextBox x:Name="text"/>
            <Button Height="16" Click="Button_Click"></Button>
            <ListBox x:Name="list"></ListBox>
        </StackPanel>
    </ScrollViewer>

注意:listbox本身自带滚动查看器
6.Viewbox视图框
在这里插入图片描述
8.日期控件
1.Canlundar,类似于Windows操作系统中的日历
属性:
DisplayDateStart和DisplayDateEnd 日期显示的起始时间和结束时间
BlackoutDates 保存日历中不能选择的日期集合–BlackoutDatesInPast()方法阻止被禁用的日期
在这里插入图片描述
在这里插入图片描述

SelectedDate 选中的日期,没有时为null
DisplatDate 使用DateTime对象确立日历视图中最初显示的日期。若SelectedDate和DisplayDate为空,使用当前日期。
FirstDayOfWeek 默认情况下,日历每周的第一天为周日
IsTodatHighlighted 是否突出当前日期
DisplayMode调整日历显示方式如年月
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

    <Grid>
        <Calendar Margin="10"  x:Name="calendarCt1" DisplayMode="Month" 
                   FirstDayOfWeek="Monday" FlowDirection="RightToLeft" 
                  CalendarDayButtonStyle="{StaticResource CalendarDayBtnStyle}"
                  />
    </Grid>

在这里插入图片描述
2.DataPicker(日期选择器)
多了一个textbox来提取日期
在这里插入图片描述

sys是引用字符串的一个命名空间
在这里插入图片描述
9.按钮
button click单击事件
CheckButton 和Radiobutton适用于切换开关的按钮,支持IsCheck和IsThreeState属性,当IsThreeState为True时,复选框中的值为Checked,Unchecked,Indeterminate这三个值中选择

 <StackPanel Orientation="Horizontal"  >
        <Button Margin="10" Content="Button" Height="50" 
                                                                              VerticalAlignment="Top"/>
        <StackPanel Margin="0,0,50,0" >
            <CheckBox IsChecked="{x:Null}" Content="Check Null" Margin="10"/>
            <CheckBox IsChecked="True" Content="Check True" Margin="10"/>
            <CheckBox IsChecked="False" Content="Check False" Margin="10"/>
        </StackPanel>
        <StackPanel Margin="50,0,0,0" >
            <RadioButton IsChecked="{x:Null}" Content="RadioButton Null" 
                                                                                                   Margin="10"/>
            <RadioButton IsChecked="True" Content="RadioButton True" 
                                                                                                  Margin="10"/>
            <RadioButton IsChecked="False" Content="RadioButton False" 
                                                                                                  Margin="10"/>
        </StackPanel>
    </StackPanel>

在这里插入图片描述

 <StackPanel>
        <Label x:Name="label1" Margin="10"/>
        <Label x:Name="label2" Margin="10"/>
    </StackPanel>
 String str1 = DateTime.Now.DayOfWeek + "    " +
                               DateTime.Now.ToString("yyyy/MM/dd HH:mm:ss");
            this.label1.Content = str1;
            string[] weekdays = { "星期日", "星期一", "星期二", "星期三", "星期四",
                                                                                           "星期五", "星期六" };
            String str2 = weekdays[Convert.ToInt32(DateTime.Now.DayOfWeek)]
                      + "    " + DateTime.Now.ToString("yyyy年MM月dd日HH:mm:ss");
            this.label2.Content = str2;

在这里插入图片描述
根据生日算年龄

 <Grid  >
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="14*"/>
            <ColumnDefinition Width="57*"/>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="31*"/>
            <RowDefinition Height="34*"/>
        </Grid.RowDefinitions>
        <TextBlock Text="Birthday:" Margin="0,0,0,0.667" />
        <TextBlock Text="Age:" Margin="0,4.333,0,-0.333" Grid.Row="1"/>
        <DatePicker  x:Name="birthdaydatepicker" Grid.Column="1"  SelectedDateChanged="datepickerselectedchanged" Margin="1,0,0.333,0.667" />
        <TextBox  x:Name="agetextbox" Grid.Column="1" Margin="1,4.333,0.333,-0.333" Grid.Row="1"/>

    </Grid>
DateTime dt1 = DateTime.Now;
            string t = this.birthdaydatepicker.SelectedDate.ToString();
            DateTime dt2 = Convert.ToDateTime(t);
            //MessageBox.Show(dt2.ToString());
            TimeSpan span = dt1.Subtract(dt2);
            //dt1-dt2的时间差(DateTime的数据类型)
            int dayDiff = (span.Days + 1) / 365;
            this.agetextbox.Text = dayDiff.ToString();

在这里插入图片描述

第五章 数据

在WPF中,实现了数据驱动UI的设计思想,数据成为应用程序的中心。
程序=数据+算法,数据会在存储,逻辑,界面三层之间流通。存储层由数据库和文件系统组成,数据传输和处理使用.NetFrameWork的Ado.Net等基本类。展示层则由WPF类库来实现,而展示层和逻辑层的沟通就使用DataBinding来实现。
Bingding连接着源(Source)和目标(Target).

<Grid x:Name="grid">
        <Grid.RowDefinitions>
            <RowDefinition/>
            <RowDefinition/>
            <RowDefinition/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="3*"/>
        </Grid.ColumnDefinitions>
        <TextBlock Text="Name:" Height="23" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="5,0,0,0" />
        <TextBlock Text="Age:" Height="23" HorizontalAlignment="Left" VerticalAlignment="Top" Grid.Row="1" Margin="5,0,0,0" />
        <TextBox x:Name="nameTextBox" Height="23" Width="120" Grid.Column="1" HorizontalAlignment="Left" VerticalAlignment="Top"/>
        <TextBox x:Name="ageTextBox" Height="23" Width="120" Grid.Row="1" Grid.Column="1" HorizontalAlignment="Left" VerticalAlignment="Top"/>
        <Button Content="Age++" Height="23" HorizontalAlignment="Center" VerticalAlignment="Top" Width="180" Grid.Row="2" Grid.ColumnSpan="2" Click="Button_Click"/>
    </Grid>
namespace 第一章
{
    /// <summary>
    /// MainWindow.xaml 的交互逻辑
    /// </summary>
    public partial class MainWindow : Window
    {
        public static string win = "山高月骁";
        public static string up
        {
            get { return "水落石出"; }
        }
        User user = new User("谢浩然", 9);

        public MainWindow()
        {
            InitializeComponent();
            InitializeComponent();
            this.nameTextBox.Text = user.Name;
            this.ageTextBox.Text = user.Age.ToString();
        }



        private void Button_Click(object sender, RoutedEventArgs e)
        {
            ++user.Age;
            MessageBox.Show(string.Format("Happy Birthday,{0}, Age:{1}",
                                                              user.Name, user.Age), "Birthday");
        }
    }
    public class User
    {
        string name;
        public string Name
        { get { return this.name; } set { this.name = value; } }
        int age;
        public int Age
        {
            get { return this.age; }
            set { this.age = value; }
        }
        public User() { }
        public User(string name, int age)
        {
            this.name = name;
            this.age = age;
        }
    }

}

在这里插入图片描述
一个对象可能有多个属性值,你想使得UI元素绑定的那个属性值就是Binding的路径(Path)

如何使得UI元素的值与后台资源互通有无呢?
<TextBox x:Name=“nameTextBox” Text="{Binding Path=Name}" Height=“23” Width=“120” Grid.Column=“1” HorizontalAlignment=“Left” VerticalAlignment=“Top”/>
<TextBox x:Name=“ageTextBox” Height=“23” Width=“120” Text="{Binding Path=Age}" Grid.Row=“1” Grid.Column=“1” HorizontalAlignment=“Left” VerticalAlignment=“Top”/>
在这里插入图片描述
这样虽未直接给两个textbox指定Binding对象,但是结构是树形结构,会一步一步找寻根节点。与其Bingding一脉相承。当其找到最后还是没有找到,那么这个Binduing没有Source,因而也不会得到数据。
我们发现当我们令age++后,agetextbox并没有发生改变,说明我们并没有将值传回前台。这是一种单向绑定机制。每个TextBox都有自己的TextChanged事件实现使得后台数据同步更新,由此我们可以看出,我们当后台数据变更时,需要设置监听事件,实现UI元素实时更新。
如何使得后台数据改变时让前台的UI元素实时改变呢?
我们需要在数据源类里加一个接口。当为Binding设置了数据源后,Binding会自动侦听这个接口事件。步骤:1.创建类,继承并实现InotifyPRopertyChanged接口。2.创建一个名为Notify()的包装函数,实现属性变更通知。3.实现属性变更通知,如果属性的实际值发生改变后则调用Notify()。

            Title="MainWindow" Height="350" Width="525">
    <Grid Height="307" Width="450" Name="grid">
        <TextBlock Height="23" HorizontalAlignment="Left"
               Margin="12,12,0,0"  Text="Name:" VerticalAlignment="Top" />
        <TextBlock Height="23" HorizontalAlignment="Left" 
                   Margin="12,0,0,237"  Text="Age:"
                   VerticalAlignment="Bottom" />

        <TextBox Text="{Binding Name}" Height="23" HorizontalAlignment="Left" Width="120"
               Margin="74,12,0,0" Name="nameTextBox" VerticalAlignment="Top"  />
        <TextBox Text="{Binding Age}" Height="23" Width="120" 
     HorizontalAlignment="Left" Margin="74,51,0,0"     Name="ageTextBox" VerticalAlignment="Top"/>
        <Button Content="Age++" Height="23" HorizontalAlignment="Left"    Width="182"
                Margin="12,98,0,0" Name="ageaddButton" VerticalAlignment="Top" Click="Button_Click" />
    </Grid>
namespace 第一章
{
    /// <summary>
    /// MainWindow.xaml 的交互逻辑
    /// </summary>
    public partial class MainWindow : Window
    {
        public static string win = "山高月骁";
        public static string up
        {
            get { return "水落石出"; }
        }
        User user = new User("谢浩然", 9);

        public MainWindow()
        {
            InitializeComponent();
            InitializeComponent();
            grid.DataContext = user;

        }



        private void Button_Click(object sender, RoutedEventArgs e)
        {
            ++user.Age;
            MessageBox.Show(string.Format("Happy Birthday,{0}, Age:{1}",
                                                              user.Name, user.Age), "Birthday");
        }

    }
    public class User:INotifyPropertyChanged 
    {
        protected void Notify(string propName)
        {
            if (this.PropertyChanged != null)
            {
                PropertyChanged(this, new PropertyChangedEventArgs(propName));
            }
        }
        string name;
        public string Name
        {
            get { return this.name; }
            set
            {
                if (this.name == value) { return; };
                this.name = value;
                Notify("Name");//Step 3: 实现属性变更通知
            }
        }
        int age;
        public int Age
        {
            get { return this.age; }
            set
            {
                if (this.age == value) { return; }
                this.age = value;
                Notify("Age"); //Step 3: 实现属性变更通知   } }
            }
        }
        public User() { }
        public User(string name, int age)
        {
            this.name = name;
            this.age = age;
        }
        public event PropertyChangedEventHandler PropertyChanged;
        //Step 1: 实现接口   更改属性时引发的事件
    }
}

由此解决了数据同步更新的问题。

绑定的目的是使得相关联的数据点之间数据同步,这个数据点包括了数据的出发点,也包含了数据的目的地。数据点即为一个节点,要借助数据源和路径。

1.把对象作为数据源
在这里插入图片描述

Title="MainWindow" Height="110" Width="300">
    <StackPanel>
        <TextBox x:Name="textBoxName" BorderBrush="Black" Margin="5" />
        <Button Content="Add Age" x:Name="button1" Margin="5" Click="button1_Click" />
    </StackPanel>
</Window>
namespace 第一章
{
    /// <summary>
    /// MainWindow.xaml 的交互逻辑
    /// </summary>
    public partial class MainWindow : Window
    {
        public static string win = "山高月骁";
        public static string up
        {
            get { return "水落石出"; }
        }




        Student stu = new Student();
            public MainWindow()
            {
                InitializeComponent(); //自动生成的代码,用途是初始化UI元素。
                                       //准备数据源
                
                //准备Binding
                **Binding binding = new Binding();
                binding.Source = stu;
                binding.Path = new PropertyPath("Name");
                //使用Binding连接数据源与Binding目标
                BindingOperations.SetBinding(this.textBoxName, TextBox.TextProperty, binding);**
            }



        
        private void button1_Click(object sender, RoutedEventArgs e)
        {
            stu.Name += "Name";
        }



    }
    public class Student : INotifyPropertyChanged
    {
        public event PropertyChangedEventHandler PropertyChanged;//事件
        protected void Notify(string propName)
        {
            if (this.PropertyChanged != null)
            {
                PropertyChanged(this, new PropertyChangedEventArgs(propName));
            }
        }
        string name;
        public string Name
        {
            get { return this.name; }
            set
            {
                if (this.name == value) { return; };
                this.name = value;
                Notify("Name");//Step 3: 实现属性变更通知
            }
        }
    }

}

把数据源和目标连接在一起是BindingOperations.SetBinding()方法完成的。他有三个参数。
第一个参数指定Binding目标,即为UI元素
第二个为目标的属性,如Text,items
第三个为实例化的Binding

2.把控件作为源
在这里插入图片描述

 public MainWindow()
        {
            InitializeComponent(); //自动生成的代码,用途是初始化UI元素。
                                   //准备数据源
            Binding bind = new Binding();
            bind.Source = this.textbox1;
            bind.Path = new PropertyPath("Text");
            contentcontrol1.SetBinding(ContentControl.ContentProperty, bind);

        }
    <StackPanel Margin="10">
        <TextBox x:Name="textbox1" Margin="10" Height="50" />
        <ContentControl x:Name="contentcontrol1" Margin="10" Height="50"/>
        <ContentControl x:Name="contentcontrol2"  Content="{Binding ElementName=textbox1, Path=Text}"   Margin="10" Height="50"/>
    </StackPanel>

2.slider
在这里插入图片描述

    <StackPanel>
        <TextBox x:Name="textbox1" Margin="10"/>
        <Slider x:Name="slider1"/>
    </StackPanel>
  public MainWindow()
        {
            InitializeComponent(); //自动生成的代码,用途是初始化UI元素。
            Binding binding = new Binding();
            binding.Source = this.slider1;
            binding.Path = new PropertyPath("Value");
            BindingOperations.SetBinding(this.textbox1, TextBox.TextProperty, binding);

        }

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

  • 3
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值