WPFコントロールのサイズを常に親のサイズと同じにする

Question

単純なWPF電卓アプリケーション用のグリッドを作成しようとしていますが、ボタンの描画に問題があります。

グリッド（grdPlusMinus）をコントロール全体のグリッド（grdControls）内のボタン（btnPlusMinus）内で使用しています。その上にシンプルなラベルが付いた楕円形のボタンを作成できます。楕円はボタンの可視部分を塗りつぶすはずです。

次のコードを使用すると、ウィンドウのサイズの変更方法に関係なく、楕円の下端と右端が切り取られます。楕円は常に比例しますが、完全には表示されません。 grdPlusMinusの幅と高さをAuto（コードではなく、VS UIを介して）にリセットすると、grdPlusMinusが1に設定され、その結果grdPlusMinusがすべて1ピクセルに縮小されます。

私はおそらく基本的なレベルで非常に愚かな何かをしているが、私はそれが何であるか考えることができない。 さまざまな種類のバインドと設定を試しました。 ActualWidthの代わりにWidthにバインドするなど - しかし私は何が間違っているのか分かりません。 マージンのためかもしれないと思ったが、マージンを一切取っても問題はそれほど変わらない。

私が間違っていなければならないことを誰かが指摘できますか？ （私は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

これは飛行機から飛び降りると私の傘がうまくいかない理由を尋ねるようなものです。あなたの問題に対する簡単な答えは、そのように使うつもりはありません。 XAMLには最高の測位システムの1つがあり、これを使用するのは簡単です（パフォーマンスはあまり良くないかもしれませんが、心配する必要はありません）。

<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> 

ここでは、gridの仕組みについて詳しく説明します。

Answer 2

それが起こっている理由を私は説明することはできません申し訳ありませんが、私はあなたの希望の結果がこれとボタンラインを交換することによって達成できることを見出し：

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

に注意してください。余白はパディング= " - 5"に置き換えられます