Question

Hello Stackoverflowers，

在下面的列表框中，当鼠标悬停在元素上时，选择框从窗口的左上角到元素的右下角。这对于ListBox.ItemsPanel中Canvas上的美学和鼠标事件都是一个问题。

我想知道是否可以在内部元素的形状上设置选择框（相同的形状，从元素坐标开始而不是从左上角开始）。

 <ListBox ItemsSource="{Binding OverlayElements}"
             SelectedItem="{Binding SelectedItem}"
             Background="Transparent">

        <ListBox.ItemContainerStyle>
            <Style TargetType="{x:Type ListBoxItem}">
                <Setter Property="IsHitTestVisible" Value="True"></Setter>
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="{x:Type ListBoxItem}">
                            <Border Background="{TemplateBinding Background}"
                                        BorderBrush="{TemplateBinding BorderBrush}"
                                        BorderThickness="{TemplateBinding BorderThickness}"
                                        HorizontalAlignment="Center">
                                <ContentPresenter/>
                            </Border>
                            <ControlTemplate.Triggers>
                                <Trigger Property="IsSelected" Value="True">
                                    <Setter Property="Background" Value="#33FF0000"></Setter>
                                </Trigger>
                            </ControlTemplate.Triggers>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        </ListBox.ItemContainerStyle>

        <ListBox.ItemsPanel>
            <ItemsPanelTemplate>
                <Canvas/>
            </ItemsPanelTemplate>
        </ListBox.ItemsPanel>

        <ListBox.Resources>
            <DataTemplate DataType="{x:Type model:EllipseOverlayElement}">
                <Path Stroke="{Binding Color}" StrokeThickness="{Binding Thickness}">
                    <Path.Data>
                        <EllipseGeometry
                            Center="{Binding Center}"
                            RadiusX="{Binding RadiusX}"
                            RadiusY="{Binding RadiusY}"/>
                    </Path.Data>
                </Path>
            </DataTemplate>

            <DataTemplate DataType="{x:Type model:LineOverlayElement}">
                <Path Stroke="{Binding Color}" StrokeThickness="{Binding Thickness}">
                    <Path.Data>
                        <LineGeometry
                            StartPoint="{Binding StartPoint}"
                            EndPoint="{Binding EndPoint}"/>
                    </Path.Data>
                </Path>

            </DataTemplate>
        </ListBox.Resources>
    </ListBox>

告诉我，如果我不清楚。

Answer 1

只是一个建议 - 您确定要在ItemsPanelTemplate中使用Canvas吗？我猜Canvas造成了这个问题。

您只需使用Stackpanel垂直放置项目并使用Datatemplate，您可以包含Elipse或矩形。通过这种方式，您将在狭窄的空间中拥有一个形状。

让我知道它是否有效。

谢谢，vishal

列表框自定义选择器边界框

1 个答案: