Filtering effect of image transformation in asp.net2.0

asp.net| Conversion

This article describes an easy way to create a custom Web control and makes it available for use in a asp.net 2.0 Web page to display the Microsoft DirectX image conversion filtering effect.

　　First, Introduction

This article describes an easy way to create a custom Web control and apply it to a asp.net 2.0 Web page that shows the effect of Microsoft DirectX image conversion filtering. The article includes a class library with 11 different controls, each showing some aspects of the Microsoft DirectX Image transformation filtering effect. Of these 11 controls, 5 are page transition effects controls, and the other 6 are filter effect controls that enhance the appearance of the text.

In these 6 filter effect controls that enhance the appearance of the text, each is implemented as a container control. This will allow the user either to type the text directly into the container, or to place a label in the control and apply the effect to the label. The purpose of selecting a Label control is to provide an easy, standards-based HTML method for resizing, centering, and formatting text.

The remaining 5 controls are used to add a page transition effect to a Web page without writing any additional HTML or VB code. To use these controls, users only need to drag them onto the form. However, these controls do not have a corresponding visual component, although the page can be displayed in the browser, and when the user leaves the page, the corresponding transition effect is used to open the next page.

The example project that corresponds to this article contains a simple web site containing a single default.aspx page that shows the top 6 text-enhanced controls and a page transition effect control.

Note the methods that are applied to the demo engineering and control libraries in this article apply only to Internet Explorer and do not provide support for other browser types. If you work in a corporate intranet and you can ensure that all users have access to Internet Explorer, the control set and the methods here may be useful to you. If you publish these controls publicly, users who surf with a non-Internet Explorer browser can still read the appropriate text but the effect will not exist. If you really want to make a public announcement, you can first check the user's browser and if it's not ie, you should suggest that they should use IE to view the site.

Fig. 1. Filtration effect in the demonstration project

　　 Second, start

First, extract the source code included in the class library and demo project. As you examine the corresponding content, you will see that there are two projects in one scenario. Engineering Dxfiltercontrols is a class library that contains the 11 previously mentioned controls. Engineering Dxfiltertestsite is a demo web site that can be displayed on it, and can be viewed on a single Default.aspx Web page.

In the DX filter control project, there are 11 separate controls:

1. Ccblurredlabel
2. Ccdropshadow
3. Ccemboss
4. Ccengrave
5. Ccglowingtext
6. Ccgradient
7. Ccpagetransition_iris
8. Ccpagetransition_pixelate
9. Ccpagetransition_radialwipe
Ccpagetransition_gradientwipe
Ccpagetransition_wheel.
As I've mentioned, the first 6 controls are used to enhance the appearance of text (implemented through a Microsoft DirectX filtering application). Each of these controls is constructed into a container, and any text that goes directly into the container or label has the appropriate filtering effect, as long as it can be generated to a Microsoft Internet Explorer browser.

The first 5 controls are designed to provide some text-improvement filtering for container content. The 6th control (ccgradient) is only a panel that has a gradient background and does not actually change or directly affect the text in the container.

The 7th to 11th control is a page transition effect control. You can drag a single page transition control to a form and set its properties (where many of the properties do not have to be set). As a result, the next page to open will be opened with the specified effect when the user exits the current page. Although in this instance, I use these controls to create a transition effect (when transitioning to a new page), however, these transition effects can be configured to invoke the effect when the container page is loaded, and can even be used in a single page to implement the effect of using a new image instead of another image.

Figure 2: Pixel transition effect of a page

In addition, this is not a very complex set of controls, but I think they already have enough to show what filtering can be achieved through DirectX. You can refer to the Microsoft documentation on the website to explore other filtering effects.

　　 text-Enhanced filter effect control

The top 6 text in the sample control library each of the improved effects controls is basically created in the same format. Here, we don't want to describe each of these controls individually, but simply describe the Ccemboss control. The Ccemboss control inherits from System.Web.UI.WebControl; I have added a reference to System.Design to the base Web control and added an import statement to include the System.Web.UI.Design library in the project. This addition is necessary to establish some design-time support elements that make the control easier to use at design time. The code is divided into three separate regions: declarations,properties and rendering. Next, let's look at the beginning of the class definition:

