CaptchaImageProperties.Height Property

Gets or sets the challenge image‘s height.

Namespace: DevExpress.Web.Captcha

Assembly: DevExpress.Web.v24.1.dll

NuGet Package: DevExpress.Web

Declaration

C#

[DefaultValue(80)]
public int Height { get; set; }

VB.NET

<DefaultValue(80)>
Public Property Height As Integer

Property Value

Type	Default	Description
Int32	80	A Unit that represents the challenge image’s height.

Remarks

Use the Height property to specify the height of the challenge image.

Example

The following part of the ASPxCaptcha - Custom Appearance online demo illustrates how to implement a captcha control with a custom appearance.

In this example, the control’s Refresh Button.ASPxCaptcha and Text Box.ASPxCaptcha are hidden, and their functionaliry is implemented in a custom manner using separate controls (the IMG element, ASPxLabel, ASPxTextBox).

JS

function GetRefreshButton() {
    return document.getElementById("refreshButton");
}        

function OnCaptchaBeginCallback(s, e) {
    var refreshButton = GetRefreshButton();
    refreshButton.src = "Images/refreshButtonAnimated.gif";
}

function OnCaptchaEndCallback(s, e) {
    var refreshButton = GetRefreshButton();
    refreshButton.src = "Images/refreshButton.gif"; 
    tbCode.SetValue("");
...   
}

ASPX

<img id="refreshButton" src="Images/refreshButton.gif" alt="Show another code" title="" 
class="refreshButton" onclick="captcha.Refresh();" />
...
<dx:ASPxCaptcha ID="Captcha" runat="server" SkinID="dummy" ClientInstanceName="captcha" 
CodeLength="6">
    <ChallengeImage BackgroundColor="Transparent" ForegroundColor="#676767" BorderWidth="0"
        Height="72" />
    <ValidationSettings EnableValidation="False">
    </ValidationSettings>
    <TextBox Visible="False" />
    <RefreshButton Visible="False">
    </RefreshButton>
    <LoadingPanel Enabled="False" />
    <ClientSideEvents BeginCallback="OnCaptchaBeginCallback" 
        EndCallback="OnCaptchaEndCallback" />
</dx:ASPxCaptcha>
...
<dx:ASPxLabel ID="lblCode" runat="server" AssociatedControlID="tbCode" Text="Type the code">
</dx:ASPxLabel>
...
<dx:ASPxTextBox ID="tbCode" runat="server" Width="200px" AutoCompleteType="Disabled"
    BackColor="Transparent" ClientInstanceName="tbCode">
    <Border BorderWidth="0px" />
</dx:ASPxTextBox>
...
<dx:ASPxButton ID="btnSubmit" runat="server" Text="Submit" UseSubmitBehavior="true"
    AutoPostBack="true" Width="175px">
</dx:ASPxButton>