Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

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

Posted on 2010-09-13
10
Medium Priority
?
1,202 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
  • 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
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
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 2000 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

Ask an Anonymous Question!

Don't feel intimidated by what you don't know. Ask your question anonymously. It's easy! Learn more and upgrade.

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…
Exchange organizations may use the Journaling Agent of the Transport Service to archive messages going through Exchange. However, if the Transport Service is integrated with some email content management application (such as an anti-spam), the admin…
In response to a need for security and privacy, and to continue fostering an environment members can turn to for support, solutions, and education, Experts Exchange has created anonymous question capabilities. This new feature is available to our Pr…

916 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