asusralis
Topic Author
Posts: 142
Joined: 30 Jul 2018, 05:03

How to create two trapezoid buttons next to each other?

07 Jul 2021, 20:10

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.
 
User avatar
sfernandez
Site Admin
Posts: 2983
Joined: 22 Dec 2011, 19:20

Re: How to create two trapezoid buttons next to each other?

08 Jul 2021, 01:25

Take a look at this xamltoy:



Is this what you want?
 
asusralis
Topic Author
Posts: 142
Joined: 30 Jul 2018, 05:03

Re: How to create two trapezoid buttons next to each other?

09 Jul 2021, 08:42

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?
 
User avatar
sfernandez
Site Admin
Posts: 2983
Joined: 22 Dec 2011, 19:20

Re: How to create two trapezoid buttons next to each other?

09 Jul 2021, 10:00

Yes, you'll need another Path for the border, I updated my example in xamltoy accordingly.
 
asusralis
Topic Author
Posts: 142
Joined: 30 Jul 2018, 05:03

Re: How to create two trapezoid buttons next to each other?

09 Jul 2021, 18:32

Oh, thank you so much! The support on this forum always goes above and beyond 🚀
 
asusralis
Topic Author
Posts: 142
Joined: 30 Jul 2018, 05:03

Re: How to create two trapezoid buttons next to each other?

09 Jul 2021, 20:55

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
                                                    <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>
                                                    <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>
 
User avatar
sfernandez
Site Admin
Posts: 2983
Joined: 22 Dec 2011, 19:20

Re: How to create two trapezoid buttons next to each other?

12 Jul 2021, 10:15

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.

Who is online

Users browsing this forum: Google [Bot] and 86 guests