Button inside ListView not respond to ItemClick

Question

I have three buttons inside ListView.
I tried to click each of the button, however the ItemClick function was not triggered.

There is the xaml file of the ListView

<UserControl.Resources>
        <DataTemplate x:Name="DefaultWideSideItemTemplate" x:DataType="ui:AppMenuItem">
            <Grid>
                <ui:ButtonWithIcon IconContent="{x:Bind Icon}"
                                       Content="{x:Bind Name}"
                                       Style="{StaticResource TransparentFontButtonStyle}"
                />
            </Grid>
        </DataTemplate>
        <others:SideMenuItemTemplateSelector DefaultTemplate="{StaticResource DefaultWideSideItemTemplate}" x:Key="WideSideItemTemplateSelector"/>
    </UserControl.Resources>

<ListView Style="{StaticResource HorizontalCenterListView}" 
                  IsItemClickEnabled="True"
                  ItemsSource="{x:Bind MenuItemCollection}"
                  VerticalAlignment="Top"
                  x:Name="SideMenuListView"
                  Loaded="SideMenuListView_Loaded"
                  ItemClick="SideMenuListView_ItemClick"
                  ItemTemplateSelector="{StaticResource WideSideItemTemplateSelector}">
            </ListView>

There is the code where ItemClick was defined.

        public event EventHandler<AppMenuItem> SideMenuItemClick;

        private void SideMenuListView_ItemClick(object sender, ItemClickEventArgs e)
        {
          // DO SOMETHING HERE
        }

There is the xaml file of the ui:ButtonWithIcon

 <Style x:Key="TransparentFontButtonStyle" TargetType="ui:ButtonWithIcon">
        <Setter Property="Background" Value="Transparent"/>
        <Setter Property="BorderBrush" Value="Transparent"/>
        <Setter Property="BorderThickness" Value="0"/>
        <Setter Property="FontSize" Value="30"/>
        <Setter Property="HorizontalAlignment" Value="Center"/>
        <Setter Property="Margin" Value="0,32,0,7"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="ui:ButtonWithIcon">
                    <StackPanel>
                        <TextBlock
                            x:Name="IconContent"
                            Text="{Binding IconContent, RelativeSource={RelativeSource TemplatedParent}}"
                            HorizontalAlignment="Center"
                            FontFamily="{StaticResource SymbolThemeFontFamily}"
                            FontSize="30"/>
                        <TextBlock
                            x:Name="Text"
                            Text="{TemplateBinding Content}"
                            HorizontalAlignment="Center"
                            FontSize="14"
                            Margin="0,10,0,0"/>
                    </StackPanel>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

What did I understand wrong about ListView? Buttons can not be used in ListView?

Update: ButtonWithIcon

    public class ButtonWithIcon : Button
    {
        public static readonly DependencyProperty IconContentProperty =
          DependencyProperty.Register("IconContent", typeof(string), typeof(ButtonWithIcon), new PropertyMetadata(default));

        public string IconContent
        {
            get { return (string)GetValue(IconContentProperty); }
            set { SetValue(IconContentProperty, value); }
        }
    }

Update 2:

<DataTemplate x:Name="DefaultWideSideItemTemplate" x:DataType="ui:AppMenuItem">
            <Grid>
                <StackPanel Margin="0,32,0,7">
                    <TextBlock Text="{x:Bind Icon}"
                           HorizontalAlignment="Center"
                           FontFamily="{StaticResource SymbolThemeFontFamily}"
                           FontSize="30"/>
                    <TextBlock 
                           Text="{x:Bind Name}"
                           HorizontalAlignment="Center"
                           Margin="0,10,0,0"
                           FontSize="14"/>
                </StackPanel>
            </Grid>
        </DataTemplate>

Roy Li - MSFT Roy Li - MSFT · Accepted Answer · 2020-10-15T06:32:12

If the ui:ButtonWithIcon is a custom button control, then this is expected behavior. When you click on the custom button, the click event is captured by the button, so the ListView won't trigger the ItemClick event. A simple way to confirm is that you could click on the place that does not belong to the custom button. It should fire the ItemClick event of the ListView.

Update: Since your code is too messy, I made a simple test using some of your code:

<ListView HorizontalAlignment="Stretch" 
              VerticalAlignment="Stretch"
              IsItemClickEnabled="True"
              ItemsSource="{x:Bind MenuItemCollection}"
              
              x:Name="SideMenuListView"
              Loaded="SideMenuListView_Loaded"
              ItemClick="SideMenuListView_ItemClick"
              >
        <ListView.ItemTemplate>

            <DataTemplate >
                <Grid>
                    <StackPanel Margin="0,32,0,7">
                       
                        <TextBlock 
                       Text="{Binding}"
                       HorizontalAlignment="Center"
                       Margin="0,10,0,0"
                       FontSize="14"/>
                    </StackPanel>
                </Grid>
            </DataTemplate>
        </ListView.ItemTemplate>
        </ListView>

This works correctly.

You could remove the extra parts of your code to narrow down the issue. Start with a easy sample like the above.

Button inside ListView not respond to ItemClick

1 Answers