【问题标题】:How to add a button for each item in a ListBox如何为 ListBox 中的每个项目添加一个按钮
【发布时间】:2022-01-15 15:22:12
【问题描述】:

我正在尝试为 ListBox 中的每个项目添加一个按钮。 它是这样的:

添加按钮前的样式模板:

<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}"/>

使用画布添加按钮:

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

我的问题是,当我使用画布添加按钮时,无法选择 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>

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

【问题讨论】:

  • 在 ListBoxItem 的 ControlTemplate 中处理不同的视觉状态,您已将其替换为您自己的,无需任何状态处理。有关示例,请参阅ListBox ControlTemplate Example。除此之外,ControlTemplate 中还应该有一个 ContentPresenter,以显示实际的项目数据。你有一个带有 Border 和 Grid 孩子的 Canvas 也很奇怪。画布似乎毫无意义。将网格放入边框。
  • 如果我使用 Grid 而不是 Canvas,ListBoxItem 无法通过 Canvas.Left 和 Canvas.Top 定位。
  • ListBoxItem 是 ItemsPanel 中 Canvas 的子项,而不是 ListBoxItem ControlTemplate 中的子项。在 ControlTemplate 内的 Border 上设置 Canvas.Left 和 Top 没有意义,因为您已经在 ListBoxItem 本身上设置了 Left 和 Top。

标签: wpf listbox listboxitem


【解决方案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>

【讨论】:

  • 正如目前所写,您的答案尚不清楚。请edit 添加其他详细信息,以帮助其他人了解这如何解决所提出的问题。你可以找到更多关于如何写好答案的信息in the help center
猜你喜欢
  • 2018-06-06
  • 1970-01-01
  • 2020-01-15
  • 1970-01-01
  • 1970-01-01
  • 2017-09-29
  • 1970-01-01
  • 2016-12-09
  • 2022-01-06
相关资源
最近更新 更多