指针上方的UWP XAML ListView嵌套UI

我想创建一个ListView，其中ListViewItems在标签旁边有嵌套按钮，这些按钮只显示在指针上方。这就是我为此创建的数据模板。我在VisualStateManager上试过，但不起作用

所以问题是：什么是最好的纯XAML方法？（或者至少有一种工作方式就足够了；）

谢谢

<DataTemplate x:Name="aUITodoListViewDataTemplate" x:DataType="a:aTodo">
    <Grid HorizontalAlignment="Stretch" PointerEntered="Grid_PointerEntered" PointerExited="Grid_PointerExited">
        <Grid.ColumnDefinitions>
            <!-- creates a grid with three columns, the first so wide as needed, and the second two in a 7/1 ratio-->
            <ColumnDefinition Width="auto" />
            <ColumnDefinition Width="70*" MaxWidth="500" MinWidth="100"/>
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>

        <!-- First is the actual label -->
        <TextBlock Text="{x:Bind Name}" Grid.Column="0" VerticalAlignment="Center" />

        <!-- the middle column is for spacing -->

        <!-- the last column is for the buttons -->
        <StackPanel Grid.Column="2" Orientation="Horizontal" x:Name="buttonGroup">
            <Button>A</Button>
            <Button>B</Button>
            <Button>C</Button>
        </StackPanel>

        <!-- The visual states -->
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup x:Name="CommonStates">
                <VisualState x:Name="Normal">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="buttonGroup" Storyboard.TargetProperty="Visibility">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="Visible" />
                            <DiscreteObjectKeyFrame KeyTime="0:0:0.333" Value="Collapsed" />
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
                <VisualState x:Name="PointerOver">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="buttonGroup" Storyboard.TargetProperty="Visibility">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed" />
                            <DiscreteObjectKeyFrame KeyTime="0:0:0.333" Value="Visible" />
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
    </Grid>
</DataTemplate>

A.
B
C

您可以通过为

ListViewItem

提供自定义控件模板使其正常工作。例如：

<ListView
    ItemsSource="{Binding Data, ElementName=self}"
    Grid.Row="1"
    SelectionChanged="OnSelectionChanged"
    x:Name="listView">
    <ListView.Resources>
        <Style TargetType="ListViewItem">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="ListViewItem">
                        <Grid Background="Pink" x:Name="grid" DataContext="{TemplateBinding DataContext}">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="100" />
                                <ColumnDefinition Width="90" />
                            </Grid.ColumnDefinitions>
                            <ContentPresenter />
                            <StackPanel Grid.Column="1" Orientation="Horizontal" x:Name="buttonGroup" Visibility="Collapsed">
                                <Button>A</Button>
                                <Button>B</Button>
                                <Button>C</Button>
                            </StackPanel>
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="CommonStates">
                                    <VisualState x:Name="Normal" />
                                    <VisualState x:Name="Pressed" />
                                    <VisualState x:Name="PointerOver">
                                        <VisualState.Setters>
                                            <Setter Target="buttonGroup.Visibility" Value="Visible" />
                                            <Setter Target="grid.Background" Value="Orange" />
                                        </VisualState.Setters>
                                    </VisualState>
                                    <VisualState x:Name="Disabled" />
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </ListView.Resources>
    <ListView.ItemTemplate>
        <DataTemplate>
            <TextBlock Text="{Binding Name}" />
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

…并且页面本身（名为

self

）公开以下集合属性：

public Data[] Data { get; set; } =
    {
        new Data { Name = "One" },
        new Data { Name = "Two" },
        new Data { Name = "Three" },
    };

请注意，您无法从

控制模板

中绑定到数据模型，因此

数据模板

与

文本块

绑定到

名称

，而

控制模板

中的

内容演示器

。相反，如果要从

数据模板

使用VSM，则需要以编程方式设置状态

结果非常难看，如下所示（鼠标悬停在“2”上）：

---

你在找这样的东西吗？不太可能，但实际上它也很有趣；）

public Data[] Data { get; set; } =
    {
        new Data { Name = "One" },
        new Data { Name = "Two" },
        new Data { Name = "Three" },
    };