Динамическая компоновка WPF: как применять квадратные пропорции (ширина равна высоте)?

Я изучаю WPF и не могу понять, как заставить мои кнопки принимать квадратную форму.

Вот мой XAML Markup:

<Window x:Class="Example"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Height="368" Width="333">
  <Window.Resources>
    <Style x:Key="ToggleStyle" BasedOn="{StaticResource {x:Type ToggleButton}}"
                            TargetType="{x:Type RadioButton}">
    </Style>
  </Window.Resources>
  <RadioButton Style="{StaticResource ToggleStyle}">
        Very very long text
  </RadioButton>
</Window>

Задание явных значений для атрибутов Width и Height кажется неправильной идеей - кнопка должна автоматически вычислять свои размеры на основе ее содержимого, но сохранить их ширину и высоту. Возможно ли это?

Ответы

Ответ 1

Попробуйте это - он работает в Kaxaml:

<Button 
    MinWidth="{Binding ActualHeight, RelativeSource={RelativeSource Self}}" 
    MinHeight="{Binding ActualWidth, RelativeSource={RelativeSource Self}}">
  Some content
</Button>

(Чтобы проверить, я помещаю TextBox внутри кнопки, потому что это простой способ изменить размер содержимого без повторного анализа Xaml.)

Изменить: извините, вероятно, должен был указать его как стиль, соответствующий вашему примеру:

<Style TargetType="Button" x:Key="SquareButton">
  <Setter Property="MinWidth" Value="{Binding ActualHeight, RelativeSource={RelativeSource Self}}" />
  <Setter Property="MinHeight" Value="{Binding ActualWidth, RelativeSource={RelativeSource Self}}" />
</Style>

Ответ 2

Я думаю, вы хотите привязать ширину кнопки к ее высоте, например:

<Button Name="myButton"
Width="{Binding ElementName=myButton, Path=Height}"
Height="100">
Button Text
</Button>

Ответ 3

В настоящее время принятый ответ не может расти и уменьшаться. Я думаю, что нашел лучший подход, определив собственный стиль с помощью прямоangularьника (растянутого равномерно).

<Style x:Key="SquareButton" TargetType="Button">
    <Setter Property="Foreground" Value="White"/>
    <Setter Property="Background" Value="#3a3a3a" />
    <Setter Property="BorderBrush" Value="#5a5a5a"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type Button}">

                <Border HorizontalAlignment="Center">
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="auto"/>
                        </Grid.ColumnDefinitions>
                        <Rectangle Stretch="Uniform"
                                         Stroke="{TemplateBinding BorderBrush}"
                                         StrokeThickness="4"
                                         Margin="0" 
                                         Fill="{TemplateBinding Background}" 
                                         Panel.ZIndex="1"
                                         />
                        <ContentPresenter Margin="10" 
                           HorizontalAlignment="Center" 
                           VerticalAlignment="Center" 
                           Panel.ZIndex="2" />
                    </Grid>
                    </Border>

            </ControlTemplate>
        </Setter.Value>
    </Setter>
    <Style.Triggers>
        <Trigger Property="IsMouseOver" Value="True">
            <Setter Property="Background" Value="#4a4a4a"/>
        </Trigger>
    </Style.Triggers>
</Style>

Кстати, вы также можете создать идеальную круглую кнопку таким образом. Просто замените Rectangle на Ellipse.

Ответ 4

Ответ @Dan Pruzey был хорош, но не уменьшал площадь, если окно было уменьшено. Что я нашел лучше всего, так это установил высоту на авто и ширину на эту высоту:

<Button Height="Auto" Width="{Binding ActualHeight, RelativeSource={RelativeSource Self}}"/>

Это удерживало кнопку в квадрате, когда размер моего окна становился все больше и меньше. Надеюсь, это кому-нибудь поможет.