Appearance Customization
- 3 minutes to read
ASPxUploadControl provides you with full control on its appearance customization, including an ability to define its browse button and text box appearances. This also means that our stunning DevExpress Themes (such as Office 2010, Red Wine, and others from the available themes list) are fully supported, which allows you to make your application more polished and attractive.
ASPxUploadControl offers you multiple ways of customizing its appearance.
Using DevExpress Themes
DevExpress ASP.NET Controls are shipped with a number of predefined themes. This provides you with centralized control over the appearance of several controls or the entire website. You can easily apply a theme to DevExpress controls, individually or globally.
The code sample below demonstrates how you can customize the upload control appearance using themes. In particular, the "RedWine" theme is assigned to ASPxUploadControl using its ASPxWebControl.Theme property. The image below shows the result.
<dx:ASPxUploadControl ID="ASPxUploadControl1" runat="server" Theme="RedWine" ShowAddRemoveButtons="True" ShowProgressPanel="True" ShowUploadButton="True"> </dx:ASPxUploadControl>
Customizing Individual UI Elements
ASPxUploadControl allows you to customize the appearance of individual elements. The table below lists the main members that affect element appearance.
The code sample below demonstrates how you can customize the upload control appearance via control properties. The image below shows the result.
<dx:ASPxUploadControl ID="ASPxUploadControl1" runat="server" ShowAddRemoveButtons="True" ShowProgressPanel="True" ShowUploadButton="True"> <RemoveButton> <Image Url="~/Delete.png"> </Image> </RemoveButton> <TextBoxStyle> <Border BorderColor="#CC6699" /> </TextBoxStyle> <BrowseButtonStyle BackColor="#990033" ForeColor="White"> <Border BorderColor="#990033" /> </BrowseButtonStyle> <ButtonStyle ForeColor="#990033"> </ButtonStyle> <ProgressBarStyle BackColor="#990033"> <Border BorderColor="#990033" /> </ProgressBarStyle> <ProgressBarIndicatorStyle BackColor="#FFCCFF"> </ProgressBarIndicatorStyle> </dx:ASPxUploadControl>
Choosing Appearance Mode
You can use a single property to specify whether the control should be rendered using a previous (native) or a new (fully customizable) appearance mode. If the ASPxUploadControl.Native property is set to true, the file input element is rendered as a standard HTML input element. In this case, it is painted in the Windows(tm) native style and the element's appearance depends upon system settings only. The other control elements can be customized in either of the two ways described above.
The code sample below demonstrates how you can customize the upload control appearance via control properties when the Native property is set to true. The image below shows the result.
<dx:ASPxUploadControl ID="ASPxUploadControl1" runat="server" ShowAddRemoveButtons="True" ShowProgressPanel="True" ShowUploadButton="True" Native="True"> <RemoveButton> <Image Url="~/Delete.png"> </Image> </RemoveButton> <ButtonStyle ForeColor="#990033"> </ButtonStyle> <ProgressBarStyle BackColor="#990033"> <Border BorderColor="#990033" /> </ProgressBarStyle> <ProgressBarIndicatorStyle BackColor="#FFCCFF"> </ProgressBarIndicatorStyle> </dx:ASPxUploadControl>