How to create two trapezoid buttons next to each other?
What I want here: https://i.imgur.com/vBZhnPy.png
The area in the dotted line doesn't need content, but it does need to be clickable and interact like it's part of the Button. Is this possible in Noesis? I know how to draw shapes shown here, but I'm not sure how to make it part of a Button.
The area in the dotted line doesn't need content, but it does need to be clickable and interact like it's part of the Button. Is this possible in Noesis? I know how to draw shapes shown here, but I'm not sure how to make it part of a Button.
-
sfernandez
Site Admin
- Posts: 2984
- Joined:
Re: How to create two trapezoid buttons next to each other?
Take a look at this xamltoy:
Is this what you want?
Is this what you want?
Re: How to create two trapezoid buttons next to each other?
Thanks for the help! It is, but I see the problem when trying to add a border. Would I have to create a separate Path to act as a border for the triangle?
-
sfernandez
Site Admin
- Posts: 2984
- Joined:
Re: How to create two trapezoid buttons next to each other?
Yes, you'll need another Path for the border, I updated my example in xamltoy accordingly.
Re: How to create two trapezoid buttons next to each other?
Oh, thank you so much! The support on this forum always goes above and beyond 🚀
Re: How to create two trapezoid buttons next to each other?
Okay, I actually am struggling because my button heights (65) and stroke thickness (3) is different from your example. Did you make these Paths in a Blend designer? What is the best way to make them? https://i.imgur.com/IuLQ7CW.png
Code: Select all
<Grid UseLayoutRounding="False">
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition Width="20" />
</Grid.ColumnDefinitions>
<Border
Grid.Column="0"
Margin="0,0,0,0"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="3,3,0,3">
<ContentPresenter Margin="10,5,0,5" VerticalAlignment="Center" />
</Border>
<Path
Grid.Column="1"
Data="M0,0L19,0 0,65z"
Fill="{TemplateBinding Background}" />
<Path
Grid.Column="1"
Data="M0,2L17,1 0,63"
Stroke="{TemplateBinding BorderBrush}"
StrokeThickness="3" />
</Grid>
Code: Select all
<Grid Margin="-15,0,0,0" UseLayoutRounding="False">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="20" />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Path
Grid.Column="0"
Data="M20,0L25,60 0,65z"
Fill="{TemplateBinding Background}" />
<Path
Grid.Column="0"
Data="M20,2L2,58 60,63"
Stroke="{TemplateBinding BorderBrush}"
StrokeThickness="3" />
<Border
Grid.Column="1"
Margin="-0.5,0,0,0"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="0,3,3,3">
<ContentPresenter Margin="0,5,5,5" VerticalAlignment="Center" />
</Border>
</Grid>
-
sfernandez
Site Admin
- Posts: 2984
- Joined:
Re: How to create two trapezoid buttons next to each other?
Hi, I updated my xamltoy to have buttons with 65px height and 3px stroke.
I didn't use any designer for this particular example, but I usually edit the paths in Blend using its vector tools.
I didn't use any designer for this particular example, but I usually edit the paths in Blend using its vector tools.
Who is online
Users browsing this forum: Ahrefs [Bot] and 51 guests