我正在学习WPF,并且无法弄清楚我的按钮是如何形成方形的。
这是我的XAML标记:
<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
属性指定显式值似乎是一个错误的想法 - 按钮应根据其内容自动计算其尺寸,但保持其宽度和高度相等。这可能吗?
答案 0 :(得分:45)
试试这个 - 它似乎适用于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>
答案 1 :(得分:4)
我认为你想将按钮的宽度绑定到它的高度,如下所示:
<Button Name="myButton"
Width="{Binding ElementName=myButton, Path=Height}"
Height="100">
Button Text
</Button>
答案 2 :(得分:2)
当前接受的答案无法增长和缩小。我想我发现了一种更好的方法,那就是使用矩形(均匀拉伸)定义自定义样式。
<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。
答案 3 :(得分:1)
对于您希望按钮展开和收缩的情况,我找到了一个更简单的解决方案,特别是在其文本更改时:
<RadioButton Style="{StaticResource ToggleStyle2}"
HorizontalAlignment="Center" VerticalAlignment="Center"
HorizontalContentAlignment="Center" VerticalContentAlignment="Center"
Width="{Binding Path=ActualWidth, ElementName=txtblck_innerText }"
Height="{Binding Path=ActualWidth, ElementName=txtblck_innerText }">
<TextBlock x:Name="txtblck_innerText"
MinWidth="{Binding ActualHeight, RelativeSource={RelativeSource Self}}" >
Very very long text.........
</TextBlock>
</RadioButton>
当按钮的大小由其内容强加(来自内部)如问题所述时,上述解决方案适用。
但是,如果您想要一个方形按钮,其大小是由其所在位置强加(来自外部),例如,大小包含按钮的网格单元格的解决方案可能是:
<RadioButton Style="{StaticResource ToggleStyle2}"
HorizontalAlignment="Center" VerticalAlignment="Center"
HorizontalContentAlignment="Center" VerticalContentAlignment="Center">
<Viewbox Stretch="Uniform">
<Border Width="20" Height="20">
<Viewbox Stretch="Uniform">
<TextBlock x:Name="txtblck_innerText">
Very very long text...........
</TextBlock>
</Viewbox>
</Border>
</Viewbox>
</RadioButton>
答案 4 :(得分:0)
@Dan Pruzey的回答很好,但是如果缩小窗口的尺寸,正方形不会缩小。我发现最有效的方法是将height设置为auto并将width设置为该高度:
<Button Height="Auto" Width="{Binding ActualHeight, RelativeSource={RelativeSource Self}}"/>
在调整窗口的大小时,按钮保持正方形。希望这对某人有帮助。