Appearance Customization

• Dec 17, 2020
• 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.

   

  

  • ASPX

  <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.

  Elements	Visibility	Appearance	Spacing	Alignment
  Add Button	ASPxUploadControl.ShowAddRemoveButtons	ASPxUploadControl.ButtonStyle, ASPxUploadControl.AddButton	ASPxUploadControl.AddUploadButtonsSpacing	ASPxUploadControl.AddUploadButtonsHorizontalPosition
  Cancel Button	ASPxUploadControl.ShowProgressPanel	ASPxUploadControl.ButtonStyle, ASPxUploadControl.CancelButton	ASPxUploadControl.CancelButtonSpacing	ASPxUploadControl.CancelButtonHorizontalPosition
  Remove Button	ASPxUploadControl.ShowAddRemoveButtons	ASPxUploadControl.ButtonStyle, ASPxUploadControl.RemoveButton	ASPxUploadControl.RemoveButtonSpacing	-
  Upload Button	ASPxUploadControl.ShowUploadButton	ASPxUploadControl.ButtonStyle, ASPxUploadControl.UploadButton	ASPxUploadControl.AddUploadButtonsSpacing	ASPxUploadControl.AddUploadButtonsHorizontalPosition
  Browse Button	-	ASPxUploadControl.BrowseButton, ASPxUploadControl.BrowseButtonStyle	ASPxUploadControl.FileInputSpacing	-
  Progress Bar	ASPxUploadControl.ShowProgressPanel	ASPxUploadControl.ProgressBarStyle, ASPxUploadControl.ProgressBarIndicatorStyle	-	-
  Text Box	-	ASPxUploadControl.TextBoxStyle	ASPxUploadControl.FileInputSpacing	-
  File List	UploadAdvancedModeSettings.EnableFileList	ASPxUploadControl.FileListStyle	-	-

   

  The code sample below demonstrates how you can customize the upload control appearance via control properties. The image below shows the result.

   

  

  • ASPX

  <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.

   

  

  • ASPX

  <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>