0

I've programmatically generated buttons in a UniformGrid i.e. 4 rows and 4 columns, so 16 buttons.

I want to be able to click and drag to create a rectangle box to select a box of buttons.

Is this possible?

Trying to use this example currently but not seeing the drag box appear

Click and drag selection box in WPF

Currently, since it's all programmatic, the UniformGrid code in XAML is this:

                    <Canvas DockPanel.Dock="Top" Name="buttonCanvas" Width="800" Height="400">
                        <Rectangle x:Name="selectionBox" Visibility="Collapsed" Stroke="White" StrokeThickness="4" />
                        <UniformGrid DockPanel.Dock="Top" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" x:Name="uniformGrid" Grid.Row="1" Width="800" Height="400"
                  Rows="{Binding RowNums}"
                  Columns="{Binding ColumnNums}" MouseDown="uniformGrid_MouseDown" MouseUp="uniformGrid_MouseUp" MouseMove="uniformGrid_MouseMove" Background="Transparent">
                        </UniformGrid>
                        <!-- This canvas contains elements that are to be selected -->
                    </Canvas>
slickchick2
  • 137
  • 9
  • You could consider having a canvas drawn over the grid, on which you draw a rectangle by handling the mouse down, mouse move and mouse up events for the canvas. In the mouse move you would work out which buttons were enclosed by the rectangle and set them to be selected. You would have some kind of trigger in a style to set the style to be different when selected – Tim Rutter Aug 12 '19 at 14:26
  • Hi Tim, thanks - i'm trying to understand how I could implement the canvas. – slickchick2 Aug 12 '19 at 14:26
  • 1
    Could you provide a coding example? – slickchick2 Aug 12 '19 at 14:26
  • Have a go and see how far you get. One thing to be aware of: make sure your canvas's background is not null by setting its Background to Transparent. – Tim Rutter Aug 12 '19 at 14:33
  • Used the example in here and from the height and width of the rectangle box i'm seeing in the output console it looks like the box is being created... i'm just not seeing it... I'm wondering if this is because of the buttons being created and added to the grid but not the canvas? I'll edit my question with some updated code – slickchick2 Aug 12 '19 at 14:40
  • The canvas does not need to be within the uniform grid it needs to be drawn over it. Eg – Tim Rutter Aug 12 '19 at 14:47

1 Answers1

1

Start by drawing a Canvas over the UniformGrid:

<Grid>
    <UniformGrid>
        <Button/>
        ...etc....
    </UniformGrid>
    <Canvas/>
<Grid>

Then you would by handle the mouse down, mouse move and mouse up events for the canvas. In mouse down you would add a rectangle to the canvas as the current mouse pos, in the mouse move you would resize the rectangle based on the current mouse pos and work out which buttons were enclosed by the rectangle and set them to be "selected" by binding to a view model somewhere. In the mouse up you would remove the rectangle. You would have some kind of trigger in a style to set the style to be different when selected

Tim Rutter
  • 4,549
  • 3
  • 23
  • 47
  • Thanks Tim - see edit I made. Had to make canvas same size as uniform grid otherwise uniform grid was hidden (h0,w0). But the rectangle box still doesn't display :(. – slickchick2 Aug 12 '19 at 14:53
  • do both canvas's need transparent background in order to work? :\ – slickchick2 Aug 12 '19 at 14:54
  • now i can see it when i moved the rectangle canvas inside the first canvas but before the uniformgrid. Is that ok? – slickchick2 Aug 12 '19 at 15:00
  • your buttons should be in the uniform grid - or at least that is what you asked for initially. Why do you have 2 canvases? – Tim Rutter Aug 12 '19 at 15:20
  • I'm using the example in the link in my initial question... they had 2 canvases... :\ don't know if i needed 2 :\ – slickchick2 Aug 12 '19 at 15:35
  • Made an update (see edit)- works like this too - hopefully i'll then be able to check which buttons are surrounded by the rectangle :) – slickchick2 Aug 12 '19 at 15:37
  • Not entirely sure how one would check if buttons are contained within the rectangle drawn... I've got the mousedown position and mouseup position of the rectangle – slickchick2 Aug 12 '19 at 15:53
  • That Canvas is *under* the UniformGrid. That said, this is not even 10% of the final solution. You should at least explain how you intend to handle mouse input on te Canvas and still have the Buttons in the Grid working. The question is far too broad, and should probably not be answered at all. – Clemens Aug 12 '19 at 16:34
  • 1
    @Clemens SO is not a code writing service. The original question was too broad and I was giving a starting point. I was going to add to this answer as slickchick2 asked other questions but unfortunately I had to go and do other things. I have added some more description (which I had already said more or less in a comment on the first q) – Tim Rutter Aug 13 '19 at 07:11
  • 1
    I do consider it more valuable if you allow people to work things out for themselves which I think slickchick2 has done – Tim Rutter Aug 13 '19 at 07:17
  • "*The original question was too broad*" - then instead of answering, you should obviously vote to close with that exact reason. – Clemens Aug 13 '19 at 07:19
  • 1
    I didn't think in this case that was necessary. THe question was amended and I gave an initial pointer to get slickchick2 on their way and now I have added some further detail which may be of use to someone. – Tim Rutter Aug 13 '19 at 07:22
  • 1
    @slickchick2 if you still need assistance with this particularly relating to how work out the buttons are within the rectangle then have a go at writing some code and ask a new question. – Tim Rutter Aug 13 '19 at 07:23
  • Thanks Tim - appreciate it. @Clemens instead of being unhelpful and shutting coders down when it seems too broad perhaps add a comment saying to add more detail and allow the person to add more detail. I managed to figure it out with the help of Sach who added me in terms of not having to use the canvas to add buttons and instead retrieve them from the uniform grid. He created a function that shows the usage of TransformToAncestor which was really helpful. – slickchick2 Aug 13 '19 at 08:22
  • @slickchick2 You may want to take a look at the Help Center, [How do I ask a good question?](https://stackoverflow.com/help/how-to-ask) This one is obviously too broad, and should be closed as such. In the future, please try to be more specific. – Clemens Aug 13 '19 at 08:28