Is There a Way To Completely Custom-Shape Rectangles in WPF (XAML)? EG: Custom shape rectangles like the 'Simon' game? | SoloLearn: Learn to code for FREE!

+2

Is There a Way To Completely Custom-Shape Rectangles in WPF (XAML)? EG: Custom shape rectangles like the 'Simon' game?

I'm creating a 'Simon' game in WPF. The game works great, but I want the rectangles to look completely custom like the real 'Simon' game: Like this: https://i.stack.imgur.com/nhp6x.png Thanks, Appreciate any response/comment

6/2/2020 1:03:19 AM

Tom Joney (TheCoder)

4 Answers

New Answer

+3

Tom Joney (TheCoder) Regarding the button shape itself, if you can draw that shape in a vector graphics tool like Adobe Illustration or InkScape, you may be able to convert the SVG to XAML. You may also find some vector graphics of the button shape online. I'm not sure if this approach will work, but I did find the following libraries / utilities. There may be more: https://marketplace.visualstudio.com/items?itemName=AB4D.ReaderSvg-theultimatesvgimporter https://www.ab4d.com/ViewerSvg.aspx https://github.com/BerndK/SvgToXaml https://github.com/vvvv/SVG

+2

Tom Joney (TheCoder) You should be able to create a ControlTemplate for the button control to apply custom paths to draw the shape you're looking for. Here are a few links to get you started: https://docs.microsoft.com/en-us/dotnet/framework/wpf/controls/#changing-the-appearance-of-a-control https://docs.microsoft.com/en-us/dotnet/api/system.windows.controls.controltemplate The tricky part will be in using the path markup language to define the custom shape for the button. https://docs.microsoft.com/en-us/dotnet/framework/wpf/graphics-multimedia/path-markup-syntax Other Relevant References: https://docs.microsoft.com/en-us/dotnet/framework/wpf/graphics-multimedia/shapes-and-basic-drawing-in-wpf-overview https://docs.microsoft.com/en-us/dotnet/framework/wpf/graphics-multimedia/geometry-overview

+2

Tom Joney (TheCoder) Here are some graphics you might be able to use, purchase, derive from, experiment with.. -------- Vector Graphic Images: ---- https://worldvectorlogo.com/logo/simon-game-logo https://stock.adobe.com/hu/images/retro-technology-icons-simon-says-ultra-color/158605693 -------- PNG / JPG Images: ---- https://favpng.com/png_view/echo-simon-memory-challenge-clip-art-vector-graphics-simon-free-simon-says-game-png/Ktd0gFQw https://cdn.dribbble.com/users/380540/screenshots/1778330/simon.jpg https://img.pngio.com/linkbunch-04o31-http-linkbunch-04o31-simon-says-png-392_400.png

+1

@David Caroll thank you for this. 👍 I will give it a go.