Search code examples
wpfxaml

How to create adaptive custom shape in wpf xaml

I need custom shape for buttons in my wpf app. The shape needs to be like rectangle but with 45 degree cut opposite corners like this. But this app will be used on different screens and button width is going to depend of container width where the button in. When width of button different to path with in xaml code the corners angle deforms like this. How can I fix it to change size only of streight lines or save button's aspect ratio when button's size is changing by container. My XAML code:

                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="{x:Type Button}">
                            <Path Fill="{TemplateBinding Background}"
                                      Stroke="{TemplateBinding Foreground}"
                                      Data="M 0 20 L 20 0 L 100 0 L 100 60 L 80 80 L 0 80 Z"
                                      Stretch="Fill">
                            </Path>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
Solution

  • you could use transform instead of geometry:

    <Button VerticalContentAlignment="Center"
        HorizontalContentAlignment="Center"
        BorderBrush="Blue"
        Content="HELLO WORLD">
    <Button.Template>
        <ControlTemplate TargetType="Button">
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="50"/>
                    <RowDefinition/>
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition/>
                    <ColumnDefinition Width="50"/>
                </Grid.ColumnDefinitions>

                <Border Background="Lime"
                        BorderBrush="{TemplateBinding BorderBrush}"
                        BorderThickness="3,3,0,0">
                    <Border.RenderTransform>
                        <SkewTransform AngleX="-45" CenterY="50"/>
                    </Border.RenderTransform>
                </Border>

                <Border Background="LightGreen" 
                        BorderBrush="{TemplateBinding BorderBrush}"
                        BorderThickness="3,0,0,3" 
                        Grid.Row="1">
                    <ContentPresenter 
                        HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                        VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                </Border>

                <Border Background="Green" 
                        BorderBrush="{TemplateBinding BorderBrush}"
                        BorderThickness="0,0,3,3" 
                        Grid.Row="1" Grid.Column="1">
                    <Border.RenderTransform>
                        <SkewTransform AngleY="-45"/>
                    </Border.RenderTransform>
                </Border>
            </Grid>
        </ControlTemplate>
    </Button.Template>
</Button>

    button