Solved

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

Posted on 2010-09-13
10
1,163 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
Instantly Create Instructional Tutorials

Contextual Guidance at the moment of need helps your employees adopt to new software or processes instantly. Boost knowledge retention and employee engagement step-by-step with one easy solution.

 
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

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Question has a verified solution.

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

ASP.Net to Oracle Connectivity Recently I had to develop an ASP.NET application connecting to an Oracle database.As I am doing it first time ,I had to solve several problems. This article will help to such developers  to develop an ASP.NET client…
The ECB site provides FX rates for major currencies since its inception in 1999 in the form of an XML feed. The files have the following format (reducted for brevity) (CODE) There are three files available HERE (http://www.ecb.europa.eu/stats/exch…
Michael from AdRem Software explains how to view the most utilized and worst performing nodes in your network, by accessing the Top Charts view in NetCrunch network monitor (https://www.adremsoft.com/). Top Charts is a view in which you can set seve…
Monitoring a network: why having a policy is the best policy? Michael Kulchisky, MCSE, MCSA, MCP, VTSP, VSP, CCSP outlines the enormous benefits of having a policy-based approach when monitoring medium and large networks. Software utilized in this v…

627 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