Argthtjtr

It is impossible to make a triangular button in UWP

For a long time I have been fighting over the solution of the problem which is in principle easily solved in WPF.
In WPF, this was done quite easily...
How to repeat this trick in UWP?

<Window.Resources>

<StreamGeometry x:Key="Geometry">M12,24 L36,0 L36,48 Z</StreamGeometry>

<Style x:Key="FocusVisual">

    <Setter Property="Control.Template">

        <Setter.Value>

            <ControlTemplate>

                <Path Stroke="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}" StrokeThickness="1" StrokeDashArray="1 2" Data="{StaticResource Geometry}" Width="48"/>

            </ControlTemplate>

        </Setter.Value>

    </Setter>

</Style>

<SolidColorBrush x:Key="Button.Static.Background" Color="#FFDDDDDD"/>

<SolidColorBrush x:Key="Button.Static.Border" Color="#FF707070"/>

<SolidColorBrush x:Key="Button.MouseOver.Background" Color="#FFBEE6FD"/>

<SolidColorBrush x:Key="Button.MouseOver.Border" Color="#FF3C7FB1"/>

<SolidColorBrush x:Key="Button.Pressed.Background" Color="#FFC4E5F6"/>

<SolidColorBrush x:Key="Button.Pressed.Border" Color="#FF2C628B"/>

<SolidColorBrush x:Key="Button.Disabled.Background" Color="#FFF4F4F4"/>

<SolidColorBrush x:Key="Button.Disabled.Border" Color="#FFADB2B5"/>

<Style x:Key="TriangleButtonStyle" TargetType="{x:Type Button}">

    <Setter Property="FocusVisualStyle" Value="{StaticResource FocusVisual}"/>

    <Setter Property="Background" Value="{StaticResource Button.Static.Background}"/>

    <Setter Property="BorderBrush" Value="{StaticResource Button.Static.Border}"/>

    <Setter Property="Template">

        <Setter.Value>

            <ControlTemplate TargetType="{x:Type Button}">

                <Path Name="border" Stroke="{TemplateBinding BorderBrush}" Fill="{TemplateBinding Background}" Data="{StaticResource Geometry}" Width="48"/>

                <ControlTemplate.Triggers>

                    <Trigger Property="IsDefaulted" Value="true">

                        <Setter Property="Stroke" TargetName="border" Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}"/>

                    </Trigger>

                    <Trigger Property="IsMouseOver" Value="true">

                        <Setter Property="Fill" TargetName="border" Value="{StaticResource Button.MouseOver.Background}"/>

                        <Setter Property="Stroke" TargetName="border" Value="{StaticResource Button.MouseOver.Border}"/>

                    </Trigger>

                    <Trigger Property="IsPressed" Value="true">

                        <Setter Property="Fill" TargetName="border" Value="{StaticResource Button.Pressed.Background}"/>

                        <Setter Property="Stroke" TargetName="border" Value="{StaticResource Button.Pressed.Border}"/>

                    </Trigger>

                    <Trigger Property="IsEnabled" Value="false">

                        <Setter Property="Fill" TargetName="border" Value="{StaticResource Button.Disabled.Background}"/>

                        <Setter Property="Stroke" TargetName="border" Value="{StaticResource Button.Disabled.Border}"/>

                    </Trigger>

                </ControlTemplate.Triggers>

            </ControlTemplate>

        </Setter.Value>

    </Setter>

</Style>

<RotateTransform x:Key="Rotate090" CenterX="24" CenterY="24" Angle="090"/>

<RotateTransform x:Key="Rotate180" CenterX="24" CenterY="24" Angle="180"/>

<RotateTransform x:Key="Rotate270" CenterX="24" CenterY="24" Angle="270"/>

This is one way there many more way to do this but according to your approach you need this style.

Style

