在WPF中创建可单击的自定义图形

Question

我正在尝试制作看起来像这样的东西，但我不知道如何处理它。

我有一个线程可以更新一个接近实时的对象，告诉我三件事：numberPockets（5），drawerPosition（浅黄色），drawerTarget（深黄色）。所有托盘的高度和宽度都是固定的，因此如果引入更多口袋，则口袋尺寸需要缩小。

我还需要知道点击了哪个口袋，所以我知道要去那个位置并且还要更新颜色。我正在考虑使用某种改进的进度条，但我不知道它的点击位置或如何覆盖某种网格来显示不同的口袋。我也考虑过使用一个列表框，但试图考虑一个实现方式。一些方向将不胜感激。

Answer 1

我认为ListBox可以工作。通过一些样式，您可以获得所需的行为。首先，您可能需要执行以下重要操作：

1. 覆盖ListBox的ItemsPanel以使用UniformGrid。
2. 禁用列表框中的滚动。
3. 确保ListBoxItems的ContentAlignment设置为Stretch。

见下面的示例。它可能会帮助您开始。

<Window x:Class="Test.MainWindow"
       xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
       xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
       xmlns:local="clr-namespace:Test"
       xmlns:scm="clr-namespace:System.ComponentModel;assembly=WindowsBase"
       Title="Test" Height="650" Width="200">


    <ListBox ScrollViewer.HorizontalScrollBarVisibility="Disabled" 
                ScrollViewer.VerticalScrollBarVisibility="Disabled" >
        <ListBox.ItemsPanel>
            <ItemsPanelTemplate>
                <UniformGrid Columns="1"/>
            </ItemsPanelTemplate>
        </ListBox.ItemsPanel>

        <ListBoxItem HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch">
            <Rectangle Fill="White" Stroke="Black" StrokeThickness="1"/>
        </ListBoxItem>
        <ListBoxItem HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch">
            <Rectangle Fill="Yellow" Stroke="Black" StrokeThickness="1"/>
        </ListBoxItem>
        <ListBoxItem HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch">
            <Rectangle Fill="Yellow" Stroke="Black" StrokeThickness="1"/>
        </ListBoxItem>
        <ListBoxItem HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch">
            <Rectangle Fill="DarkGoldenrod" Stroke="Black" StrokeThickness="1"/>
        </ListBoxItem>
    </ListBox>
</Window>