Создавайте интерактивную графику с кликабельностью в WPF

Question

Я пытаюсь сделать что-то похожее на это, но я не знаю, как к этому приблизиться.

У меня есть нить, которая обновляет объект, близкий к реальному времени, сообщая мне три вещи: numberPockets (5), boxPosition (светло-желтый), hookTarget (темно-желтый). Высота и ширина всех лотков фиксирована, поэтому, если будет введено больше карманов, размер кармана должен будет уменьшиться.

Мне также нужно знать, в каком кармане щелкают, чтобы я знал, как перейти в эту позицию, а также обновить цвета. Я думал об использовании какого-то модифицированного индикатора выполнения, но я не знаю его местоположения щелчка или как наложить какую-то сетку для отображения различных карманов. Я также рассмотрел использование списка, но потерпел неудачу, пытаясь придумать реализацию. Некоторое направление будет оценено.

Answer 1

Я думаю, что ListBox может работать. Приложив немного стиля, вы можете получить желаемое поведение. Для начала вам, вероятно, придется сделать следующие важные вещи:

1. Переопределите ItemsPanel для ListBox, чтобы использовать UniformGrid.
2. Отключить прокрутку в ListBox.
3. Убедитесь, что для ContentAlignment для ListBoxItems установлено значение 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>