【问题标题】：button inside border边框内的按钮
【发布时间】：2011-12-27 14:55:32
【问题描述】：

我对边框内的按钮有疑问。我希望按钮填充边框内的按钮空间，但按钮位于边框上方而不是边框下方。这样它就隐藏了边框的圆弧半径。

这是我的问题的图片：

有人知道如何将按钮放在边框下方吗？

这是我的按钮的 xaml：

<Button Name="filterCustomerBtn" 
        Command="{Binding Path=UpdateDepartments}" 
        Style="{StaticResource defaultButtonStyle}" 
        Width="200" 
        Margin="0, 15, 0, 0" 
        HorizontalAlignment="Center">Filter now</Button>

这里是相关的xaml代码：

<Window.Resources>
    <Style x:Key="defaultButtonStyle" TargetType="Button">
        <Setter Property="Margin" Value="2"></Setter>
    </Style>
</Window.Resources>


<StackPanel Orientation="Vertical" DockPanel.Dock="Top">
    <Border Style="{StaticResource MainBorderStyle}" Margin="2" Background="LightBlue">
        <StackPanel Orientation="Vertical" VerticalAlignment="Center">
            <Button Name="filterCustomerBtn" Command="{Binding Path=UpdateDepartments}" Style="{StaticResource defaultButtonStyle}" Width="200" Margin="0, 15, 0, 0" HorizontalAlignment="Center" Panel.ZIndex="-1">Filter now</Button>
        </StackPanel>
    </Border>
</StackPanel>

结果图片

【问题讨论】：

最好的办法是覆盖按钮的Template。您可以将边框放在按钮的顶部，但按钮的角仍然会伸出。它们没有被边框的圆角半径剪裁。
我不确定你想要什么。你能发一张它应该是什么样子的图片吗？
你想改变按钮的外观吗？如果是这样，只需覆盖它的模板，就像@Rachel 说的那样。
你可以为你的 MainBorderStyle 发布 Xaml

标签： c# wpf button border

【解决方案1】：

由于您的边框具有圆角半径，因此在按钮的默认样式的上下文中您无法做很多事情来将其圆角以使其看起来与边框无缝。我用几个不同的控件遇到了这个问题，包括按钮。您的问题的解决方案是为按钮创建一个 ControlTemplate。在此模板中，您将能够将按钮底角的半径或所有 4 个角（如果您愿意）设置为边框的匹配角半径。单击here 获取创建圆形按钮模板的好示例。下面我试图通过删除悬停动画来简化博客代码。专注于边框部分，因为它们是主要模板。

