Button ControlTemplate and rounded corners

耗尽温柔 提交于 2019-12-10 19:07:30

问题


I have a controltemplate for buttons. I want to make the buttons with rounded corners. How should I do this?

I tried CornerRadius for button in the Border but it doesn't work. The background of the button has set to an image that has corner borders and the button looks akward as I can't set the corners for the button.


回答1:


Try the following:

<Style x:Key="GlassButton" TargetType="{x:Type Button}">
    <Setter Property="FontSize" Value="42" />
    <Setter Property="Foreground" Value="White" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type Button}">
                <Border x:Name="border"
                        CornerRadius="25"
                        BorderThickness="4"
                        Background="#AA000000"
                        BorderBrush="Red"
                        RenderTransformOrigin="0.5,0.5">
                    <ContentPresenter x:Name="ButtonContentPresenter"
                                      VerticalAlignment="Center"
                                      HorizontalAlignment="Center" />
                </Border>

                <ControlTemplate.Triggers>
                    <Trigger Property="IsMouseOver" Value="True">
                        <Setter TargetName="border" Property="BorderBrush" Value="#FF4788c8" />
                        <Setter Property="Foreground" Value="#FF4788c8" />
                    </Trigger>
                    <Trigger Property="IsPressed" Value="True">
                        <Setter Property="Background">
                            <Setter.Value>
                                <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                                    <GradientStop Color="#FFFFD190" Offset="0.35" />
                                    <GradientStop Color="Orange" Offset="0.95" />
                                    <GradientStop Color="#FFFFD190" Offset="1" />
                                </LinearGradientBrush>
                            </Setter.Value>
                        </Setter>
                        <Setter TargetName="content" Property="RenderTransform">
                            <Setter.Value>
                                <TranslateTransform Y="1.0" />
                            </Setter.Value>
                        </Setter>
                    </Trigger>
                    <Trigger Property="IsDefaulted" Value="True">
                        <Setter TargetName="border" Property="BorderBrush" Value="#FF282828" />
                    </Trigger>
                    <Trigger Property="IsFocused" Value="True">
                        <Setter TargetName="border" Property="BorderBrush" Value="#FF282828" />
                    </Trigger>
                    <Trigger Property="IsEnabled" Value="False">
                        <Setter TargetName="border" Property="Opacity" Value="0.7" />
                        <Setter Property="Foreground" Value="Gray" />
                    </Trigger>

                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>


来源:https://stackoverflow.com/questions/2594065/button-controltemplate-and-rounded-corners

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!