Link to home
Start Free TrialLog in
Avatar of homeshopper
homeshopperFlag 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
Avatar of copyPasteGhost
copyPasteGhost
Flag of Canada image

Avatar of 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"
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
Thanks, the last link is easier to understand.
I'll give the vb.net menu control a try.
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
    '****************************************************
lbxSuites.DataSource = New String() {"one", "two", "three"}
should be  lbxSuites.DataSource = dt
are you sure you are using a asp.net menu control?
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
    '****************************************************
ASKER CERTIFIED SOLUTION
Avatar of copyPasteGhost
copyPasteGhost
Flag of Canada image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial