Solved

add background image to listbox control in web application with vb.net

Posted on 2010-09-13
10
1,152 Views
Last Modified: 2012-06-27
I am programatically trying to add a background image to each item in a listbox control. The first attached screen shot is a mockup of what I am trying to achieve.
The second screenshot is what I have so far. I want the listbox at the bottom of the screen to display an image for each item as per first screen shot.
The full code is as per attached code snippet.
Thanks in advance for any help given.
An extract of the code is below:
'*******************************************
    Private Sub LoadSuites()
        Dim dt As New DataTable
        Dim cmd As New SqlCommand
        'dt = GetDataTable(AppConnection, _
        '                 "usp_GetSuites", _
        '                 "@UserID", UserID, _
        '                 "@CompanyID", CompanyID, _
        '                 "@Instance", Instance)
        HttpContext.Current.Session("connStringValue") = GetConnectionString2()
        Dim Conn As SqlConnection = New System.Data.SqlClient.SqlConnection(HttpContext.Current.Session("connStringValue") & ";Initial Catalog=" & sDBName)
        Conn.Open()
        cmd.Connection = Conn
        cmd.CommandText = "usp_GetSuites"
        cmd.CommandType = CommandType.StoredProcedure
        'add command parameters
        cmd.Parameters.Add("@UserID", SqlDbType.Decimal, 18, 0)
        cmd.Parameters("@UserID").Value = UserID
        cmd.Parameters.Add("@CompanyID", SqlDbType.Decimal, 18, 0)
        cmd.Parameters("@CompanyID").Value = CompanyID
        cmd.Parameters.Add("@Instance", SqlDbType.VarChar, 14)
        cmd.Parameters("@Instance").Value = Instance
        Dim daloader As New SqlDataAdapter(cmd)
        Dim msgColor As New TableCell
        daloader.Fill(dt)
        '*******************************************
        With lbxSuites
            '.Attributes.Add("onmouseover", "this.style.cursor='pointer';")
            .Attributes.Add("onmouseout", "this.style.cursor='default';")
            '*******************************************
            '.Attributes.Add("style", "display: visible;")
            .Attributes.Add("onmouseover", "this.sytle.cursor='arrow';")
            '.Style("background") = "Tan"
            .Style("background-image") = "../Includes/Images/bg_button.png"
            '*******************************************
            .DataSource = dt
            .DataTextField = "Suite"
            .DataValueField = "Suite"
            '.CssClass = "MenuHeader"
            .DataBind()
            ' The listbox number of rows is set to 2 as asp.net renders
            ' listboxes with rows of 1 and below as DropDownlists
            If dt.Rows.Count > 2 Then
                .Rows = dt.Rows.Count
            Else
                .Rows = 2
            End If
            If dt.Rows.Count = 1 Then .Items(0).Selected = True
        End With
    End Sub
    '****************************************************

QLNewMenu.txt
5.png
imgD069.jpg
0
Comment
Question by:homeshopper
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 5
  • 5
10 Comments
 
LVL 13

Expert Comment

by:copyPasteGhost
ID: 33664340
0
 

Author Comment

by:homeshopper
ID: 33664597
seems complex to follow, I am using web application aspx page & codebehind.
I thought the following would work, but does not show background image.

With lbxSuites
.Style("background-image") = "../Includes/Images/bg_button.png"

I found out how to change color on background with
.Style("background") = "Tan"
0
 
LVL 13

Expert Comment

by:copyPasteGhost
ID: 33664696
0
Salesforce Has Never Been Easier

Improve and reinforce salesforce training & adoption using WalkMe's digital adoption platform. Start saving on costly employee training by creating fast intuitive Walk-Thrus for Salesforce. Claim your Free Account Now

 
LVL 13

Expert Comment

by:copyPasteGhost
ID: 33664776
Sorry that is for windows forms..

There is currently no way to use a listbox control to do what you are trying to achieve, Unless you do some crazy stuff like the example I gave you.

