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?

Answer 1

@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 .

Answer 2

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.