Imports System
Imports System.Collections.Generic
Imports System.ComponentModel
Imports System.Text
Imports system.web
Imports System.Web.UI
Imports System.Web.UI.Design
Imports System.Web.UI.WebControls
<designer (GetType (embossedlabeldesigner)) >_
<parsechildren (False) >_
Public Class Ccemboss Inherits WebControl
Note that after the import statement, the property data shows that the class will use a custom designer contained in the Embossedlabeldesigner class. Later, we'll describe the designer, which is responsible for providing some kind of design-time support for the control. Also note that the ParseChildren property has been added and is set to false. This is to prevent the page parser from parsing the contents of the control, because the control is a container control and its contents do not belong to that part of the control.

The declarations area follows and is simple; it contains several private member variables to store the user's selection information for this control. For this filtering effect, you can refer to the Microsoft documentation to determine if there are any other attributes to explore.

#Region "Declarations"
Private menabled as Boolean
Private Mbias as Single
#End Region
Here, the Menabled property is a Boolean value that is passed to the filter effect, and it happens to achieve the effect you want, and it can start or deactivate the effect. The Mbias here is used to determine the scope of the event. I believe the Microsoft document shows on this issue that 0.7 is typical and is the default value for this effect.

Next is the properties area, which is limited to providing public access to the contents of the private member variable. The implementation code is roughly as follows:

