WPF 斜角border - 爱码网

最近看了一些科技感UI设计，其中很多的按钮都不是常见的圆角边，而是斜角边。查了一下，wpf中好像没有现成的斜角border，网上也没搜到现成的，于是自己写了点时间做了一个，写的较简单，有一些bug（主要是没有去管一些极值情况），但也基本可用了。

下面与大家分享一下代码：

先上效果：

WPF 斜角border

前台代码：

    <Window.Resources>
        <Style TargetType="{x:Type local:BeveledBorder}">
            <Setter Property="Background" Value="#90000000" />
            <Setter Property="BorderBrush" Value="Black"/>
            <Setter Property="BorderThickness" Value="2"/>
            <Setter Property="Margin" Value="2" />
            <Style.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter Property="Background" Value="#90FF0000"/>
                </Trigger>
            </Style.Triggers>
        </Style>
    </Window.Resources>
    <UniformGrid Rows="1" VerticalAlignment="Center" MinHeight="50">

        <local:BeveledBorder CornerRadius="10,0,10,0">
            <TextBlock Text="123" HorizontalAlignment="Center" VerticalAlignment="Center"/>
        </local:BeveledBorder>

        <local:BeveledBorder CornerRadius="10,10,10,10"/>

        <local:BeveledBorder CornerRadius="10,20,10,20"/>

        <local:BeveledBorder CornerRadius="0,15,0,15"/>

        <local:BeveledBorder Width="40" Height="40"
                             CornerRadius="10,10,10,10"/>

    </UniformGrid>

View Code