Adding properties to composite custom controls Part 114

  • دعنا نشارك هذا :
ترتيب الدرس : 114
المدة : 00:19:49
التحكم :
Text version of the video

Healthy diet is very important both for the body and mind. If you like Aarvi Kitchen recipes, please support by sharing, subscribing and liking our YouTube channel. Hope you can help.


All ASP .NET Text Articles

All ASP .NET Slides

All Dot Net and SQL Server Tutorials in English

All Dot Net and SQL Server Tutorials in Arabic

In this video we will discuss about adding custom properties, to composite custom calendar control. Please watch Part 113 of video series before proceeding with this video. Link for video tutorial is below.

At the moment, the calendar composite control does not have an image associated with the image button. Let us create "ImageButtonImageUrl" property to associate an image.

Copy and paste the following code in CustomCalendar.cs file.
[Description("Sets the image icon for the calendar control")]
public string ImageButtonImageUrl
// This method checks if the child controls are created, if not,
// it triggers a call to CreateChildControls() method.
return imageButton.ImageUrl ! null ? imageButton.ImageUrl : string.Empty;

Rebuild CustomControls project.

Flip to the web application project, where the CustomCalendar is being tested. Please remove the CustomCalendar control from visualstudio tool boox, and add it again. Drag and drop CustomCalendar control on to the webform. Right click and select properties. Notice that "ImageButtonImageUrl" property is now displayed in the properties window. If you change the properties display mode to "Categorized", then notice that "ImageButtonImageUrl" property is displayed under "Appearance" category. Also, notice that, when the property is selected, the property description is displayed at the bottom of the properties window.

Create a folder with NameImages in the web application project. Download Calendar.jpg image from this website. To download the image, simply right click on the image, and select "Save Image as" and save it to the specified location on your computer. Copy the image into the "Images" folder in your web application project.

Now, in the properties window, set ImageButtonImageUrl"Images/Calendar.jpg". Notice that, at design time, the image is not shown on the image button. Run the project, and notice that, at run time, the image button shows the image as expected.

To correct the design time problem, override RecreateChildControls() method. This method is called by visual studio designer, to recreate child controls at design time. Copy and paste the following code CustomCalendar.cs file.
protected override void RecreateChildControls()

At this point, re-test the custom calendar. When you set ImageButtonImageUrl"Images/Calendar.jpg", notice that the property change is immediately picked up by the control at design time.

At the moment, another cosmetic issue with this control is that, the "Image Button" and the "TextBox" are not properly alligned. To correct this problem, change the Render() method in CustomCalendar.cs file, as shown below. This method adds, cellpadding attribute, and puts the "textbox" and "calendar" in a table.
protected override void Render(HtmlTextWriter writer)
writer.AddAttribute(HtmlTextWriterAttribute.Cellpadding, "1");







The text version of this video, can be found at the following link

سيتم تفعيل التعليقات قريبا

Sep 23, 2020 07:32:26