Why don't you make it look like an image? Allow me to explain. You can put a purple background, set the font to white and you will get your look.

but I would recommend to use a menu contro from .NET And not a listbox.

http://msdn.microsoft.com/en-us/library/ecs0x9w5(VS.80).aspx

Thanks,
CPG
0
 

Author Comment

by:homeshopper
ID: 33665170
Thanks, the last link is easier to understand.
I'll give the vb.net menu control a try.
0
 

Author Comment

by:homeshopper
ID: 33674034
Made a start with a Dynamic data driven menu control
but getting error:HierarchicalDataBoundControl only accepts data sources that implement IHierarchicalDataSource or IHierarchicalEnumerable.
Thanks in advance for any help given.
Code so far is below:
<!--START PAGE SECTION-->
<asp:Menu ID="lbxSuites" runat="server">
 </asp:Menu>
 <!--END PAGE SECTION CODE-->
'*******************************************
    Private Sub LoadSuites()
        Dim dt As New DataTable
        Dim cmd As New SqlCommand
        Dim DR As DataRow
        Dim tr As TableRow = Nothing, td As TableCell = Nothing
        'dt = GetDataTable(AppConnection, _
        '                 "usp_GetSuites", _
        '                 "@UserID", UserID, _
        '                 "@CompanyID", CompanyID, _
        '                 "@Instance", Instance)
        HttpContext.Current.Session("connStringValue") = GetConnectionString2()
        Dim Conn As SqlConnection = New System.Data.SqlClient.SqlConnection(HttpContext.Current.Session("connStringValue") & ";Initial Catalog=" & sDBName)
        Conn.Open()
        cmd.Connection = Conn
        cmd.CommandText = "usp_GetSuites"
        cmd.CommandType = CommandType.StoredProcedure
        'add command parameters
        cmd.Parameters.Add("@UserID", SqlDbType.Decimal, 18, 0)
        cmd.Parameters("@UserID").Value = UserID
        cmd.Parameters.Add("@CompanyID", SqlDbType.Decimal, 18, 0)
        cmd.Parameters("@CompanyID").Value = CompanyID
        cmd.Parameters.Add("@Instance", SqlDbType.VarChar, 14)
        cmd.Parameters("@Instance").Value = Instance
        Dim daloader As New SqlDataAdapter(cmd)
        Dim msgColor As New TableCell
        daloader.Fill(dt)
        '*******************************************
        'For Each DR In dt.Rows
        'If dt.Rows.Count = 0 Then
        ' Add "Modules" heading
        'tr = New TableRow
        'td = New TableCell
        'td.Attributes("align") = "center"
        'td.CssClass = "Button"
        'td.Width = Unit.Parse("100%")
        'td.Text = "MODULES:"
        'tr.Cells.Add(td)
        'dt.Rows.Add(tr)
        'Else

        'tr = New TableRow
        'td = New TableCell
        'td.VerticalAlign = VerticalAlign.Top
        'td.CssClass = "Menu"
        'td.Attributes("onmouseover") = "MenuMouseOver(this);"
        'td.Attributes("onmouseout") = "MenuMouseOut(this);"
        'tr.Cells.Add(td)
        'End If
        'Next
        lbxSuites.DataSource = New String() {"one", "two", "three"}
        lbxSuites.DataBind()
    End Sub
    '****************************************************
0
 

Author Comment

by:homeshopper
ID: 33674042
lbxSuites.DataSource = New String() {"one", "two", "three"}
should be  lbxSuites.DataSource = dt
0
 
LVL 13

Expert Comment

by:copyPasteGhost
ID: 33674056
are you sure you are using a asp.net menu control?
0
 

Author Comment

by:homeshopper
ID: 33674175
using:
<asp:Menu ID="lbxSuites" runat="server">
 </asp:Menu>
