Question

I have a windows phone 7 app with some xaml that looks like:

<Grid x:Name="ContentGrid" Grid.Row="1">
    <ItemsControl x:Name="MyView" ItemTemplate="{StaticResource MyInner}"/>
</Grid>

The item template here looks like:

<DataTemplate x:Key="MyInner">
    <ItemsControl ItemsSource="{Binding}" ItemTemplate="{StaticResource MyInner_Item}">
        <ItemsControl.ItemsPanel>
            <ItemsPanelTemplate>
                <StackPanel Orientation="Horizontal"/>
            </ItemsPanelTemplate>
        </ItemsControl.ItemsPanel>
    </ItemsControl>
</DataTemplate>

And finally, the MyInner_Item template looks like:

<DataTemplate x:Key="MyInner_Item">
    <Button x:Name="MyButton">
        <Button.Template>
            <ControlTemplate>
                <Border HorizontalAlignment="Center" VerticalAlignment="Center" x:Name="myborder">

                    <Image Source="{Binding Path=ImageUri}" Width="{Binding Path=Width}" Height="{Binding Path=Height}" Stretch="Fill" />
                </Border>
            </ControlTemplate>
        </Button.Template>
    </Button>
</DataTemplate>

So, it’s an ItemsControl, which contains an ItemsControl, which contains buttons. This essentially creates a 2D array of buttons.

What I want to do is add an event handler to the Click event of the buttons.

Here’s the catch: the code that sits behind this is written in F#. I can’t, to the best of my knowledge, specify my event handler in the XAML, as F# doesn’t talk to WPF in any nice way. So I need to add my event handler(s) manually in code.

Is there an easy way of doing this?

Currently, I have some F# which looks like:

let myView : ItemsControl = this?MyView
do myView.ItemsSource <- viewModel.BoardData 

Here, the BoardData is a list of lists.

I was wondering if it’s possible to loop through the controls in the ItemsControl, to add my event handlers? I’m having a bit of trouble doing this though. For example, in the following:

let container = myView.ItemContainerGenerator.ContainerFromItem(myView.Items.[0])

…sets container to null. In fact, all the methods I’ve tried from myView.ItemContainerGenerator returns null.

So, how should I go about attaching my event handler, so that I can respond to the buttons being clicked?

Answer 1

I have not done any Windows 7 Phone development, but I have done plenty of XAML + Silverlight development with C# and now I’m getting into doing some F# development. The approach I would take is by not using event handler’s at all. Since you are using a button, make a class that derives from ICommand and add that type as a public property on your ViewModel so you could bind it to the Command property of the button. The benefits of using the ICommand interface over event handlers is that you could also have a condition on when the button is enabled to do the action.

Also, take notice that when you are doing binding expressions within (i.e. ItemTemplate) items in an ItemsControl control, the scope of what properties you can bind to are reduced to the properties of the current item. So all of the properties of the ViewModel are out of scope, unless you specify it fully i.e. <Button Command={Binding Source=ViewModel, Path=Property1.Property2.etc} />. Let me know if this helped.