我的边框内有按钮有问题。我希望按钮填充边框内的按钮空间,但按钮位于边框上方而不是边框下方。这样它就隐藏了边界所形成的corder半径。
以下是我的问题图片:
有人知道如何将按钮放在边框下方吗?
这是我的按钮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>
答案 0 :(得分:4)
由于您的边框有一个圆角半径,因此在按钮的默认样式环境中,您可以做很多事情来绕圆角使其看起来与边框无缝连接。我遇到了一些不同的控件,包括按钮。您的问题的解决方案是为按钮创建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页面的链接。
答案 1 :(得分:0)
您可以使用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 :(得分:0)
您希望按钮在边框下方 ...但您在边框内将其作为内容。那不行。
将边框放在一个包含两行和两列的网格中,将边框及其内容放在跨越两列的行上,然后是另一行第一列上的按钮,然后 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>