Silverlight UI Rant #2 – ListBoxItem

Tonight’s recipient of my UI Rant is the Silverlight 2 ListBox, or more specifically, the ListBoxItem.  A client recently asked me to provide an alternating row style like the DataGrid for the ListBox.  Now, if you’ve ever tried to add a border or background to your ListBoxItem, you’ve seen this:

DefaultlListBox

No problem, you say, I will simply set the HorizontalContentAlignment of my ListBox to Stretch and all should be good.  When that doesn’t do it, you’ll probably try creating/editing the ListBox’s ItemTemplate….maybe adding a Grid and setting its HorizontalAlignment to Stretch.  This too will fail.

Turns out, the problem is not with your ItemTemplate or even with the ListBox itself.  The issue is in the container that actually contains your Item and that is the ListBoxItem.  The property on the ListBox that allows you to set a custom style for this ListBoxItem is called ItemContainerStyle.  Armed with this information, you quickly throw together a style for your ListBoxItem, maybe like so:

<Style TargetType=”ListBoxItem” x_Key=”ItemContainerStyle”>
<Setter Property=”Padding” Value=”3″ />
<Setter Property=”HorizontalContentAlignment” Value=”Stretch” />
<Setter Property=”VerticalContentAlignment” Value=”Top” />
<Setter Property=”Background” Value=”Transparent” />
<Setter Property=”BorderThickness” Value=”1″ />
</Style>

And then add that to your ListBox, like so:

<ListBox Margin=”8,8,10,8″ x_Name=”defaultListBox” ItemsSource=”{Binding}”
ItemTemplate=”{StaticResource EmployeeItemTemplate}”
ItemContainerStyle=”{StaticResource ItemContainerStyle}”/>

Hit F5 and just about the time you congratulate yourself on solving this, the Silverlight Loading Animation will finish and you’ll discover that your ListBox still looks exactly like the original screenshot above.  So, what happened?

What happened is that the default ControlTemplate for the ListBoxItem has its HorizontalAlignment hard-coded to Left and no matter what you do when setting the properties, it will always b
e Left.  If you
‘ll do a little diving into the full default style for ListBoxItem, courtesy of SilverlightDefaultStyleBrowser (highly recommended), you’ll see exactly what I’m talking about in the ContentPresenter’s HorizontalAlignment property:

ListBoxItemDefaultStyle

The good news is that because you have the ability to replace the Template of any control in Silverlight, you can simply “correct” this hard-coded problem by replacing the hard-coded Left value for HorizontalAlignment with {TemplateBinding HorizontalContentAlignment}, so your final new Style would look like this:

<Style TargetType=”ListBoxItem” x_Key=”StretchedItemContainerStyle”>
<Setter Property=”Padding” Value=”3″ />
<Setter Property=”HorizontalContentAlignment” Value=”Stretch” />
<Setter Property=”VerticalContentAlignment” Value=”Top” />
<Setter Property=”Background” Value=”Transparent” />
<Setter Property=”BorderThickness” Value=”1″ />
<Setter Property=”TabNavigation” Value=”Local” />
<Setter Property=”Template”>
<Setter.Value>
<ControlTemplate TargetType=”ListBoxItem”>
<Grid Background=”{TemplateBinding Background}”>
<vsm:VisualStateManager.VisualStateGroups>
<!– removed VSM code for brevity  –>
</vsm:VisualStateManager.VisualStateGroups>
<Rectangle x_Name=”fillColor” Opacity=”0″ Fill=”#FFBADDE9″ IsHitTestVisible=”False” RadiusX=”1″ RadiusY=”1″  />
<Rectangle x_Name=”fillColor2″ Opacity=”0″ Fill=”#FFBADDE9″ IsHitTestVisible=”False” RadiusX=”1″ RadiusY=”1″  />
<ContentPresenter x_Name=”contentPresenter” Content=”{TemplateBinding Content}” ContentTemplate=”{TemplateBinding ContentTemplate}” HorizontalAlignment=”{TemplateBinding HorizontalContentAlignment}” Margin=”{TemplateBinding Padding}”  />
<Rectangle x_Name=”FocusVisualElement” Stroke=”#FF6DBDD1″ StrokeThickness=”1″ Visibility=”Collapsed”  Ra
diusX=”1″
RadiusY=”1″  />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

Now your ListBoxItem will respect the value you are setting for its HorizontalContentAlignment in your Setter above and your ListBox will finally look like this:

CorrectedListBox

Hope that saves someone a little frustration.  I’ll continue on to adding the alternating row style in another post.

Here is the live sample.

Here is the source code.

Atmosera Web Help Desk or WHD

