locked
Clip the edges of the Grid

    Question

  • Hi,

    I've attempted to have a grid with rounded corners, to display grid as a circle.

    I've tried by placing the grid within the border and setting the corner radius, so far no success.

    So how to create a grid with rounded corners in C#/XAML Windows Store app.

    Thanks,

    Vijay


    Wednesday, April 2, 2014 9:16 AM

Answers

  • I wouldn't try to curve the Grid to fit inside the border. Normally you'd lay things out the other way with the Grid being the container.

    That said, I'd use a ToggleButton (or a RadioButton) for the numbers rather than creating something new. That way you get keyboard handling and automation behavior built in rather than having to implement all that yourself. You can style the button to have a transparent background when unchecked and a curved border or Ellipse when checked.

    See ToggleButton styles and templates , update the Border to have your radius and a default transparent Background (or have the Background match your month grid's color resource).

    Thursday, April 3, 2014 5:23 AM
    Owner

All replies

  • Hi Vijay,

    You can add the Grid inside Border and set grid background as Transparent. Also set the background for border. Now rounded corner grid will be viewed.

    Regards,

    Riyaj Ahamed I

    Wednesday, April 2, 2014 10:35 AM
  • Hi Riyaj,

    Thanks for the reply.

    My requirement is like below.


    Each number in the above screen is a Grid. If I tap on any of the digit, the tapped item should be highlighted with the circle, filled with some color(shown in the screen shot).

    Currently I am able to highlight the tapped item with the rectangle shape, since I am setting the background color for the Grid. So instead of showing rectangle shape, I want to display the circle shape. If I add the Grid inside Border and set grid background as Transparent, it is getting applicable to all the numbers, not only to the selected number.

    So is there any work around to achieve the same?

    Thanks

    Vijay

    Thursday, April 3, 2014 3:53 AM
  • I wouldn't try to curve the Grid to fit inside the border. Normally you'd lay things out the other way with the Grid being the container.

    That said, I'd use a ToggleButton (or a RadioButton) for the numbers rather than creating something new. That way you get keyboard handling and automation behavior built in rather than having to implement all that yourself. You can style the button to have a transparent background when unchecked and a curved border or Ellipse when checked.

    See ToggleButton styles and templates , update the Border to have your radius and a default transparent Background (or have the Background match your month grid's color resource).

    Thursday, April 3, 2014 5:23 AM
    Owner