Tag Archives: listbox

Windows Phone 7 – ContextMenu and ListBoxes

The Silverlight Windows Phone Toolkit makes it trivially easy to add a context menu to most Windows Phone 7 controls; all you need to do, really, is add the attached dependency property to the control you want to target with the long-hold gesture, and you’re done. So if you’re looking to add a context menu for items within a list box, you just need to include it as part of the list item template, as follows:

[sourcecode language="xml"]

<ListBox x:Name="MyListBox" ItemsSource="{Binding MyItems}">
<ListBox.ItemTemplate>
<DataTemplate>
<Grid>
<!– other content of your listitem goes here–>
<toolkit:ContextMenuService.ContextMenu>
<toolkit:ContextMenu Name="MyContextMenu" Opened="MyContextMenu_Opened">
<toolkit:MenuItem Header="action" Click="contextMenuAction_Click"/>
</toolkit:ContextMenu>
</toolkit:ContextMenuService.ContextMenu>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>

[/sourcecode]

Note that you’ll need to have installed the Silverlight Windows Phone Toolkit, and added the appropriate namespace/reference at the top of your XAML file:

[sourcecode languge="xml"]
xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"
[/sourcecode]

And to find out which ListItem the context menu was raised from, you can use the following code (try it out in Debug mode first to make sure, though!)

[sourcecode language="c-sharp"]
ListBoxItem contextMenuListItem = MyListBox.ItemContainerGenerator.ContainerFromItem((sender as ContextMenu).DataContext) as ListBoxItem;
[/sourcecode]

The controls in the Silverlight WP7 toolkit are excellent, and I highly recommend making full use of them.

Windows Phone 7 ListBoxItem Full Horizontal Fill

Dear Windows Phone 7,

Why is it not enough to set the HorizontalContentAlignment to Stretch on ListBox.ItemContainerStyle in order to allow my ListBoxItems stretch and fill the available space? It apparently works with Silverlight 3.

[sourcecode language="xml"]
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
</Style>
</ListBox.ItemContainerStyle>
[/sourcecode]

Thank you, Dan DeSousa, for providing the solution – it turns out that you also need to override the entire Template.

[sourcecode language="xml"]

<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
<Setter Property="HorizontalAlignment" Value="Stretch" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListBoxItem">
<ContentControl x:Name="ContentContainer"
ContentTemplate="{TemplateBinding ContentTemplate}"
Content="{TemplateBinding Content}"
HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" />
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ListBox.ItemContainerStyle>
[/sourcecode]

Note that I chose not to include most of the bindings for the Template and only implemented the ones I cared about (Content, ContentTemplate and HorizontalContentAlignment).

Now that the RTM WP7 Dev Tools have been released, there is a pretty high chance that this blog post was already obsolete before I made it. Oh well!

EDIT: And just like that, they fixed it; well, they fixed having to define your own template (it did seem very much like a bug). Now all you need to do for horizontal fill is set the ItemContainerStyle to have HorizontalContentAlignment=”Stretch”, as in the first code snippet above, and everything will work just fine.