WPF中Button的实现样式

Question

I have a quick question. I have implemented style for button. And it basically works. Here is the code (complete example: you can copy and paste, it will work):

<Window x:Class="TestWPFApplication.Window5"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:TestWPFApplication"
        mc:Ignorable="d"
        Title="Window5" Height="300" Width="300">
    <Window.Resources>
        <Style TargetType="{x:Type Button}" x:Key="AButton">
            <Setter Property="Width" Value="120"></Setter>
            <Setter Property="Height" Value="50"></Setter>
            <Setter Property="Background" Value="DarkGreen" />
            <Setter Property="Foreground" Value="LightGreen" />
            <Setter Property="FontSize" Value="22" />
            <Setter Property="FontWeight" Value="Light" />
            <Setter Property="SnapsToDevicePixels" Value="True" />

            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type Button}">
                        <Border CornerRadius="15" Background="{TemplateBinding Background}">
                            <ContentPresenter x:Name="MyContentPresenter" Content="{TemplateBinding Content}" 
                                              HorizontalAlignment="Center" VerticalAlignment="Center" Margin="0,0,0,0" />
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Window.Resources>
    <Grid>
        <Button x:Name="QuitButton" Style="{StaticResource AButton}" Content="Quit" />
    </Grid>
</Window>

It's all fine. Button looks like this:

BUT If I move slightly the button, and the Margin property will be auto-generated, to this...

<Button x:Name="QuitButton" Style="{StaticResource AButton}" Content="Quit" Margin="88,114,87,108.5" />

.. button will look like this:

Right and bottom side of the button has been cut off. Don't know why:/ The question is: Can anyone explain me this? Thanks in advance!

Answer 1

You've set the top margin to 114 and the bottom margin to 108.5 for a total of 225.5, but you've also set the total Window height to 300. That leaves just 77.5 pixels for the caption bar, the top and bottom window borders and the button (which you've set to 120 pixels high). The only way for WPF to make everything fit is to crop the button. (The same thing is happening in the X axis).

Set WindowStyle="None" and ResizeMode="NoResize" on your main window and you'll see the button now has enough room to draw fine. Better yet, set the right and bottom margin values to 0 and you can now set left and top to whatever you want.