In an effort to continue delivering more value to our customers, we implemented a web-based application built on the SolarWinds Web Help Desk software (https://www.solarwinds.com/help-desk-software). Our goal is to improve the ability for our customers to create tickets, view their status, and communicate more efficiently with our team. We are confident this will result in faster resolutions and clear communication.

  • Below you can find the following details About Atmosera Web Help Desk (WHD):
    • How Can I Get Access to Atmosera’s Web Help Desk?
    • How Many WHD User Accounts Can My Company Get?
    • Known Issues with Multiple Microsoft Logins
    • Can I Get More User Accounts If I Need Them?
    • How Can I Change Who Is an WHD User?
    • How Can I See All Tickets for my Company?
    • What Is a Super User?
    • Can I Still Open a Trouble Ticket by Sending an Email to support@atmosera.com?
    • What Will Happen to the Current Trouble Ticket System?
    • Can I Send Updates to a Distribution List?
  • Tutorials
    • Create a Ticket
    • Manage Tickets
    • Reset Your Office 365 Password
    • Forward Emails
    • Mobile Access Using an iPhone or Android device

How Can I Get Access to Atmosera’s Web Help Desk?

Web Help Desk (WHD) Users for each customer will receive login instructions via email when their account is created.

Access Portal

How Many WHD User Accounts Can My Company Get?

Contact your Customer Success Manager (CSM) to identify how many logins you will receive.

Atmosera’s policy is that these accounts are assigned to individuals who will receive login credentials.

If you have a third party vendor who needs to have access, additional seats will be required.

An 0ffice 365 mailbox account will be created for each Web Help Desk (WHD) User. The mailbox address will be [clientID]-[firstInitial][lastname]@atmosera-portal.com. (e.g. Craig Smith at company id 12345 would be 12345-csmith@atmosera-portal.com). The new Web Support System will send emails to this email address and will only accept emails from that address. You can configure this email address to forward to your normal address; however, email responses on tickets back into Web Support will need to come from the email address that we provide; otherwise they will be denied. You do have the option to just update your tickets via the WHD Portal also.

How Can I Get Access to Atmosera's Web Help Desk?

Web Help Desk (WHD) Users for each customer will receive login instructions via email when their account is created.
The portal can be accessed at https://websupport.atmosera.com/

How Many WHD User Accounts Can My Company Get?

Contact your Customer Success Manager (CSM) to identify how many logins you will receive.
Atmosera's policy is that these accounts are assigned to individuals who will receive login credentials.

If you have a third party vendor who needs to have access, additional seats will be required.

An 0ffice 365 mailbox account will be created for each Web Help Desk (WHD) User. The mailbox address will be [clientID]-[firstInitial][lastname]@atmosera-portal.com. (e.g. Craig Smith at company id 12345 would be 12345-csmith@atmosera-portal.com). The new Web Support System will send emails to this email address and will only accept emails from that address. You can configure this email address to forward to your normal address; however, email responses on tickets back into Web Support will need to come from the email address that we provide; otherwise they will be denied. You do have the option to just update your tickets via the WHD Portal also.

Known Issues with Multiple Microsoft Logins

The portal uses Microsoft credentials to log you in. If you use other Microsoft accounts such as Officer 365, you will likely need to log out before attempting to login to the portal. Some users are experiencing issues related to conflicts between multiple logins in issue. Logging out and restarting your browser will take care of any such conflicts.

Can I Get More User Accounts If I Need Them?

Yes, any authorized Web Help Desk (WHD) User can log into WHD and submit a ticket to have a new user created.
We need first name, last name, email, and phone number.
The process takes up to two (2) business days to complete.

How Can I Change Who Is an WHD User?

Existing Web Help Desk (WHD) Users can submit a request using WHD to remove WHD Users.
The process takes up to two (2) business days to complete.

How Can I See All Tickets for my Company?

By default, all Web Help Desk (WHD) Users are only able to see the tickets they created using their account.
Any WHD User can be promoted to Super User status which allows them to see all tickets for their company.
To enable Super Users, submit a ticket or contact your Customer Success Manager (CSM) and identify which WHD Users need to be promoted to Super User status.

What Is a Super User?

A Super User is granted rights to see all tickets for their company regardless of which WHD User created them.

Can I Still Open a Trouble Ticket by Sending an Email to support@atmosera.com?

Once a customer has been moved to Web Help Desk (WHD), users can only create tickets using the Portal.
Sending emails to support@atmosera.com will result in the sender receiving an auto-response pointing them to the Portal.

What Will Happen to the Current Trouble Ticket System?

The current system based on BMC Footprints will be retired shortly after the launch of the new WHD application.
We will maintain tickets already created ahead of the cut over and work them to resolution.
When WHD goes live, all new tickets will be generated and managed with the new application.

Can I Send Updates to a Distribution List?

Yes, Web Help Desk uses an Office 365 account to login WHD Users.
Office 365 accounts have the ability to forward all messages to another email address.
Follow the directions below to setup email forwarding using your Office 365 account.
This process makes it possible for Web Help Desk (WHD) Users to forward correspondence to another email and/or a distribution list.

 


Create a Ticket

Access the Atmosera WHD Portal: https://websupport.atmosera.com/

Click on the image to see a larger view

 


Manage Tickets

Access the Atmosera WHD Portal: https://websupport.atmosera.com/

Click on the image to see a larger view

 


Reset Your Office 365 Password

Access the Office 365 Portal: https://login.microsoftonline.com

Click on the image to see a larger view

 


Forward Emails

Access the Office 365 Mailbox Settings: https://www.office.com

Click on the image to see a larger view

 



Mobile Access Using a iPhone or Android Device

Access the Atmosera WHD Portal: https://websupport.atmosera.com/

Click on the image to see a larger view

We deliver solutions that accelerate the value of Azure.

Ready to experience the full power of Microsoft Azure?

Start Today

Blog Home

Stay Connected

Upcoming Events

All Events