How to create custom shaped Buttons in WPF? Announcing the arrival of Valued Associate #679: Cesar Manara Planned maintenance scheduled April 17/18, 2019 at 00:00UTC (8:00pm US/Eastern) The Ask Question Wizard is Live! Data science time! April 2019 and salary with experience Should we burninate the [wrap] tag?Make GeometryDrawing interactive map from the UI? (Interact with an SVG image in WPF)How do I calculate someone's age in C#?What is the correct way to create a single-instance WPF application?How do you give a C# Auto-Property a default value?How do I enumerate an enum in C#?How to create Excel (.XLS and .XLSX) file in C# without installing Ms Office?How do I get a consistent byte representation of strings in C# without manually specifying an encoding?How do I generate a random int number?What is a NullReferenceException, and how do I fix it?Flattening SVG matrix transforms in InkscapeHow to rotate image about its centre rather than about the canvas it is on in WPF, C#
Is there a service that would inform me whenever a new direct route is scheduled from a given airport?
When -s is used with third person singular. What's its use in this context?
Is above average number of years spent on PhD considered a red flag in future academia or industry positions?
How to assign captions for two tables in LaTeX?
Did Kevin spill real chili?
Is it true to say that an hosting provider's DNS server is what links the entire hosting environment to ICANN?
Why are there no cargo aircraft with "flying wing" design?
What happens to sewage if there is no river near by?
Sorting numerically
Is 1 ppb equal to 1 μg/kg?
What does '1 unit of lemon juice' mean in a grandma's drink recipe?
Is there a concise way to say "all of the X, one of each"?
Why was the term "discrete" used in discrete logarithm?
Should I discuss the type of campaign with my players?
I am not a queen, who am I?
What are 'alternative tunings' of a guitar and why would you use them? Doesn't it make it more difficult to play?
How to recreate this effect in Photoshop?
What are the pros and cons of Aerospike nosecones?
Is high blood pressure ever a symptom attributable solely to dehydration?
Gastric acid as a weapon
Is there a way in Ruby to make just any one out of many keyword arguments required?
Can a non-EU citizen traveling with me come with me through the EU passport line?
Can Pao de Queijo, and similar foods, be kosher for Passover?
List *all* the tuples!
How to create custom shaped Buttons in WPF?
Announcing the arrival of Valued Associate #679: Cesar Manara
Planned maintenance scheduled April 17/18, 2019 at 00:00UTC (8:00pm US/Eastern)
The Ask Question Wizard is Live!
Data science time! April 2019 and salary with experience
Should we burninate the [wrap] tag?Make GeometryDrawing interactive map from the UI? (Interact with an SVG image in WPF)How do I calculate someone's age in C#?What is the correct way to create a single-instance WPF application?How do you give a C# Auto-Property a default value?How do I enumerate an enum in C#?How to create Excel (.XLS and .XLSX) file in C# without installing Ms Office?How do I get a consistent byte representation of strings in C# without manually specifying an encoding?How do I generate a random int number?What is a NullReferenceException, and how do I fix it?Flattening SVG matrix transforms in InkscapeHow to rotate image about its centre rather than about the canvas it is on in WPF, C#
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty height:90px;width:728px;box-sizing:border-box;
(Before this gets marked as a duplicate, I'd like to say that I've tried the answers on other posts, but they don't seem to work for my specific issue.)
I'm creating a sort of "map game", where there's a map split into multiple areas. Currently, this is what I have:
It works, but it's not pretty. I want to make the buttons (currently they're the Rectangle control, but I can change that easily) the right shape.
I tried making a path in Inkscape, which gave me this SVG path:
m 283.60033,267.22114 11.61675,32.57742 14.14214,-8.33376 10.35406,-1.01015 11.61676,-5.3033 10.6066,-5.05077 0,-16.66751 -34.85027,-3.78808 -8.08122,2.77792 -14.64721,0.75762 z
However, when I tried to make a Button (and later Polygon) use the path, it didn't work and instead made a completely different shape.
The Buttons need to have a background color that can change during runtime, so a PictureBox won't work.
Is there a reason why the Path didn't work? Or maybe there is a much easier method?
EDIT: Here is the code I used for the Polygon
<Polygon Fill="Blue" Points="283.60033,267.22114 11.61675,32.57742 14.14214,-8.33376 10.35406,-1.01015 11.61676,-5.3033 10.6066,-5.05077 0,-16.66751 -34.85027,-3.78808 -8.08122,2.77792 -14.64721,0.75762" Margin="248,102,956,22" RenderTransformOrigin="0.5,0.5" Grid.ColumnSpan="2"/>
And here is the result, which is the same shape I got when I tried changing the shape of a Button (unfortunately I deleted the code for that):
Here is what it should look like (path drawn in Inkscape):
c# wpf inkscape
asked Mar 8 at 16:13
m654m654
93113
add a comment |
(Before this gets marked as a duplicate, I'd like to say that I've tried the answers on other posts, but they don't seem to work for my specific issue.)
I'm creating a sort of "map game", where there's a map split into multiple areas. Currently, this is what I have:
It works, but it's not pretty. I want to make the buttons (currently they're the Rectangle control, but I can change that easily) the right shape.
I tried making a path in Inkscape, which gave me this SVG path:
m 283.60033,267.22114 11.61675,32.57742 14.14214,-8.33376 10.35406,-1.01015 11.61676,-5.3033 10.6066,-5.05077 0,-16.66751 -34.85027,-3.78808 -8.08122,2.77792 -14.64721,0.75762 z
However, when I tried to make a Button (and later Polygon) use the path, it didn't work and instead made a completely different shape.
The Buttons need to have a background color that can change during runtime, so a PictureBox won't work.
Is there a reason why the Path didn't work? Or maybe there is a much easier method?
EDIT: Here is the code I used for the Polygon
<Polygon Fill="Blue" Points="283.60033,267.22114 11.61675,32.57742 14.14214,-8.33376 10.35406,-1.01015 11.61676,-5.3033 10.6066,-5.05077 0,-16.66751 -34.85027,-3.78808 -8.08122,2.77792 -14.64721,0.75762" Margin="248,102,956,22" RenderTransformOrigin="0.5,0.5" Grid.ColumnSpan="2"/>
And here is the result, which is the same shape I got when I tried changing the shape of a Button (unfortunately I deleted the code for that):
Here is what it should look like (path drawn in Inkscape):
c# wpf inkscape
asked Mar 8 at 16:13
m654m654
93113
1
Would you please provide the code used to define your rectangle / polygons (not just the path)?
– SharpNip
Mar 8 at 16:58
@SharpNip Sure! I edited the post.
– m654
Mar 8 at 18:10
1
For some added context; Might browse this one
– Chris W.
Mar 8 at 19:19
add a comment |
(Before this gets marked as a duplicate, I'd like to say that I've tried the answers on other posts, but they don't seem to work for my specific issue.)
I'm creating a sort of "map game", where there's a map split into multiple areas. Currently, this is what I have:
It works, but it's not pretty. I want to make the buttons (currently they're the Rectangle control, but I can change that easily) the right shape.
I tried making a path in Inkscape, which gave me this SVG path:
m 283.60033,267.22114 11.61675,32.57742 14.14214,-8.33376 10.35406,-1.01015 11.61676,-5.3033 10.6066,-5.05077 0,-16.66751 -34.85027,-3.78808 -8.08122,2.77792 -14.64721,0.75762 z
However, when I tried to make a Button (and later Polygon) use the path, it didn't work and instead made a completely different shape.
The Buttons need to have a background color that can change during runtime, so a PictureBox won't work.
Is there a reason why the Path didn't work? Or maybe there is a much easier method?
EDIT: Here is the code I used for the Polygon
<Polygon Fill="Blue" Points="283.60033,267.22114 11.61675,32.57742 14.14214,-8.33376 10.35406,-1.01015 11.61676,-5.3033 10.6066,-5.05077 0,-16.66751 -34.85027,-3.78808 -8.08122,2.77792 -14.64721,0.75762" Margin="248,102,956,22" RenderTransformOrigin="0.5,0.5" Grid.ColumnSpan="2"/>
And here is the result, which is the same shape I got when I tried changing the shape of a Button (unfortunately I deleted the code for that):
Here is what it should look like (path drawn in Inkscape):
c# wpf inkscape
asked Mar 8 at 16:13
m654m654
93113
(Before this gets marked as a duplicate, I'd like to say that I've tried the answers on other posts, but they don't seem to work for my specific issue.)
I'm creating a sort of "map game", where there's a map split into multiple areas. Currently, this is what I have:
It works, but it's not pretty. I want to make the buttons (currently they're the Rectangle control, but I can change that easily) the right shape.
I tried making a path in Inkscape, which gave me this SVG path:
m 283.60033,267.22114 11.61675,32.57742 14.14214,-8.33376 10.35406,-1.01015 11.61676,-5.3033 10.6066,-5.05077 0,-16.66751 -34.85027,-3.78808 -8.08122,2.77792 -14.64721,0.75762 z
However, when I tried to make a Button (and later Polygon) use the path, it didn't work and instead made a completely different shape.
The Buttons need to have a background color that can change during runtime, so a PictureBox won't work.
Is there a reason why the Path didn't work? Or maybe there is a much easier method?
EDIT: Here is the code I used for the Polygon
<Polygon Fill="Blue" Points="283.60033,267.22114 11.61675,32.57742 14.14214,-8.33376 10.35406,-1.01015 11.61676,-5.3033 10.6066,-5.05077 0,-16.66751 -34.85027,-3.78808 -8.08122,2.77792 -14.64721,0.75762" Margin="248,102,956,22" RenderTransformOrigin="0.5,0.5" Grid.ColumnSpan="2"/>
And here is the result, which is the same shape I got when I tried changing the shape of a Button (unfortunately I deleted the code for that):
Here is what it should look like (path drawn in Inkscape):
c# wpf inkscape
c# wpf inkscape
asked Mar 8 at 16:13
m654m654
93113
asked Mar 8 at 16:13
m654m654
93113
edited Mar 8 at 18:21
m654
asked Mar 8 at 16:13
m654m654
93113
asked Mar 8 at 16:13
m654m654
93113
asked Mar 8 at 16:13
m654m654
93113
93113
1
Would you please provide the code used to define your rectangle / polygons (not just the path)?
– SharpNip
Mar 8 at 16:58
@SharpNip Sure! I edited the post.
– m654
Mar 8 at 18:10
1
For some added context; Might browse this one
– Chris W.
Mar 8 at 19:19
add a comment |
1
Would you please provide the code used to define your rectangle / polygons (not just the path)?
– SharpNip
Mar 8 at 16:58
@SharpNip Sure! I edited the post.
– m654
Mar 8 at 18:10
1
For some added context; Might browse this one
– Chris W.
Mar 8 at 19:19
1
1
Would you please provide the code used to define your rectangle / polygons (not just the path)?
– SharpNip
Mar 8 at 16:58
Would you please provide the code used to define your rectangle / polygons (not just the path)?
– SharpNip
Mar 8 at 16:58
@SharpNip Sure! I edited the post.
– m654
Mar 8 at 18:10
@SharpNip Sure! I edited the post.
– m654
Mar 8 at 18:10
1
1
For some added context; Might browse this one
– Chris W.
Mar 8 at 19:19
For some added context; Might browse this one
– Chris W.
Mar 8 at 19:19
add a comment |
2 Answers
2
active
oldest
votes
I figured it out and it was actually pretty easy! I actually didn't need Inkscape at all.
I imported the map image into Blend, and I traced the area with the Pen tool and made it into a Path, which I copied back into Visual Studio.
Example:
answered Mar 8 at 19:12
m654m654
93113
add a comment |
Are you sure you didn't get mixed up with which part you picked out the xaml inkscape produced?
Because that's roughly the top right part of the iberian peninsular. Like your drawn map. Roughly anyhow. That's just a polygon - with hard edges. Meaning however you produced it, you didn't trace the curvy/rough edges of what you're showing us.
Also.
If you look at the data that's in it.
See where it starts?
m 283.60033,267.22114
Those are x,y co-ordinates.
268px left, 267px down
From the top left corner of whatever container you put it in.
Is that going to work for you?
answered Mar 8 at 16:58
AndyAndy
3,6481108
Even if I resize the page in Inkscape to the size of the path, it still starts with an even larger number:m 353.69716,262.60424.
– m654
Mar 8 at 18:19
add a comment |
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55066996%2fhow-to-create-custom-shaped-buttons-in-wpf%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
I figured it out and it was actually pretty easy! I actually didn't need Inkscape at all.
I imported the map image into Blend, and I traced the area with the Pen tool and made it into a Path, which I copied back into Visual Studio.
Example:
answered Mar 8 at 19:12
m654m654
93113
add a comment |
I figured it out and it was actually pretty easy! I actually didn't need Inkscape at all.
I imported the map image into Blend, and I traced the area with the Pen tool and made it into a Path, which I copied back into Visual Studio.
Example:
answered Mar 8 at 19:12
m654m654
93113
add a comment |
I figured it out and it was actually pretty easy! I actually didn't need Inkscape at all.
I imported the map image into Blend, and I traced the area with the Pen tool and made it into a Path, which I copied back into Visual Studio.
Example:
answered Mar 8 at 19:12
m654m654
93113
I figured it out and it was actually pretty easy! I actually didn't need Inkscape at all.
I imported the map image into Blend, and I traced the area with the Pen tool and made it into a Path, which I copied back into Visual Studio.
Example:
answered Mar 8 at 19:12
m654m654
93113
answered Mar 8 at 19:12
m654m654
93113
answered Mar 8 at 19:12
m654m654
93113
answered Mar 8 at 19:12
m654m654
93113
93113
add a comment |
add a comment |
Are you sure you didn't get mixed up with which part you picked out the xaml inkscape produced?
Because that's roughly the top right part of the iberian peninsular. Like your drawn map. Roughly anyhow. That's just a polygon - with hard edges. Meaning however you produced it, you didn't trace the curvy/rough edges of what you're showing us.
Also.
If you look at the data that's in it.
See where it starts?
m 283.60033,267.22114
Those are x,y co-ordinates.
268px left, 267px down
From the top left corner of whatever container you put it in.
Is that going to work for you?
answered Mar 8 at 16:58
AndyAndy
3,6481108
Even if I resize the page in Inkscape to the size of the path, it still starts with an even larger number:m 353.69716,262.60424.
– m654
Mar 8 at 18:19
add a comment |
Are you sure you didn't get mixed up with which part you picked out the xaml inkscape produced?
Because that's roughly the top right part of the iberian peninsular. Like your drawn map. Roughly anyhow. That's just a polygon - with hard edges. Meaning however you produced it, you didn't trace the curvy/rough edges of what you're showing us.
Also.
If you look at the data that's in it.
See where it starts?
m 283.60033,267.22114
Those are x,y co-ordinates.
268px left, 267px down
From the top left corner of whatever container you put it in.
Is that going to work for you?
answered Mar 8 at 16:58
AndyAndy
3,6481108
Even if I resize the page in Inkscape to the size of the path, it still starts with an even larger number:m 353.69716,262.60424.
– m654
Mar 8 at 18:19
add a comment |
Are you sure you didn't get mixed up with which part you picked out the xaml inkscape produced?
Because that's roughly the top right part of the iberian peninsular. Like your drawn map. Roughly anyhow. That's just a polygon - with hard edges. Meaning however you produced it, you didn't trace the curvy/rough edges of what you're showing us.
Also.
If you look at the data that's in it.
See where it starts?
m 283.60033,267.22114
Those are x,y co-ordinates.
268px left, 267px down
From the top left corner of whatever container you put it in.
Is that going to work for you?
answered Mar 8 at 16:58
AndyAndy
3,6481108
Are you sure you didn't get mixed up with which part you picked out the xaml inkscape produced?
Because that's roughly the top right part of the iberian peninsular. Like your drawn map. Roughly anyhow. That's just a polygon - with hard edges. Meaning however you produced it, you didn't trace the curvy/rough edges of what you're showing us.
Also.
If you look at the data that's in it.
See where it starts?
m 283.60033,267.22114
Those are x,y co-ordinates.
268px left, 267px down
From the top left corner of whatever container you put it in.
Is that going to work for you?
answered Mar 8 at 16:58
AndyAndy
3,6481108
answered Mar 8 at 16:58
AndyAndy
3,6481108
answered Mar 8 at 16:58
AndyAndy
3,6481108
answered Mar 8 at 16:58
AndyAndy
3,6481108
3,6481108
Even if I resize the page in Inkscape to the size of the path, it still starts with an even larger number:m 353.69716,262.60424.
– m654
Mar 8 at 18:19
add a comment |
Even if I resize the page in Inkscape to the size of the path, it still starts with an even larger number:m 353.69716,262.60424.
– m654
Mar 8 at 18:19
Even if I resize the page in Inkscape to the size of the path, it still starts with an even larger number:
m 353.69716,262.60424.– m654
Mar 8 at 18:19
Even if I resize the page in Inkscape to the size of the path, it still starts with an even larger number:
m 353.69716,262.60424.– m654
Mar 8 at 18:19
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55066996%2fhow-to-create-custom-shaped-buttons-in-wpf%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
1
Would you please provide the code used to define your rectangle / polygons (not just the path)?
– SharpNip
Mar 8 at 16:58
@SharpNip Sure! I edited the post.
– m654
Mar 8 at 18:10
1
For some added context; Might browse this one
– Chris W.
Mar 8 at 19:19