Question

I am developing window phone 7 application in C#. I am new to the window phone 7 application. I am also new to the silverlight. I have taken the ListBox control in my xaml file & adding the many button controls to this listbox control dynamically. My xaml code is as follows

<phone:PhoneApplicationPage 
    x:Class="ExpenseMgrMobAppl.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"
    mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="768"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    SupportedOrientations="Portrait" Orientation="Portrait"
    shell:SystemTray.IsVisible="True">

    <!--LayoutRoot is the root grid where all page content is placed-->
    <Grid x:Name="LayoutRoot" Background="Transparent">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <!--TitlePanel contains the name of the application and page title-->
        <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
            <TextBlock x:Name="ApplicationTitle" Text="Expnse Manager" Style="{StaticResource PhoneTextNormalStyle}"/>
            <TextBlock x:Name="PageTitle" Text="Entry Details" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
        </StackPanel>

        <!--ContentPanel - place additional content here-->
        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0"> 

            <toolkit:DatePicker Name="EntryDate" ValueChanged="DatePicker_ValueChanged" Margin="267,0,0,552" />

            <ListBox x:Name="lstButtons" Margin="358,61,10,31" SelectionChanged="lstButtons_SelectionChanged" Width="80" Height="500">
                <ListBox.ItemTemplate>
                    <DataTemplate>
                        <StackPanel Orientation="Horizontal">
                            <Button Content="{Binding ElementName}" Width="50" HorizontalAlignment="Center"></Button>
                        </StackPanel>
                    </DataTemplate>
                </ListBox.ItemTemplate>
            </ListBox>

            <Button Content="Add" Height="72" HorizontalAlignment="Left" Margin="107,504,0,0" Name="Addbutton" VerticalAlignment="Top" Width="160" Click="Addbutton_Click" />
        </Grid>
    </Grid>

    <!--Sample code showing usage of ApplicationBar-->
    <!--<phone:PhoneApplicationPage.ApplicationBar>
        <shell:ApplicationBar IsVisible="True" IsMenuEnabled="True">
            <shell:ApplicationBarIconButton IconUri="/Images/appbar_button1.png" Text="Button 1"/>
            <shell:ApplicationBarIconButton IconUri="/Images/appbar_button2.png" Text="Button 2"/>
            <shell:ApplicationBar.MenuItems>
                <shell:ApplicationBarMenuItem Text="MenuItem 1"/>
                <shell:ApplicationBarMenuItem Text="MenuItem 2"/>
            </shell:ApplicationBar.MenuItems>
        </shell:ApplicationBar>
    </phone:PhoneApplicationPage.ApplicationBar>-->

</phone:PhoneApplicationPage>

In the above code everything is working file. Only the problem is that I am not able fire the method SelectionChanged=”lstButtons_SelectionChanged” . I am able to fire this method by clicking on the edge of area of the listbox control. When I click on the middle of the square of the button, the method does not fire. But when I click outside the area of the square of the button (the area which is in the right direction of the button & that area is near the edge of the area of listbox control) the method gets fired. This is I think because I am not clicking on the right area. I think I am not able to specify the right are for button click in my code & thats why the event is not firing.

I have another example of similar type where everything is working fine & event is also firing properly. The xaml for this example is as follows

<phone:PhoneApplicationPage 
    x:Class="WindowsPhoneNavigation.Views.Pictures.Default"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    SupportedOrientations="Portrait" Orientation="Portrait"
    mc:Ignorable="d" d:DesignHeight="768" d:DesignWidth="480"
    shell:SystemTray.IsVisible="True">

    <!--LayoutRoot is the root grid where all page content is placed-->
    <Grid x:Name="LayoutRoot" Background="Transparent">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <!--TitlePanel contains the name of the application and page title-->
        <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
            <TextBlock Text="{StaticResource AppName}" Style="{StaticResource PhoneTextNormalStyle}"/>
            <TextBlock Text="Images" Style="{StaticResource PhoneTextTitle1Style}"/>
        </StackPanel>

        <!--ContentPanel - place additional content here-->
        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
            <StackPanel Orientation="Vertical">
                <StackPanel Orientation="Horizontal" Margin="5">
                    <Button x:Name="btnRemoveSelection" Content="Remove Image" Click="btnRemoveSelection_Click" IsEnabled="False"/>
                </StackPanel>

                <ListBox x:Name="lstPictures" Width="450" Height="520" Margin="10" SelectionChanged="lstPictures_SelectionChanged">
                    <ListBox.ItemTemplate>
                        <DataTemplate>
                            <StackPanel Orientation="Horizontal">
                                <Image Source="{Binding Image}" Width="100" Stretch="Uniform" HorizontalAlignment="Center"/>
                                <TextBlock Text="{Binding Filename}" TextWrapping="Wrap" />
                            </StackPanel>
                        </DataTemplate>
                    </ListBox.ItemTemplate>
                </ListBox>
            </StackPanel>
        </Grid>
    </Grid>

    <!--Sample code showing usage of ApplicationBar-->
    <!--<phone:PhoneApplicationPage.ApplicationBar>
        <shell:ApplicationBar IsVisible="True" IsMenuEnabled="True">
            <shell:ApplicationBarIconButton IconUri="/Images/appbar_button1.png" Text="Button 1"/>
            <shell:ApplicationBarIconButton IconUri="/Images/appbar_button2.png" Text="Button 2"/>
            <shell:ApplicationBar.MenuItems>
                <shell:ApplicationBarMenuItem Text="MenuItem 1"/>
                <shell:ApplicationBarMenuItem Text="MenuItem 2"/>
            </shell:ApplicationBar.MenuItems>
        </shell:ApplicationBar>
    </phone:PhoneApplicationPage.ApplicationBar>-->

</phone:PhoneApplicationPage>

Can you please tell me where I am going wrong in the first case described above ? Can you please provide me any code or link through which I can resolve the above issue. What modifcation should I done in my code for the first case described above so that when I click on exactly in the square of the button area the event SelectionChanged=”lstButtons_SelectionChanged” gets fired ?

Answer 1

What is probably happening is that the Button is handling the click event by default and thus not allowing it to propagate to the ListBox. I’m assuming your intent is to access the data object associated with the row containing the button that you clicked on. In that case you can add a button click handler and use the following:

void Button_Click(object sender, RoutedEventArgs e)
{
  Button b = sender as Button;  // sender is the button user clicked
  MyDataObject data = b.DataContext as MyDataObject;  // data is the MyDataObject for that row
  // ...
}

Your second example works because neither TextBlock nor Image are intercepting the click event before it gets to the ListBox SelectionChanged handler.