Почему Wpf вырезал мою кнопку, когда я установил автоматический размер?

Question

почему моя кнопка, отредактированная с помощью шаблонов, обрезается с правой стороны, когда я пытаюсь установить автоматический размер? Если я устанавливаю фиксированные размеры, этого не происходит.

https://imgur.com/a/ByyAkzl

<ControlTemplate x:Key="botonProducto" TargetType="{x:Type Button}">
        <Grid Margin="20">
            <Ellipse x:Name="outerCircle" Width="{Binding ActualHeight, RelativeSource={RelativeSource Self}}" Height="AUTO" Fill="Black"/>
            <Ellipse x:Name="inCircle" Width="{Binding ActualHeight, RelativeSource={RelativeSource Self}}" Height="AUTO" Margin="5">
                <Ellipse.Fill>
                    <ImageBrush ImageSource="{Binding Path=Tag, RelativeSource={RelativeSource TemplatedParent}}"/>
                </Ellipse.Fill>
            </Ellipse>
        </Grid>
            <ControlTemplate.Triggers>                    
                <Trigger Property="Button.IsPressed" Value="True">
                    <Setter Property="RenderTransform">
                        <Setter.Value>
                            <ScaleTransform ScaleX=".9" ScaleY=".9"/>
                        </Setter.Value>
                    </Setter>
                    <Setter Property="RenderTransformOrigin" Value=".5,.5"/>
                </Trigger>
            </ControlTemplate.Triggers>
        </ControlTemplate>

Код C #

 private void creaBotones()
    {
        int column = 0;
        int row = 0;
        foreach (Producto producto in listaProducto)
        {
            if (column == 4)
            {
                row++;
                column = 0;
            }

            var template = (ControlTemplate)Application.Current.FindResource("botonProducto");

            Button boton = new Button();
            boton.Tag = "/Media/lechuga.png";
            boton.Content = producto.Nombre;                
            boton.Template = template;                   
            Grid.SetColumn(boton, column);
            Grid.SetRow(boton, row);              
            gridMenu.Children.Add(boton);
            column++;
        } 

    }

Я тестировал без полей в сетке, и он тоже не работает

Answer 1

Это потому, что вы привязываете Ellipse Width к ActualHeight, и поскольку ваше окно не квадратное (но широкий прямоугольник), значение высоты больше ширины, поэтому недостаточно широкого места, чтобы поместиться в квадрат.

Чтобы исправить это, вы можете удалить Ellipse With binding

  <Ellipse x:Name="outerCircle"  Fill="Black"/>
  <Ellipse x:Name="inCircle" Margin="5">
       <Ellipse.Fill>
           <ImageBrush ImageSource="{Binding Path=Tag, RelativeSource={RelativeSource TemplatedParent}}"/>
       </Ellipse.Fill>
  </Ellipse>

Если вам нужен квадрат, вы можете использовать Viewbox, установить некоторую высоту и ширину на сетке контейнера

<ControlTemplate x:Key="botonProducto" TargetType="{x:Type Button}">
        <Grid Margin="20">
            <Viewbox>
                <Grid MinHeight="50" MinWidth="50">
                    <Ellipse x:Name="outerCircle"  Fill="Black"/>
                    <Ellipse x:Name="inCircle" Margin="5">
                        <Ellipse.Fill>
                            <ImageBrush ImageSource="{Binding Path=Tag, RelativeSource={RelativeSource TemplatedParent}}"/>
                        </Ellipse.Fill>
                    </Ellipse>
                </Grid>
            </Viewbox>
        </Grid>
        <ControlTemplate.Triggers>
            <Trigger Property="Button.IsPressed" Value="True">
                <Setter Property="RenderTransform">
                    <Setter.Value>
                        <ScaleTransform ScaleX=".9" ScaleY=".9"/>
                    </Setter.Value>
                </Setter>
                <Setter Property="RenderTransformOrigin" Value=".5,.5"/>
            </Trigger>
        </ControlTemplate.Triggers>
    </ControlTemplate>