Avatar of homeshopper
homeshopper
Flag for United Kingdom of Great Britain and Northern Ireland asked on

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

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
Visual Basic.NETASP.NET

Avatar of undefined
Last Comment
copyPasteGhost

8/22/2022 - Mon
copyPasteGhost

homeshopper

ASKER
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"
copyPasteGhost

Your help has saved me hundreds of hours of internet surfing.
fblack61
copyPasteGhost

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
homeshopper

ASKER
Thanks, the last link is easier to understand.
I'll give the vb.net menu control a try.
homeshopper

ASKER
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
    '****************************************************
⚡ FREE TRIAL OFFER
Try out a week of full access for free.
Find out why thousands trust the EE community with their toughest problems.
homeshopper

ASKER
lbxSuites.DataSource = New String() {"one", "two", "three"}
should be  lbxSuites.DataSource = dt
copyPasteGhost

are you sure you are using a asp.net menu control?
homeshopper

ASKER
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
    '****************************************************
Experts Exchange is like having an extremely knowledgeable team sitting and waiting for your call. Couldn't do my job half as well as I do without it!
James Murphy
ASKER CERTIFIED SOLUTION
copyPasteGhost

THIS SOLUTION ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
See Pricing Options
Start Free Trial
GET A PERSONALIZED SOLUTION
Ask your own question & get feedback from real experts
Find out why thousands trust the EE community with their toughest problems.