<Style x:Key="ButtonStyle" TargetType="Button">

        <Setter Property="Background" Value="{ThemeResource ButtonBackground}" />

        <Setter Property="Foreground" Value="{ThemeResource ButtonForeground}" />

        <Setter Property="BorderBrush" Value="{ThemeResource ButtonBorderBrush}" />

        <Setter Property="BorderThickness" Value="{ThemeResource ButtonBorderThemeThickness}" />

        <Setter Property="HorizontalAlignment" Value="Left" />

        <Setter Property="VerticalAlignment" Value="Center" />

        <Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}" />

        <Setter Property="FontWeight" Value="Normal" />

        <Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}" />

        <Setter Property="UseSystemFocusVisuals" Value="True" />

        <Setter Property="FocusVisualMargin" Value="-3" />

        <Setter Property="Template">

            <Setter.Value>

                <ControlTemplate TargetType="Button">

                    <Grid x:Name="RootGrid" Background="Transparent">

                        <VisualStateManager.VisualStateGroups>

                            <VisualStateGroup x:Name="CommonStates">

                                <VisualState x:Name="Normal">

                                    <Storyboard>

                                        <PointerUpThemeAnimation Storyboard.TargetName="RootGrid" />

                                    </Storyboard>

                                </VisualState>

                                <VisualState x:Name="PointerOver">

                                    <Storyboard>

                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Path" Storyboard.TargetProperty="Fill">

                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonBackgroundPointerOver}" />

                                        </ObjectAnimationUsingKeyFrames>

                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="BorderBrush">

                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonBorderBrushPointerOver}" />

                                        </ObjectAnimationUsingKeyFrames>

                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">

                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonForegroundPointerOver}" />

                                        </ObjectAnimationUsingKeyFrames>

                                        <PointerUpThemeAnimation Storyboard.TargetName="RootGrid" />

                                    </Storyboard>

                                </VisualState>

                                <VisualState x:Name="Pressed">

                                    <Storyboard>

                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Path" Storyboard.TargetProperty="Fill">

                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonBackgroundPressed}" />

                                        </ObjectAnimationUsingKeyFrames>

                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="BorderBrush">

                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonBorderBrushPressed}" />

                                        </ObjectAnimationUsingKeyFrames>

                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">

                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonForegroundPressed}" />

                                        </ObjectAnimationUsingKeyFrames>

                                        <PointerDownThemeAnimation Storyboard.TargetName="RootGrid" />

                                    </Storyboard>

                                </VisualState>

                                <VisualState x:Name="Disabled">

                                    <Storyboard>

                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Path" Storyboard.TargetProperty="Fill">

                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonBackgroundDisabled}" />

                                        </ObjectAnimationUsingKeyFrames>

                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="BorderBrush">

                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonBorderBrushDisabled}" />

                                        </ObjectAnimationUsingKeyFrames>

                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">

                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonForegroundDisabled}" />

                                        </ObjectAnimationUsingKeyFrames>

                                    </Storyboard>

                                </VisualState>

                            </VisualStateGroup>

                        </VisualStateManager.VisualStateGroups>

                        <Path x:Name="Path" Width="{TemplateBinding Width}"

                    Height="{TemplateBinding Height}"

                    HorizontalAlignment="Stretch"

                    VerticalAlignment="Stretch"

                          Stroke="{TemplateBinding BorderBrush}"

                          Stretch="Fill"                                  

                          Fill="{TemplateBinding Background}"

                          Data="M 300 100 L 500 400 100 400 Z"/>



                        <ContentPresenter

                        x:Name="ContentPresenter"

                        Padding="{TemplateBinding Padding}"

                        HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"

                        VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"

                        AutomationProperties.AccessibilityView="Raw"

                        BorderBrush="{TemplateBinding BorderBrush}"                            

                        Content="{TemplateBinding Content}"

                        ContentTemplate="{TemplateBinding ContentTemplate}"

                        ContentTransitions="{TemplateBinding ContentTransitions}" />

                    </Grid>

                </ControlTemplate>

            </Setter.Value>

        </Setter>

    </Style>

Button

<Button Style="{StaticResource ButtonStyle}" BorderBrush="Black" Background="White" Content="Content" Height="255" Width="300" HorizontalAlignment="Center" />

Output

Note* If You Want any other shape just replace Path Data in style

Point need to taken care:

1) BorderBrush can be remove if you want (Just remove borderbrush from button which i applied).

2) A Diagonal line has more height than straight line, so if you want approx a equilateral triangle always set width more than height as i does, else if set equal height and width you will get a isosceles triangle.

3) Change Background Colour as you want currently i set to white.

4) Padding="0,0,0,0" can be use to align content.

5) Maintain Stroke thickness directly from style.

6) Another way with style is to use polygon, but path is best if you want another shape in future,

If You Want Polygon instead of Path (replace this with path)

<Polygon Points="5,0 10,10, 0,10" 

         Width="{TemplateBinding Width}"                            

         Height="{TemplateBinding Height}"                           

         HorizontalAlignment="Stretch"                            

         VerticalAlignment="Stretch"

         Stroke="{TemplateBinding BorderBrush}"

         StrokeThickness="{TemplateBinding BorderThickness}"

         Stretch="Fill"                                  

         Fill="{TemplateBinding Background}"/>