[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 406
  • Last Modified:

How Drop an imahe inside a Grid?

I have build a chess board from a Silverlight Grid control .The 64 squares are painted  by
creating 8 rows and 8 columns. I also have png images for the pieces. When I drag by the mouse a piece(png image) and drop it inside the board I would like the droped piece
to be inserted to the appropriate cell which is under the droped piece so that this piece will be a child of the grid. how can I do that?  
bish wakim
bish wakim
  • 2
  • 2
1 Solution
Hi, I would suggest using a Uniform grid instead of a grid, just because a UniformGrid will automatically order 64 items in a 8x8 pattern.

You can also define it the number of Columns and Rows in XAML.

However, using a Grid/UniformGrid isn't enough. Something need to catch the Drop event. Although you can probably do it the way you want, I'm suggesting a different way.

Have an ItemsControl.
Make the ItemsPanel of the ItemsControl to be a UniformGrid .

Bind the ItemsControl ItemsSource to an ObservableCollection of your own class that represents a cell.
Have your ObservableCollection contain 64 cell items.

Define a DataTemplate for your Cell class, so it will be shown on the UI as you would like (For example, border with either black or white background).

On Drop, get the item the mouse was over.

Have the picture added to the content of the cell.
bish wakimAuthor Commented:
Thank you saraqani for your answer
Your suggestion seems to be interesting, However I couldn't find the UniformGrid in Silverlight packages... What do you think?
Well, I'm working with WPF, so there might be small differences.

You can implement a UniformGrid yourself by creating a class that inherits Panel and then overriding the MeasureOverride and ArrangeOverride.
I've done this many times in WPF.

Anyway, I wrote a little example in WPF, have a look:

bish wakimAuthor Commented:
Thank you!!

Featured Post

Visualize your virtual and backup environments

Create well-organized and polished visualizations of your virtual and backup environments when planning VMware vSphere, Microsoft Hyper-V or Veeam deployments. It helps you to gain better visibility and valuable business insights.

  • 2
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now