適當調整WPF控件的大小，使其始終與其父控件保持相同的大小

Question

我正在嘗試為簡單的WPF計算器應用程序創建按鈕網格，但是我無法正確繪制按鈕。

我正在整體控件網格（grdControls）內的按鈕（btnPlusMinus）內使用網格（grdPlusMinus），以便可以在其頂部使用帶有簡單標簽的橢圓形按鈕。 橢圓應填充按鈕的可見部分。

使用下面的代碼時，無論窗口的大小如何調整，橢圓的底部和右側都會被“切除”。 橢圓總是成比例的，但永遠不會完全顯示。 當我將grdPlusMinus的Width和Height重置為Auto時（通過VS UI，不在代碼中），它們都設置為1，結果grdPlusMinus-以及其中的所有內容都縮小到一個像素。

我可能在基本層面上做的非常愚蠢，但是我只是想不出它是什么。 我嘗試了所有不同種類的綁定和設置-例如，綁定到Width而不是ActualWidth等-但我無法弄清楚自己在做什么錯。 我以為可能是因為有邊距，但是完全刪除邊距並不會改變很多問題。

誰能指出我必須做錯了什么？ （我在Kaxaml中嘗試了XAML的變體，並遇到了同樣的問題。）

如果有更好的方法-總體而言-我想做的事情，那么我想聽聽一下，但是在嘗試其他任何事情之前，我想知道這是怎么回事。 （我的最終目的是將每個按鈕的高度和寬度設置為按鈕的最小尺寸，以使其始終在按鈕的中心以圓圈顯示，但這是以后要注意的事情，除非這些額外的信息允許更好的解決方案。）

<Window x:Class="Calc.MainWindow"
        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:Calc"
        mc:Ignorable="d"
        Title="MainWindow" Height="651.5" Width="525" WindowStartupLocation="CenterScreen">
    <Grid x:Name="grdControls">
        <Grid.RowDefinitions>
            <RowDefinition/>
            <RowDefinition/>
            <RowDefinition/>
            <RowDefinition/>
            <RowDefinition/>
            <RowDefinition/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition/>
            <ColumnDefinition/>
            <ColumnDefinition/>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>
        <Button x:Name="btnPlusMinus" Grid.Row="5" Background="{x:Null}" BorderBrush="{x:Null}" Foreground="{x:Null}" Margin="4">
            <Grid x:Name="grdPlusMinus" Width="{Binding ActualWidth, ElementName=btnPlusMinus, Mode=OneWay}" Height="{Binding ActualHeight, ElementName=btnPlusMinus, Mode=OneWay}">
                <Ellipse x:Name="ellipse" Stroke="#FF39A8DC" Fill="#FFA0D2E2"/>
                <Label x:Name="label" Content="XXX" HorizontalAlignment="Center" VerticalAlignment="Center" VerticalContentAlignment="Center" Foreground="#FF0A263A" HorizontalContentAlignment="Center"/>
            </Grid>
        </Button>

    </Grid>
</Window>

Answer 1

對不起，我無法解釋為什么會發生這種情況，但是我發現可以通過以下方式替換按鈕行來實現所需的結果：

    <Button x:Name="btnPlusMinus" Grid.Row="5" Background="{x:Null}" BorderBrush="{x:Null}" Foreground="{x:Null}" Padding="-5">

注意邊距已由padding =“-5”代替

Answer 2

好吧，這就像在問為什么當我跳下飛機時我的雨傘不起作用。 您的問題的簡單答案不打算那樣使用。 XAML是有史以來最好的定位系統之一，因此使用起來很容易（性能可能不太好，但您不必為此擔心）。

 <Grid>
        <Grid.RowDefinitions>
            <!-- For what you are doing the multiple rows are not needed you can use relative size they work by adding all the values in rows (1+5) and deviding them by it
            so 5* is 5/6 of parant 
            and 1* is 1/6 of parent height
            -->
            <RowDefinition Height="5*"/>
            <RowDefinition Height="1*"/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <!-- works the same for columns -->
            <ColumnDefinition Width="1*"/>
            <ColumnDefinition Width="4*"/>
        </Grid.ColumnDefinitions>
        <Button Grid.Row="1">
            <Button.Style>
                <!-- this is the template you button will use it's best to use global styles but you can inline it as well-->
                <Style TargetType="Button">
                    <Setter Property="Template" >
                        <Setter.Value>
                            <ControlTemplate TargetType="Button">
                                <Grid>
                                    <Ellipse Stroke="#FF39A8DC" Fill="#FFA0D2E2"/>
                                    <!-- used to show what ever is in you inner button content it can be an image or textblock or anything -->
                                    <ContentPresenter 
                                        Content="{TemplateBinding Content}" 
                                        HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" 
                                        VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />

                                </Grid>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>
            </Button.Style>
            <Label Content="XXX"></Label>
        </Button>
    </Grid>

這里有更多關於網格如何工作的信息。