<Style x:Key="RoundedButton" TargetType="{x:Type Button}">
    <Setter Property="Background" Value="{TemplateBinding Background}"/>
    <Setter Property="Foreground" Value="{TemplateBinding Foreground}"/>
    <Setter Property="BorderThickness" Value="1"/>
    <Setter Property="HorizontalContentAlignment" Value="Center"/>
    <Setter Property="VerticalContentAlignment" Value="Center"/>
    <Setter Property="Padding" Value="0,0,1,1"/>
    <Setter Property="Template">
    <Setter.Value>
        <ControlTemplate TargetType="{x:Type Button}">                        
            <Border 
                CornerRadius="5,5,5,5" 
                BorderThickness="1,1,1,1" 
                RenderTransformOrigin="0.5,0.5" 
                x:Name="border" 
                BorderBrush="#000000">
                    <Border.RenderTransform>
                        <TransformGroup>
                            <ScaleTransform ScaleX="1" ScaleY="1"/>
                            <SkewTransform AngleX="0" AngleY="0"/>
                            <RotateTransform Angle="0"/>
                            <TranslateTransform X="0" Y="0"/>
                        </TransformGroup>
                    </Border.RenderTransform>
                    <Border 
                        Background="{TemplateBinding Background}" 
                        CornerRadius="5,5,5,5" 
                        x:Name="border1">
                        <Grid>
                            <Grid.RowDefinitions>
                                <RowDefinition Height="0.5*"/>
                                <RowDefinition Height="0.5*"/>
                            </Grid.RowDefinitions>
                            <Border Grid.Row="0" CornerRadius="5,5,0,0">
                                <Border.Background>
                                    <LinearGradientBrush 
                                        EndPoint="0.5,1" 
                                        StartPoint="0.5,0">
                                        <GradientStop 
                                            Color="#00FFFFFF" 
                                            Offset="0"/>
                                        <GradientStop 
                                            Color="#7EFFFFFF" 
                                            Offset="1"/>
                                    </LinearGradientBrush>
                                </Border.Background>
                            </Border>                                
                            <ContentPresenter 
                                VerticalAlignment="Center"  
                                Grid.RowSpan="2" 
                                HorizontalAlignment="Center" 
                                x:Name="contentPresenter"/>
                        </Grid>
                    </Border>
                </Border>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsEnabled" Value="False">
                        <Setter 
                            Property="Opacity" 
                            TargetName="border1"  
                            Value="0.5"/>
                        <Setter 
                            Property="Opacity" 
                            TargetName="border" 
                            Value="1"/>
                        <Setter 
                            Property="Opacity" 
                            TargetName="contentPresenter" 
                            Value="0.5"/>
                    </Trigger>
                    <Trigger 
                        Property="IsPressed" 
                        Value="True">
                        <Setter 
                            Property="RenderTransform" 
                            TargetName="border">
                            <Setter.Value>
                                <TransformGroup>
                                    <ScaleTransform 
                                        ScaleX="0.9" 
                                        ScaleY="0.9"/>
                                    <SkewTransform 
                                        AngleX="0" 
                                        AngleY="0"/>
                                    <RotateTransform 
                                        Angle="0"/>
                                    <TranslateTransform 
                                        X="0" 
                                        Y="0"/>
                                </TransformGroup>
                            </Setter.Value>
                        </Setter>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

另外，这里有一个链接到关于这个主题的MSDN 页面。

【讨论】：

当使用上面的示例时，按钮功能（点击等）消失了。有没有一种简单的方法来添加默认功能，或者我必须像 MSDN 上的示例一样实现它们？
对不起。刚刚意识到所有的事件都被调用了。谢谢

【解决方案2】：

您可以使用ZIndex 属性将按钮向下移动到边框

试试这个

<Button Name="filterCustomerBtn" 
Command="{Binding Path=UpdateDepartments}" 
Style="{StaticResource defaultButtonStyle}" 
Width="200" 
Margin="0, 15, 0, 0" 
HorizontalAlignment="Center" Panel.ZIndex="-1">Filter now</Button>

【讨论】：

智能感知不起作用。尝试写上一行然后编译代码
它不会改变任何东西:(
是的，我也可以... 2 sek

【解决方案3】：

您希望按钮在边框下方...但您将其作为内容在边框内。那是行不通的..

将边框放在两行两列的网格中，将边框及其内容放在跨越两列的行上，然后将按钮放在不同行的第一列，然后 margin按钮到您想要的边框上的位置。这是一个例子：

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="*" />
        <RowDefinition Height="20" />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="348*" />
        <ColumnDefinition Width="155*" />
    </Grid.ColumnDefinitions>
    <Border Style="{StaticResource MainBorderStyle}"
        Margin="2"
        Height="100"
        Background="LightBlue"
            Grid.ColumnSpan="2">
        <StackPanel Orientation="Vertical"
                VerticalAlignment="Center">
        <TextBlock Text="Nothing" Width="50"/>
    </StackPanel>
</Border>
<Button Name="filterCustomerBtn"
        Grid.Column="1"
        Grid.Row="1"
        Command="{Binding Path=UpdateDepartments}"
        Width="100"
        Height="24"
        HorizontalAlignment="Right"
        Margin="0,-55,5,0"
        Panel.ZIndex="100">Filter now</Button>
</Grid>

【讨论】：

我认为它们的意思是按钮边缘显示在边界线上方。
没错——你错过了我的问题。我想把按钮放在边框后面。喜欢 Photoshop 图层
好的...但是边框后面的按钮有什么意义呢？那为什么不把按钮画成边框呢？
这是因为我希望按钮填充边框的底部。我会在 2 分钟内上传一张结果图片