使用Viewbox可以拉伸和缩放单个子元素以填满可用空间。
把viewbox直接放在默认格式的button外面
<Viewbox>
<Button>left</Button>
</Viewbox>
默认格式的button
放在圆角button外:
<ControlTemplate x:Key="radiusBtnTemplate" TargetType="Button">
<Border CornerRadius="48" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}">
<ContentPresenter Content="{TemplateBinding ContentControl.Content}" HorizontalAlignment="Center" VerticalAlignment="Center" />
</Border>
</ControlTemplate>
圆角button
此时button中的文字虽然随着屏幕放大而变大,但是文字已经超出了圆角button显示区域,并不美观。
当我们把viewbox加在ContentPresenter外时,同样的CornerRadius获得的button:
viewbox加在ContentPresenter外
如果对button内容和边框的间隔不满意,还可以通过padding或者加一个TextBlock来进行调节:
ContentPresenter外加一个TextBlock
<ControlTemplate x:Key="radiusBtnTemplate" TargetType="Button">
<Border CornerRadius="48" Name="PART_Background" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}">
<Viewbox>
<TextBlock Margin="10">
<ContentPresenter Content="{TemplateBinding ContentControl.Content}" HorizontalAlignment="Center" VerticalAlignment="Center" />
</TextBlock>
</Viewbox>
</Border>
</ControlTemplate>
网友评论