如何使用WinRT在ListViewItem中创建可点击按钮?

时间:2016-12-21 16:34:37

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

我正在尝试创建一个自定义控件,其中包含一些带+/-按钮的列表。这是我的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。然后它似乎工作。

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

2 个答案:

答案 0 :(得分:0)

@ CherryBu-MSFT我有点困惑。添加命令实际上在按钮的行为中有什么变化?

很抱歉延迟回复。

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

更多信息,您可以参考this thread

答案 1 :(得分:0)

我认为您只需要更改当前的DataRepeater。如果你想在&#34;有序列表中显示按钮,我不认为ListView是正确的选择&#34;。 (我只是在猜这里)

尝试过ItemsControl控件吗?它是ListView使用的核心组件,如果我没记错的话。但主要的优点是虽然它仍然具有可绑定的ItemsSource属性,但它并没有提供任何花哨的选择&#34;行为。

请参阅documentation

然而,更多有关您尝试实现的内容的见解将为您提供正确的答案。