The appearance of the panelbar can be set entirely with images, without using skins or custom CSS styles.
The RadPanelItem class exposes the ImageUrl and ImageOverUrl properties. These allow you to have one image for the initial state of a panel item and another image for the hover state.
Example
The panelbar in Pic. 1 is entirely composed of images, using the ImageUrl and ImageOverUrl properties. The Skin property is not defined.
| ASPX |
 Copy Code |
|
<rad:RadPanelBar id="RadPanelBar1" runat="server" Skin="None">
<Items>
<rad:RadPanelItem ImageUrl="Images/Products.gif" ImageOverUrl="Images/ProductsOver.gif">
<Items>
<rad:RadPanelItem ImageUrl="Images/Flowers.gif" ImageOverUrl="Images/FlowersOver.gif"/>
<rad:RadPanelItem ImageUrl="Images/Pots.gif" ImageOverUrl="Images/PotsOver.gif"/>
<rad:RadPanelItem ImageUrl="Images/Books.gif" ImageOverUrl="Images/BooksOver.gif"/>
<rad:RadPanelItem ImageUrl="Images/Antiques.gif" ImageOverUrl="Images/AntiquesOver.gif"/>
</Items>
</rad:RadPanelItem>
<rad:RadPanelItem ImageUrl="Images/Services.gif" ImageOverUrl="Images/ServicesOver.gif">
<Items>
<rad:RadPanelItem ImageUrl="Images/Flowers.gif" ImageOverUrl="Images/FlowersOver.gif"/>
<rad:RadPanelItem ImageUrl="Images/Pots.gif" ImageOverUrl="Images/PotsOver.gif"/>
<rad:RadPanelItem ImageUrl="Images/Books.gif" ImageOverUrl="Images/BooksOver.gif"/>
<rad:RadPanelItem ImageUrl="Images/Antiques.gif" ImageOverUrl="Images/AntiquesOver.gif"/>
</Items>
</rad:RadPanelItem>
<rad:RadPanelItem ImageUrl="Images/Company.gif" ImageOverUrl="Images/CompanyOver.gif">
<Items>
<rad:RadPanelItem ImageUrl="Images/Flowers.gif" ImageOverUrl="Images/FlowersOver.gif"/>
<rad:RadPanelItem ImageUrl="Images/Pots.gif" ImageOverUrl="Images/PotsOver.gif"/>
<rad:RadPanelItem ImageUrl="Images/Books.gif" ImageOverUrl="Images/BooksOver.gif"/>
<rad:RadPanelItem ImageUrl="Images/Antiques.gif" ImageOverUrl="Images/AntiquesOver.gif"/>
</Items>
</rad:RadPanelItem>
</Items>
</rad:RadPanelBar> |