Question

I am currently working on an application with an interface that consists of a number of buttons that represent an action, only one action can be assigned to each record in the database. When the user selects an action they get an optional entry which consists of a choice from 3 more buttons.

One way to do this is to define 3 extra buttons in the correct position for every action button (7×3) and only show the set based on the action button clicked. However the button values of these are the same for each action so it would make sense if these could be defined once then shown in the appropriate position relative to the action button once clicked.

Is there a way to do this in WPF?

Answer 1

There are many ways of doing this in WPF. I think the simplest will be to use a Grid control, something like:

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition />
        <RowDefinition />
        <RowDefinition />
        ......
    </Grid.RowDefinitions>

    <Grid.ColumnDefinitions>
        <ColumnDefinition />
        <ColumnDefinition />
    </Grid.ColumnDefinitions>

    <Button Grid.Row="0" Grid.Column="0">Button 1</Button>
    <Button Grid.Row="1" Grid.Column="0">Button 2</Button>
    <Button Grid.Row="2" Grid.Column="0">Button 3</Button>
    ......

    <StackPanel Name="PanelWithSuboptions" Grid.Column="1" Visibility="Collapsed">
        <Button>Suboption A</Button>
        <Button>Suboption B</Button>
        <Button>Suboption C</Button>
    </StackPanel>
</Grid>

Now when clicking the Button 1, Button 2 or Button 3, set PanelWithSuboptions’ [Grid.Row][1] attached property to 0, 1 respectively 2, and its Visibility to Visible, and they appear near the proper ‘main’ button.

Other ways would be to make a UserControl or to use a custom control template for each of the main buttons that includes the other 3 small buttons.