#Region "Properties"
<category ("Embossed Label") >_
<browsable (True) >_
<description ("Enable or display the embossed effect.") >_
Public Property embossenabled () as Boolean
Get
EnsureChildControls ()
Return menabled
End Get
Set (ByVal value as Boolean)
EnsureChildControls ()
menabled = value
End Set
End Property
<category ("Embossed Label") >_
<browsable (True) >_
<description ("Set" bias for the embossed effect (typically 0.7). ") >_
Public Property Bias () as single
Get
EnsureChildControls ()
Return Mbias
End Get
Set (ByVal value as single)
EnsureChildControls ()
Mbias = value
End Set
End Property
#End Region
The last part is the rendering area. It contains the necessary code to activate the effect at run time, and its code looks like this:

#Region "Rendering"
Protected Overrides Sub AddAttributesToRender (ByVal writer as
HtmlTextWriter)
Writer. AddStyleAttribute (Htmltextwriterstyle.filter, _
"Progid:DXImageTransform.Microsoft.Emboss (bias=" & Bias.tostring () & _
", Enabled =" & Embossenabled.tostring () & "); Width:" &
Width.Value.ToString () & "px")
Mybase.addattributestorender (writer)
End Sub
#End Region
End Class
Note that we overload the AddAttributesToRender subroutine and use HtmlTextWriter to add a style property. This property corresponds to the DirectX filter. You can also see that this earlier exposed attribute is passed to this subroutine within the filter definition. This is where the filter effect is added to the container at run time.

This section is followed by the definition of the Embossedlabeldesigner class. This class can be written into a separate class file, but I prefer this method because it makes the design code and the corresponding goal clear. This section of code provides design-time support for the control:

Public Class Embossedlabeldesigner
Inherits Containercontroldesigner
Protected Overrides Sub adddesigntimecssattributes (ByVal styleattributes
As System.Collections.IDictionary)
Dim embosslbl as Ccemboss = CType (me.component, Ccemboss)
Styleattributes.add ("Filter", "Progid:DXImageTransform.Microsoft.Emboss" (bias=) &
EmbossLbl.Bias.ToString () & ", Enabled =" &
EmbossLbl.Enabled.ToString () & "); Width:" &
EmbossLbl.Width.Value.ToString () & "px")
Mybase.adddesigntimecssattributes (styleattributes)
End Sub
End Class
As you can see, you basically add the same filtering effect to the control as it does at run time so that you see the same visualization of the filter; However, you are using the form designer now. This is a good summary of how each of these controls works, although you'll notice that there are some minor differences in other properties and methods of the form.

　　 Four, page transition effect control

In this section, as in the previous section, we will only discuss one of the 5 page transition effect controls (because they have great similarity). I'll discuss the gradient erase transition effect control, refer to the sample code provided in this article to learn more about the difference between this control and other controls.

The Gradient Erase page transition control (CCPAGETRANSITITION_GRADIENTWIPE) begins in a way that is similar to the text improvement control. The implementation code is divided into three main areas: declarations,properties and rendering.

The declaration section of the class looks like the following:

Imports System
Imports System.Collections.Generic
Imports System.ComponentModel
Imports System.Text
Imports system.web
Imports System.Web.UI
Imports System.Web.UI.WebControls
"' <summary>
' Transition effect (Internet Explorer only)
"Drag the control onto a page; When the page is exited, the next page will pass through the transition
"" Effect (gradient Wipe) to display
"' </summary>
"' <remarks></remarks>
Public Class Ccpagetransitition_gradientwipe
Inherits WebControl
Private Sub Ccpagetransitition_gradientwipe_init (ByVal sender as Object,
ByVal e as System.EventArgs) Handles Me.init
Me.Width = 20
Me.height = 20
End Sub
You will notice that we did not import System.Web.UI.Design into this class because there is no possible design-time visualization for this control. You may also notice that the initialization of the control is used to set the height and width of the control to its own 20 pixels. This is only required at design time to create some indication on the page's form (an empty box). This box does not appear on the Web form at run time.

After the class was initialized, I added the following declarations area. This area is used to store every private member variable in the class. The declaration for this area looks like this:

#Region "Declarations"
Private mduration as Single = 1
#End Region
As you can see, only one Private member variable is used in the class. Behind the declarations area, followed by the properties area, which looks like this:

#Region "Properties"
<category ("Gradient Wipe Transition") > _
<browsable (True) > _
<description ("Set The effect duration (typically 1 or 2)") > _
Public Property transitionduration () as single
Get
Return mduration
End Get
Set (ByVal value as single)
Mduration = value
End Set
End Property
#End Region
This property is used to set the length of time the page transition effect occurs. Next, let's take a look at the code for the build (redering) area block:

#Region "Rendering"
Protected Overrides Sub rendercontents (ByVal writer as System.Web.UI.HtmlTextWriter)
Try
Dim SB as New StringBuilder
Sb. Append ("<meta http-equiv= ' Page-exit '")
Sb. Append ("Content= ' Progid:dximagetransform.") _
Microsoft.gradientwipe (duration= "& Transitionduration.tostring")
& ") '/> ')
Writer. RenderBeginTag (Htmltextwritertag.div)
Writer. Write (sb.) ToString ())
Writer. RenderEndTag ()
Catch ex as Exception
Writer. RenderBeginTag (Htmltextwritertag.div)
Writer. Write ("Gradient Wipe Transition Control")
Writer. RenderEndTag ()
End Try
End Sub
#End Region
End Class
This part of the code is fairly straightforward, the RenderContents subroutine is overloaded, and the new content is included in a try-catch block. Although I did not handle any errors (in the case of an error), I only wrote the string "gradient Wipe Transition control" into a div as a placeholder for controls that can be placed in this.

The code within the try block uses only a string builder to format text that we want to place directly in the source of the Web page at run time. The code contained in the string constructor is used to establish the request, which associates the page exit event with the page filter effect. You may also notice that the Duration property is passed to the string constructor to set the value of the duration parameter used by the filter.

After the string builder is configured, the contents of the string constructor are written to the page. Whenever this or any other page transition control in the sample class library is added to a page, the page exits to display the same properties; As a result, the next page will display the transition effect whenever the user leaves the page.

　　 v. Conclusion

This is the end of it! In fact, I suggest you look at other controls and experiment with them one at a test site. There are some other filtering effects and page transitions available, and I think you'll want to expand the library further; There are other properties that need to be discussed further for filtering. Finally, I wish you a happy programming!