Page 1 of 1

How to create two trapezoid buttons next to each other?

Posted: 07 Jul 2021, 20:10
by asusralis
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.

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

Posted: 08 Jul 2021, 01:25
by sfernandez
Take a look at this xamltoy:



Is this what you want?

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

Posted: 09 Jul 2021, 08:42
by asusralis
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?

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

Posted: 09 Jul 2021, 10:00
by sfernandez
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?

Posted: 09 Jul 2021, 18:32
by asusralis
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?

Posted: 09 Jul 2021, 20:55
by asusralis
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>

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

Posted: 12 Jul 2021, 10:15
by sfernandez
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.