In my application, I have a grid of square buttons. The text content for each button is set at runtime. In most cases, the text is just one character long, but sometimes it's longer. I need to make the whole text to be always visible, i.e. stretch it (change the font size) to fit inside the button's border. How do I do it?
I tried to use a Viewbox, but it doesn't help.
A simplified version of my XAML:
<Viewbox Stretch="Uniform">
<Button Content="Text"
Width="{Binding ActualHeight, RelativeSource={RelativeSource Self}}"/>
</Viewbox>
Any ideas on how can I achieve what I need (i.e. square buttons + text that always fits in)?
Your original suggestion was nearly correct, try this:
<Button>
<Viewbox Stretch="Fill">
<TextBlock Text="Test"/>
</Viewbox>
</Button>
And to apply this to multiple buttons:
<Style x:Key="StretchedButtonContent" TargetType="{x:Type Button}">
<Setter Property="ContentTemplate">
<Setter.Value>
<DataTemplate>
<Viewbox Stretch="Fill">
<ContentPresenter Content="{TemplateBinding Content}"/>
</Viewbox>
</DataTemplate>
</Setter.Value>
</Setter>
</Style>
<Button Style="{StaticResource StretchedButtonContent}" Content="Test" />
My first thought was to use a RenderTransform and a converter. This gives the same result but is more complicated:
<Converters:ScaleConverter x:Key="ScaleConverter" />
<Button>
<TextBlock Text="Test" RenderTransformOrigin="0.5,0.5">
<TextBlock.RenderTransform>
<ScaleTransform>
<ScaleTransform.ScaleX>
<MultiBinding Converter="{StaticResource ScaleConverter}">
<Binding RelativeSource="{RelativeSource AncestorType={x:Type Button}}" Path="ActualWidth" />
<Binding RelativeSource="{RelativeSource AncestorType={x:Type TextBlock}}" Path="ActualWidth" />
</MultiBinding>
</ScaleTransform.ScaleX>
<ScaleTransform.ScaleY>
<MultiBinding Converter="{StaticResource ScaleConverter}">
<Binding RelativeSource="{RelativeSource AncestorType={x:Type Button}}" Path="ActualHeight" />
<Binding RelativeSource="{RelativeSource AncestorType={x:Type TextBlock}}" Path="ActualHeight" />
</MultiBinding>
</ScaleTransform.ScaleY>
</ScaleTransform>
</TextBlock.RenderTransform>
</TextBlock>
</Button
and a converter
public class ScaleConverter : IMultiValueConverter
{
#region Implementation of IMultiValueConverter
public object Convert(object[] values, Type targetType, object parameter, CultureInfo culture)
{
return ((double) values[0])/((double) values[1]);
}
public object[] ConvertBack(object value, Type[] targetTypes, object parameter, CultureInfo culture)
{
throw new NotImplementedException();
}
#endregion
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With