Feed on
Posts
Comments
«
»

Sizeable, yet square, content control

Oct 4th, 2010 by

Hard coding the size of control is not a good choice in many situations.  If you specify the height of a button and the font size increases you might see the bottom of your text clipped.  If you hard code the width of the button it can’t grow or shrink to accommodate changes in content size.  For example localizing a string in the button may result in a longer word.  And that may cause the end of the string to be truncated.

Here’s a tip that allows one dimension, either height or width to be modified, yet always keeps the content control constrained to a square.

Use a binding to ActualWidth or ActualHeight to force the control to be a square.

Flexible Height, Matching Width

 <Canvas>
    <Button Content='A' Padding='0'
            FontSize='16'
            Width='{Binding RelativeSource={RelativeSource Self}, Path=ActualHeight}' />

    <Button Content='A' Padding='0'
            FontSize='60'
            Width='{Binding RelativeSource={RelativeSource Self}, Path=ActualHeight}'
            Canvas.Top='40' />

  </Canvas>

image

Figure 1: Changing font size modifies the width.

Flexible Width, Matching Height

<Canvas>
    <Button Content='ABCDEDFG' Padding='0'
            Height='{Binding RelativeSource={RelativeSource Self}, Path=ActualWidth}' />

    <Button Content='ABCD' Padding='0'
            Height='{Binding RelativeSource={RelativeSource Self}, Path=ActualWidth}'
            Canvas.Top='100' />

  </Canvas>

image

Figure 2: Changing the text content modifies the height.

Posted in WPF

Comments are closed.