How do I make clickable buttons inside ListViewItem with WinRT?

Question

I'm trying to create a custom control that contains a few lists with +/- buttons. Here's my XAML code:

<UserControl.Resources>
    <Style TargetType="ListViewItem">
        <Setter Property="HorizontalContentAlignment" Value="Stretch" />
    </Style>
    <DataTemplate x:Key="lvheader">
        <Grid Background="#A0BBBBBB" Height="32">
            <TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" Margin="5,2" FontWeight="Medium" FontSize="14" Text="{Binding}" />
        </Grid>
    </DataTemplate>
    <DataTemplate x:Key="lvitem">
        <Grid>
            <StackPanel Orientation="Horizontal">
                <Button>+</Button>
                <Button>-</Button>
                <TextBlock VerticalAlignment="Center" TextAlignment="Left" Text="{Binding Path=Name}" />
            </StackPanel>
            <TextBlock VerticalAlignment="Center" TextAlignment="Right" Text="{Binding Path=Count}" />
        </Grid>
    </DataTemplate>
</UserControl.Resources>
<Grid Background="#E0020210">
    <Border CornerRadius="6" Padding="5" Background="#242424" BorderBrush="#CBCBCB" BorderThickness="1" Width="850" Height="450" VerticalAlignment="Center" HorizontalAlignment="Center">
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="*" />
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="*" />
                <RowDefinition Height="auto" />
            </Grid.RowDefinitions>
            <ListView SelectionMode="None" Name="imgStyles" Header="Image Style" HeaderTemplate="{StaticResource lvheader}" ItemTemplate="{StaticResource lvitem}" ItemsSource="{Binding Path=GenericTags}" />
            <ListView SelectionMode="None" Name="imgCopyrights" Grid.Column="1" Header="Image Copyright" HeaderTemplate="{StaticResource lvheader}" ItemTemplate="{StaticResource lvitem}" ItemsSource="{Binding Path=CopyrightTags}" />
            <ListView SelectionMode="None" Name="imgCharacters" Grid.Column="2" Header="Image Character" HeaderTemplate="{StaticResource lvheader}" ItemTemplate="{StaticResource lvitem}" ItemsSource="{Binding Path=CharacterTags}" />
            <TextBlock VerticalAlignment="Center" Text="Rating:" Grid.Row="1" />
            <ComboBox Margin="4" Grid.Row="1" Grid.Column="1" Name="rating" ItemsSource="{Binding Path=AllRatings}" />
            <Button Margin="2" HorizontalAlignment="Stretch" Grid.Column="2" Grid.Row="1" Content="Search!" Click="Button_Click" />
            <Grid Grid.RowSpan="2" Grid.ColumnSpan="3" Name="pw" Background="#EE111111" Visibility="Collapsed">
                <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">
                    <ProgressRing Width="96" Height="96" Background="Transparent" IsActive="True" />
                    <TextBlock Text="Loading..." TextAlignment="Center" FontSize="15" />
                </StackPanel>
            </Grid>
        </Grid> 
    </Border>
</Grid>

With this setup I am unable to click [+]/[-] buttons. The ListViewItem is being selected instead, unless I click the button's border. Then it seems to work.

I remember solving this a long time ago but I have no idea how I did it. What'd be the best way to handle this?

@ChrisW. this doesn't seem to work. It still doesn't let me use buttons normally — Reynevan, Dec 21 '16 at 18:31
Oooh is clickmode property not in rt? I didn't look so maybe not. I also didn't notice the part where you mention the button's border seems to fire the event which makes no sense. — Chris W., Dec 21 '16 at 18:37
@Reynevan. you can refer to [how to make button click work in ListView](http://tonyuj.blogspot.sg/2015/01/how-to-make-button-click-work-in.html) — Cherry Bu - MSFT, Dec 22 '16 at 08:47
@CherryBu-MSFT I'm a bit confused. What does adding a `Command` actually change in the button's behaviour? — Reynevan, Dec 22 '16 at 15:00
@Reynevan. Can you share your sample code that can reproduce this issue, so hat I can test it? — Cherry Bu - MSFT, Dec 23 '16 at 09:19
Well, there's not much more than this. It's just a `UserControl`. You just need to add it as a child to a `Grid` for example, on your `MainPage`. — Reynevan, Dec 24 '16 at 14:45

score 0 · Answer 1 · edited May 23 '17 at 12:16

0

@CherryBu-MSFT I'm a bit confused. What does adding a Command actually change in the button's behaviour?

Sorry for delayed response.

According to your the question above,you can create public methods that are “Commands” and bind them your button so that when the button click event is fired, the command in the view model is executed.

More info, you can refer to this thread.

edited May 23 '17 at 12:16

Community

1
1

answered Dec 27 '16 at 09:35

Cherry Bu - MSFT

10,160
1
10
16

But how would that help if the `Click` event is only fired when the user clicks on button's border/thereabouts? That's what I'm trying to fix, not assigning an actual action to the button. – Reynevan Dec 29 '16 at 17:27

score 0 · Answer 2 · answered Jan 03 '17 at 08:41

I think you just have to change the current DataRepeater. I don't think ListView is the right choice if you want to display buttons in an "ordered list". (I'm just guessing here)

Have tried the ItemsControl control? It's the core component used by ListView, if I recall that correctly. But the main advantage is that while it still has the bindable ItemsSource property, it doesn't provide any fancy "selection" behaviour.

See documentation.

However, more insights on what you're trying to achieve would be a great help to give you the right answer.

How do I make clickable buttons inside ListViewItem with WinRT?

2 Answers2