Divider Panel - 创建自定义 Windows Forms 控件全攻略

Divider Panel Tuorial Part I- Creating a custom Windows Forms control from Start to Toolbox

Contents

Introduction

In this tutorial we will walk through the process of creating a custom Windows Forms control from the start of the project all the way to inclusion in the Visual Studio ToolBox. The control will be a simple DividerPanel - an inherited Panel control that features selectable border appearance and border sides. After completing this tutorial, readers should have a basic foundation on class inheritance, creating custom properties, overriding base methods, using property comments, creating a ToolBox icon, creating a simple designer class and integrating a custom control into the Visual Studio ToolBox. Along the way we will discuss some best practices and detail some shortcuts in Visual Studio that help to simplify control development.

Creating a New Solution

Creating a new Blank Solution

When creating a new project in Visual Studio for control development, it's usually a good idea to start with a new Blank Solution rather than jumping straight into a new Control Library project with the project wizard. In doing so, you can create multiple projects within the one solution - this allows your test application and control library to remain as separate projects, and also adds the ability to easily share linked classes and include global solution items.

To create a new Blank Solution, select File > New > Blank Solution. In the New Solution dialog, enter the solution name as Windows Forms Divider Panel and click OK.


Adding a new project

Once your new solution has been created, right-click on the solution title and select Add > New Project. When the Add New Project dialog opens, select the Windows Control Library option, and enter DividerPanel as the project name.

The wizard will create the control library with two files by default: UserControl1.cs and AssemblyInfo.cs. For this tutorial we will delete UserControl1.cs and create our control in a new, empty class.

Highlight UserControl1.cs then right-click and select Delete to remove it from the project.

Adding a new class

Next, right-click on the DividerPanel project in Solution Explorer, then select Add > Add Class from the context menu. In the Add Class dialog, enter DividerPanel.cs as the class name and click OK.


Inheriting From Existing Controls

Inheritance is one of the major factors that makes object oriented programming so powerful. When we inherit from an existing class we automatically pick up all of the base classes' functionality and gain the ability to extend upon it to create a more specialized class. All Windows Forms controls at some point must inherit from System.Windows.Forms.Control, as it encapsulates all of the basic properties and methods the framework needs to host a class as a control on a Form.

Fortunately inheriting from an existing control is a snap - once you have decided the control that has the base functionality you wish to extend upon, it takes just one addition to your class declaration line to make your class inherit from it:

public class DividerPanel : System.Windows.Forms.Panel
{
}

For our DividerPanel control, we have specified that we are inheriting our base functionality from the standard System.Windows.Forms.Panel control. In doing this, our new control now has all of the Properties and Methods of the Panel control - we can now add our own custom properties to it, and override some of the Panel controls methods in order to implement our customizations.

Adding Properties and Accessors

In order to implement our DividerPanel, we are going to add two new properties: BorderSide and Border3DStyle. For the BorderSide property we will be using a reference to a value from the System.Windows.Forms.Border3DSide enumeration, and for the Border3DStyle property we will be using a reference to a value from the System.Windows.Forms.Border3DStyle enumeration.

While there a few different ways we can expose these properties, there is only one good way - create a private variable for use

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Element-Plus 的 Select 组件支持自定义选项模板和选项分组,以下是一个简单的自定义 Select 组件示例: ```html <template> <el-select v-model="value" :placeholder="placeholder" :multiple="multiple" :collapse-tags="collapseTags" :filterable="filterable" :allow-create="allowCreate" :default-first-option="defaultFirstOption" :popper-class="popperClass" :remote="remote" :loading="loading" :loading-text="loadingText" :no-match-text="noMatchText" :no-data-text="noDataText" :popper-append-to-body="popperAppendToBody" :automatic-dropdown="automaticDropdown" :reserve-keyword="reserveKeyword" @change="handleChange"> <template #default="{option}"> <span v-if="option.value !== 'divider'" class="el-select-dropdown__item">{{ option.label }}</span> <el-divider v-else /> </template> <template #group="{group}"> <span class="el-select-dropdown__item el-select-group">{{ group.label }}</span> </template> </el-select> </template> <script> export default { name: 'CustomSelect', props: { placeholder: { type: String, default: '请选择' }, value: { type: [String, Number, Array], default: '' }, multiple: { type: Boolean, default: false }, collapseTags: { type: Boolean, default: false }, filterable: { type: Boolean, default: false }, allowCreate: { type: Boolean, default: false }, defaultFirstOption: { type: Boolean, default: false }, popperClass: { type: String, default: '' }, remote: { type: Boolean, default: false }, loading: { type: Boolean, default: false }, loadingText: { type: String, default: '加载中' }, noMatchText: { type: String, default: '无匹配数据' }, noDataText: { type: String, default: '暂无数据' }, popperAppendToBody: { type: Boolean, default: true }, automaticDropdown: { type: Boolean, default: false }, reserveKeyword: { type: Boolean, default: false }, options: { type: Array, default: () => [] } }, methods: { handleChange(value) { this.$emit('change', value) } } } </script> ``` 在模板中,我们定义了两个插槽:`default` 和 `group`。`default` 插槽用于渲染每个选项,`group` 插槽用于渲染选项分组。在插槽中,我们可以访问到 `option` 和 `group` 对象,它们包含了选项和分组的相关信息。 同时,我们还定义了一些 props,用来控制 Select 的行为和样式。 使用自定义 Select 组件时,只需要传入 `options` 属性,指定选项列表,即可完成自定义。例如: ```html <template> <custom-select :options="options" v-model="selected" /> </template> <script> import CustomSelect from './CustomSelect.vue' export default { components: { CustomSelect }, data() { return { selected: '', options: [ { label: '选项一', value: '1' }, { label: '选项二', value: '2' }, { label: '选项三', value: '3' }, { label: '分组一', value: 'divider' }, { label: '选项四', value: '4', group: '分组一' }, { label: '选项五', value: '5', group: '分组一' } ] } } } </script> ``` 注意,在定义选项时,我们可以通过 `group` 属性指定选项所属的分组,从而实现选项分组的效果。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值