could you please elaborate more on which control to use?
I was previously using:
<asp:ListBox  ID="lbxSuites" runat="server"
OnSelectedIndexChanged = "lbxSuites_SelectedIndexChanged"
AutoPostBack ="true"
Width="100%">
</asp:ListBox>
Could not get background images on menuitems from database.
Code below:
'*******************************************
    Private Sub LoadSuites()
        Dim dt As New DataTable
        Dim cmd As New SqlCommand
        'dt = GetDataTable(AppConnection, _
        '                 "usp_GetSuites", _
        '                 "@UserID", UserID, _
        '                 "@CompanyID", CompanyID, _
        '                 "@Instance", Instance)
        HttpContext.Current.Session("connStringValue") = GetConnectionString2()
        Dim Conn As SqlConnection = New System.Data.SqlClient.SqlConnection(HttpContext.Current.Session("connStringValue") & ";Initial Catalog=" & sDBName)
        Conn.Open()
        cmd.Connection = Conn
        cmd.CommandText = "usp_GetSuites"
        cmd.CommandType = CommandType.StoredProcedure
        'add command parameters
        cmd.Parameters.Add("@UserID", SqlDbType.Decimal, 18, 0)
        cmd.Parameters("@UserID").Value = UserID
        cmd.Parameters.Add("@CompanyID", SqlDbType.Decimal, 18, 0)
        cmd.Parameters("@CompanyID").Value = CompanyID
        cmd.Parameters.Add("@Instance", SqlDbType.VarChar, 14)
        cmd.Parameters("@Instance").Value = Instance
        Dim daloader As New SqlDataAdapter(cmd)
        Dim msgColor As New TableCell
        daloader.Fill(dt)
        '*******************************************
        With lbxSuites
            '.Attributes.Add("onmouseover", "this.style.cursor='pointer';")
            .Attributes.Add("onmouseout", "this.style.cursor='default';")
            '*******************************************
            '.Attributes.Add("style", "display: visible;")
            .Attributes.Add("onmouseover", "this.sytle.cursor='arrow';")
            '.Style("background") = "Tan"
            .Style("background-image") = "../Includes/Images/bg_button.png"
            '*******************************************
            .DataSource = dt
            .DataTextField = "Suite"
            .DataValueField = "Suite"
            '.CssClass = "MenuHeader"
            .DataBind()
            ' The listbox number of rows is set to 2 as asp.net renders
            ' listboxes with rows of 1 and below as DropDownlists
            If dt.Rows.Count > 2 Then
                .Rows = dt.Rows.Count
            Else
                .Rows = 2
            End If
            If dt.Rows.Count = 1 Then .Items(0).Selected = True
        End With
    End Sub
    '****************************************************
0
 
LVL 13

Accepted Solution

by:
copyPasteGhost earned 500 total points
ID: 33674246
http://www.velocityreviews.com/forums/t360386-background-image-for-menu-control-in-asp-net-2-0-a.html

what you need to do is add the image via a css background.

you can use the Attributes property as you are already doing. do a search for

"VB.NET Menu Image Background CSS" should point you well in the right direction.

Thanks,
CPG

0

Featured Post

MS Dynamics Made Instantly Simpler

Make Your Microsoft Dynamics Investment Count  & Drastically Decrease Training Time by Providing Intuitive Step-By-Step WalkThru Tutorials.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Today is the age of broadband.  More and more people are going this route determined to experience the web and it’s multitude of services as quickly and painlessly as possible. Coupled with the move to broadband, people are experiencing the web via …
User art_snob (http://www.experts-exchange.com/M_6114203.html) encountered strange behavior of Android Web browser on his Mobile Web site. It took a while to find the true cause. It happens so, that the Android Web browser (at least up to OS ver. 2.…
Finding and deleting duplicate (picture) files can be a time consuming task. My wife and I, our three kids and their families all share one dilemma: Managing our pictures. Between desktops, laptops, phones, tablets, and cameras; over the last decade…

752 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question