CODEWITHSUNDEEP
c#wpf
Robert
Robert

Reputation: 6226

Create clickable custom graphic in WPF

I'm trying to make something that looks like this, but I don't know how to approach it.

alt text

I have a thread that updates an object close to real time telling me three things: numberPockets (5), drawerPosition (light yellow), drawerTarget (dark yellow). The height and width of all the trays is fixed, so if more pockets were introduced the pocket size would need to shrink.

I also need to know which pocket is clicked so I know to go to that position and to also update the colors. I was thinking about using some sort of modified progress bar but I don't know the click location of it or how to overlay some sort of grid to display the different pockets. I also considered using a listbox, but fell flat trying to think of an implementation. Some direction would be appreciated.

Upvotes: 2

Views: 328

Answers (1)

ASanch
ASanch

Reputation: 10373

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>

Upvotes: 2

Related Questions