如何为列表框中的每个项目添加一个按钮

Question

我正在尝试为列表框中的每个项目添加一个按钮。是这样的：

添加按钮前的样式模板：

<Style TargetType="ListBox" x:Key="ListBoxStyle">
    <Setter Property="ItemsPanel">
        <Setter.Value>
            <ItemsPanelTemplate>
                <Canvas/>
            </ItemsPanelTemplate>
        </Setter.Value>
    </Setter>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate>
                <ItemsPresenter/>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
    <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Disabled"/>
    <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Disabled"/>
</Style>
<Style TargetType="ListBoxItem" x:Key="ListBoxItemStyle">
    <Setter Property="Canvas.Left" Value="{Binding Rectangle.X}"/>
    <Setter Property="Canvas.Top" Value="{Binding Rectangle.Y}"/>
    <Setter Property="Width" Value="{Binding Rectangle.Width}"/>
    <Setter Property="Height" Value="{Binding Rectangle.Height}"/>
    <Setter Property="BorderBrush" Value="{Binding Hexadecimal}"/>
    <Setter Property="BorderThickness" Value="2"/>
    <Setter Property="Content" Value=""/>
</Style>

我是这样使用样式的：

<ListBox
    ItemsSource="{Binding LabelShapes}"
    Width="{Binding ActualWidth, ElementName=Img}"
    Height="{Binding ActualHeight, ElementName=Img}"
    VerticalAlignment="Top"
    HorizontalAlignment="Left"
    SelectionMode="Extended"
    Style="{StaticResource ListBoxStyle}"
    ItemContainerStyle="{StaticResource ListBoxItemStyle}"/>

使用 canvas 添加按钮：

<Style TargetType="ListBoxItem" x:Key="ListBoxItemStyle">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="ListBoxItem">
                <Canvas>
                    <Border
                    Canvas.Left="{Binding Rectangle.Left}"
                    Canvas.Top="{Binding Rectangle.Top}"
                    Width="{Binding Rectangle.Width}"
                    Height="{Binding Rectangle.Height}"
                    BorderBrush="{Binding Hexadecimal}"
                    BorderThickness="2"/>

                    <Grid Height="20" Canvas.Left="{Binding Rectangle.Left}" Canvas.Top="{Binding Rectangle.Bottom}">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="50"/>
                        </Grid.ColumnDefinitions>
                        <Button Grid.Column="2" Width="50" Height="30" />
                    </Grid>
                </Canvas>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

我的问题是，当我使用 canvas 添加按钮时，无法选择 ListBoxItem。设置 ListBoxItem 样式并使 ListBoxItem 可以被选中的正确方法是什么？任何帮助将不胜感激。

更新

我添加一些视觉状态：

<Style TargetType="ListBoxItem" x:Key="ListBoxItemStyle">
    <Setter Property="Canvas.Left" Value="{Binding Rectangle.X}"/>
    <Setter Property="Canvas.Top" Value="{Binding Rectangle.Y}"/>
    <Setter Property="IsSelected" Value="{Binding IsSelected}"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="ListBoxItem">
                <Border x:Name="MyBorder"
                    Width="{Binding Rectangle.Width}"
                    Height="{Binding Rectangle.Height}"
                    BorderBrush="{Binding Hexadecimal}"
                    BorderThickness="2">
                    <Border.Background>
                        <SolidColorBrush Color="Transparent" />
                    </Border.Background>
                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="SelectionStates">
                            <VisualState x:Name="Unselected" />
                            <VisualState x:Name="Selected">
                                <Storyboard> 
                                    <ColorAnimationUsingKeyFrames Storyboard.TargetName="MyBorder" Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)">
                                        <EasingColorKeyFrame KeyTime="0" Value="{StaticResource SelectedBackgroundColor}" />
                                    </ColorAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="SelectedUnfocused">
                                <Storyboard>
                                    <ColorAnimationUsingKeyFrames Storyboard.TargetName="MyBorder" Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)">
                                        <EasingColorKeyFrame KeyTime="0" Value="{StaticResource SelectedUnfocusedColor}" />
                                    </ColorAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>
                    <Grid Height="20" Canvas.Left="{Binding Rectangle.Left}" Canvas.Top="{Binding Rectangle.Bottom}">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="50"/>
                        </Grid.ColumnDefinitions>
                        <Button Width="50" Height="30" />
                    </Grid>
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

现在可以选择项目，但我不知道如何在边框底部放置一个按钮？

Answer 1

我找到了一种简单的方法来获得我需要的东西。将ListBoxItem的ControlTemplate替换为如下，使用ControlTemplate.Triggers 属性处理选中项的样式

<ControlTemplate TargetType="ListBoxItem">
    <Grid>
        <Rectangle
            x:Name="ShapeBorder" 
            HorizontalAlignment="Left"
            Width="{Binding Rectangle.Width}"
            Height="{Binding Rectangle.Height}"
            Stroke="{Binding Hexadecimal}"
            StrokeThickness="1"/>
    
        <Grid Height="20" Margin="0 0 0 -20" VerticalAlignment="Bottom">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="50"/>
            </Grid.ColumnDefinitions>
            <Button Grid.Column="2" Width="50" Height="20" />
        </Grid>
    </Grid>

    <ControlTemplate.Triggers>
        <Trigger Property="IsSelected" Value="True">
            <Setter TargetName="ShapeBorder" Property="StrokeThickness" Value="2"/>
        </Trigger>
    </ControlTemplate.Triggers>
</ControlTemplate>

如何为列表框中的每个项目添加一个按钮

How to add a button for each item in a ListBox

wpf

listbox

listboxitem