Question

我正在为WPF应用编写表单，我想使用Button提供的视觉状态。所以我的XAML就是这样：

<Button
    Grid.Column="0"
    Name="GenderMaleButton"
    HorizontalAlignment="Stretch"
    VerticalAlignment="Stretch"
    BorderThickness="0"
    Padding="0">
    <Border
        Background="White"
        BorderThickness="2"
        CornerRadius="5"
        Padding="5"
        HorizontalAlignment="Stretch"
        VerticalAlignment="Stretch">
        <TextBlock/>
    </Border>
</Button>

但我的Border并没有填满我的Button。如何让Border填充Button？或者我如何使用Button的视觉状态以另一种方式影响Border，而不是将Border包裹在Button内？

或者我可以将视觉状态应用到我的Border吗？如果是这样，怎么样？

编辑：我想要的结果是这样的：

所以选择状态（白色边框，蓝色bg）和默认状态（蓝色边框，白色bg）。

Answer 1

从一个艰难的猜测，我认为你需要填充按钮内的边框。尝试下面的代码。使用ControlTemplate

<Button Grid.Column="0"
        Name="GenderMaleButton"
        HorizontalAlignment="Stretch"
        VerticalAlignment="Stretch"
        BorderThickness="0"
        Padding="0">

        <Button.Template>
            <ControlTemplate>                
                <Border Background="#6A6B9A"
                        BorderThickness="2"
                        CornerRadius="5"
                        Padding="5"
                        HorizontalAlignment="Stretch"
                        VerticalAlignment="Stretch">
                        <TextBlock TextAlignment="Center" VerticalAlignment="Center" HorizontalAlignment="Center" FontWeight="Bold" Foreground="White" Text="Male"></TextBlock>
                </Border>              
            </ControlTemplate>
        </Button.Template>
    </Button>

Answer 2

您应该将HorizontalContentAlignment和VerticalContentAlignment设置为Stretch。

<Button
Grid.Column="0"
Name="GenderMaleButton"
HorizontalContentAlignment="Stretch"
VerticalContentAlignment="Stretch"
BorderThickness="0"
Padding="0">
    <Border
    Background="White"
    BorderThickness="2"
    CornerRadius="5"
    Padding="5"
    HorizontalAlignment="Stretch"
    VerticalAlignment="Stretch">
        <TextBlock/>
    </Border>
</Button>

Answer 3

试试这个：

Illuminate\Events\EventServiceProvider

解释我所做的事情;我在水平<StackPanel Height="40" Orientation="Horizontal"> <StackPanel.Resources> <Style x:Key="GenderButtonStyle" TargetType="{x:Type Button}"> <Setter Property="MinWidth" Value="100" /> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="{x:Type Button}"> <Border x:Name="InternalBorder" CornerRadius="5" Padding="5"> <TextBlock x:Name="InternalText" HorizontalAlignment="Center" VerticalAlignment="Center" Text="{TemplateBinding Content}" /> </Border> <ControlTemplate.Triggers> <Trigger Property="Tag" Value="Male"> <Setter TargetName="InternalBorder" Property="Background" Value="RoyalBlue" /> <Setter TargetName="InternalText" Property="Foreground" Value="White" /> </Trigger> <Trigger Property="Tag" Value="Female"> <Setter TargetName="InternalBorder" Property="Background" Value="White" /> <Setter TargetName="InternalBorder" Property="BorderBrush" Value="RoyalBlue" /> <Setter TargetName="InternalBorder" Property="BorderThickness" Value="1,1,1,1" /> <Setter TargetName="InternalText" Property="Foreground" Value="RoyalBlue" /> </Trigger> <Trigger Property="IsMouseOver" Value="True">  </Trigger> <Trigger Property="IsPressed" Value="True">  </Trigger> </ControlTemplate.Triggers> </ControlTemplate> </Setter.Value> </Setter> </Style> </StackPanel.Resources> <Button x:Name="MaleButton" Content="Male" Style="{StaticResource GenderButtonStyle}" Tag="Male" /> <Button x:Name="FemaleButton" Margin="5,0,0,0" Content="Female" Style="{StaticResource GenderButtonStyle}" Tag="Female" /> </StackPanel>内放置了两个按钮，在其资源子标签中我创建了一个按钮样式，然后可以将其分配给您想要的任何按钮。在这种风格中，我已经破解了模板并构建了我自己的小模板，可以完成您所描述的内容。

一般来说，如果一个控件看起来并不像你想要的那样，那么最好的办法就是打开它制作的模板并制作你自己的模板。像这样，您现在可以定义鼠标悬停或对焦或按下它时应该是什么样子。

如何在按钮内拉伸边框？

3 个答案: