有域名如何做免费网站,想建个图片网站,wordpress linux 建站,上海好的高端网站建设服务公司上期介绍了WPF的实现架构和原理#xff0c;之后我们开始来使用WPF来学习各种控件。
一、尝试插入一个按钮#xff08;方法一#xff09;
1. VS2019 在界面中#xff0c;点击工具栏中的视图#xff0c;在下拉菜单中选择工具箱。 至于编译器中的视图怎么舒服怎么来布置之后我们开始来使用WPF来学习各种控件。
一、尝试插入一个按钮方法一
1. VS2019 在界面中点击工具栏中的视图在下拉菜单中选择工具箱。 至于编译器中的视图怎么舒服怎么来布置我也会出一期文章讲述我的编译器界面如何布局的新手和强迫症到时候可以来参考参考。
2. 言归正传打开工具箱界面之后我们找到button按键控件拖入进来。 这样一个按键就创建好了但是如何才能修改属性变成左下角的按键的样式呢那就需要修改XAML了 XAML 是一种强大且灵活的标记语言适用于创建现代化、响应迅速的 Windows 应用程序界面。它的声明式语法和与 C# 的紧密集成使其成为 WPF 和 UWP 开发的核心工具。通过学习 XAML开发者可以更高效地设计和实现复杂的 UI 需求。 二、在XAML中插入一个button方法二
在可视化UI下面有一个xaml代码编辑器在编辑器中可以更改代码和增删代码来改变布局红框就是XAML代码编辑区。 XAML格式和内容编辑
1. XAML中的Window元素
Window x:ClassWpfApp.MainWindowxmlnshttp://schemas.microsoft.com/winfx/2006/xaml/presentationxmlns:xhttp://schemas.microsoft.com/winfx/2006/xamlTitleMainWindow Height350 Width525
/Window
Window 元素是 WPF 中一个顶级容器表示一个窗口。它通常是一个应用程序的主窗口或弹出窗口。这个元素包含了一些属性用于定义窗口的外观和行为。
x:Class: 是一个 XAML 语言的特性指定了这个 XAML 文件所对应的后台代码类。在例子中x:ClassWpfApp.MainWindow 指定了窗口的后台代码类是 WpfApp.MainWindow。这个类位于 MainWindow.xaml.cs 文件中并包含窗口的逻辑代码。
xmlns: 定义了 XAML 文件中使用的命名空间。xmlnshttp://schemas.microsoft.com/winfx/2006/xaml/presentation这是默认的 WPF 命名空间包含了 WPF 中的各种控件和功能。
xmlns:x: 定义了 XAML 的命名空间包含 XAML 语言的功能。xmlns:xhttp://schemas.microsoft.com/winfx/2006/xaml这是 XAML 命名空间提供了如 x:Class、x:Name、x:Key 等 XAML 语言功能。
Title: 定义窗口的标题栏文本。TitleMainWindow 将窗口的标题设置为 MainWindow。
Height 和 Width: 定义窗口的高度和宽度以像素为单位。Height350 和 Width525 设置了窗口的初始大小。
这是完整的一个窗口的界面描述代码。
Window x:ClassWpfApp.MainWindowxmlnshttp://schemas.microsoft.com/winfx/2006/xaml/presentationxmlns:xhttp://schemas.microsoft.com/winfx/2006/xamlTitleMainWindow Height350 Width525!-- 这里可以添加更多的控件和布局 --GridButton ContentClick Me Width100 Height50 HorizontalAlignmentCenter VerticalAlignmentCenterClickButton_Click//Grid
/Window
2. XAML中的Grid元素
GridButton ContentButton HorizontalAlignmentLeft Margin366,99,0,0 VerticalAlignmentTop Width99 Height38/Button ContentXAML创建的按钮 HorizontalAlignmentCenter VerticalAlignmentCenter Width200 Height30/Button
/Grid
3. Button元素
当我们会创建一个按钮元素之后在侧边的属性栏中可以改文字、颜色、背景等属性。那么如果圆角这种没有的属性如何更改和美化呢毕竟做出来是给人看的直接粘代码
Button x:NamemyButton ContentClick MeWidth104 Height69HorizontalAlignmentCenter VerticalAlignmentCenterFontSize16 FontWeightBoldBackgroundLightBlue ForegroundWhiteBorderBrushBlue BorderThickness2ClickMyButton_Click Margin18,230,399,25Button.StyleStyle TargetTypeButtonSetter PropertyTemplateSetter.ValueControlTemplate TargetTypeButtonGridEllipse x:Nameellipse Fill{TemplateBinding Background} Stroke{TemplateBinding BorderBrush} StrokeThickness{TemplateBinding BorderThickness}/ContentPresenter HorizontalAlignmentCenter VerticalAlignmentCenter//GridControlTemplate.TriggersTrigger PropertyIsMouseOver ValueTrueSetter TargetNameellipse PropertyFill ValueSkyBlue//TriggerTrigger PropertyIsPressed ValueTrueSetter TargetNameellipse PropertyFill ValueSteelBlue//Trigger/ControlTemplate.Triggers/ControlTemplate/Setter.Value/Setter/Style/Button.Style/Button
像上面的代码实现的效果是什么样的呢 x:NamemyButton !-- 设置按钮的名称为myButton便于在代码后端引用 --ContentClick Me !-- 按钮上显示的文字内容 --Width104 Height69 !-- 设置按钮的宽度和高度 --HorizontalAlignmentCenter VerticalAlignmentCenter !-- 让按钮在容器中水平和垂直居中对齐 --FontSize16 FontWeightBold !-- 设置按钮文字的字体大小和加粗 --BackgroundLightBlue ForegroundWhite !-- 按钮的背景色为浅蓝色前景色文字颜色为白色 --BorderBrushBlue BorderThickness2 !-- 设置按钮边框颜色为蓝色边框厚度为2 --ClickMyButton_Click !-- 指定按钮被点击时执行的事件处理方法 --Margin18,230,399,25 !-- 设置按钮的外边距顺序为左、上、右、下 -- !-- 自定义Button的样式 --Button.StyleStyle TargetTypeButton !-- 定义一个针对Button类型的样式 --!-- 重写Button的控制模板 --Setter PropertyTemplateSetter.ValueControlTemplate TargetTypeButton!-- 使用Grid布局来包含按钮的内容 --Grid!-- 创建一个椭圆用于自定义按钮的背景形状 --Ellipse x:Nameellipse Fill{TemplateBinding Background} !-- 绑定到按钮背景色属性 --Stroke{TemplateBinding BorderBrush} !-- 绑定到按钮边框色属性 --StrokeThickness{TemplateBinding BorderThickness}/ !-- 绑定到按钮边框厚度属性 --!-- 内容展示器用于放置按钮上的内容如文本 --ContentPresenter HorizontalAlignmentCenter VerticalAlignmentCenter//Grid!-- 添加触发器来改变按钮状态时的外观 --ControlTemplate.Triggers!-- 鼠标悬停时改变椭圆背景色 --Trigger PropertyIsMouseOver ValueTrueSetter TargetNameellipse PropertyFill ValueSkyBlue//Trigger!-- 按钮被按下时改变椭圆背景色 --Trigger PropertyIsPressed ValueTrueSetter TargetNameellipse PropertyFill ValueSteelBlue//Trigger/ControlTemplate.Triggers/ControlTemplate/Setter.Value/Setter/Style/Button.Style
这些就是代码的详细解释了。
总结一下
了解如何在WPF应用程序中实现按钮的创建与自定义通过Visual Studio 2019的图形界面操作及深入XAML代码编辑展示了按钮控件的基本应用与进阶样式调整技巧。也介绍了如何从工具箱中添加一个按钮和手动写代码放置一个按钮。介绍了自定义按钮的代码实现。
