Create clickable custom graphic in WPF

Answer 1

I think a ListBox could work. With a little bit of styling, you could get the desired behavior. To start off, you'll probably have to do the following important things:

1. Override the ItemsPanel for the ListBox to use UniformGrid.
2. Disable Scrolling in the ListBox.
3. Make sure the ContentAlignment for the ListBoxItems are set to Stretch.

See sample below. It may help you get started.

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