如何使用 WinRT 在 ListViewItem 内制作可点击按钮？答案

【问题标题】：How do I make clickable buttons inside ListViewItem with WinRT?如何使用 WinRT 在 ListViewItem 内制作可点击按钮？
【发布时间】：2016-12-21 16:34:36
【问题描述】：

我正在尝试创建一个自定义控件，其中包含一些带有 +/- 按钮的列表。这是我的 XAML 代码：

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

使用此设置，我无法单击 [+]/[-] 按钮。 ListViewItem 被选中，除非我单击按钮的边框。然后它似乎工作了。

我记得很久以前就解决了这个问题，但我不知道我是怎么做到的。处理这个问题的最佳方法是什么？

【问题讨论】：

在您的按钮上添加属性 ClickMode="Press"
@ChrisW。这似乎不起作用。它仍然不允许我正常使用按钮
哦，clickmode 属性不在 rt 中吗？我看起来不那么可能不是。我也没有注意到您提到按钮边框的部分似乎触发了没有意义的事件。
@Reynevan。可以参考how to make button click work in ListView
@CherryBu-MSFT 我有点困惑。添加Command实际上会改变按钮的行为吗？

标签： .net xaml windows-runtime windows-store-apps winrt-xaml

【解决方案1】：

@CherryBu-MSFT 我有点困惑。添加命令实际上会改变按钮的行为吗？

抱歉延迟回复。

根据您上面的问题，您可以创建“命令”的公共方法并将它们绑定到您的按钮，以便在触发按钮单击事件时执行视图模型中的命令。

更多信息，您可以参考this thread。

【讨论】：

但是，如果 Click 事件仅在用户单击按钮的边框/附近时触发，那将有什么帮助？这就是我要解决的问题，而不是为按钮分配实际操作。

【解决方案2】：

我认为您只需要更改当前的 DataRepeater。如果您想在“有序列表”中显示按钮，我认为 ListView 不是正确的选择。（我只是在这里猜测）

试过ItemsControl控件吗？如果我没记错的话，它是 ListView 使用的核心组件。但主要优点是虽然它仍然具有可绑定的 ItemsSource 属性，但它不提供任何花哨的“选择”行为。

见documentation。

但是，对您想要实现的目标的更多见解将非常有助于为您提供正确的答案。

【讨论】：