How to associate a font size with a variable grid size

Question

I have a grid with two columns and two rows. One single character (Unicode U + 2699) was placed inside the field of the right-hand grid. It looks like this:

I would like the character to automatically adjust his font size so that it matches the grid field in which he was placed (in this case, it should be tied to the height of the second grid line, but since in some cases it may not be clear whether the height or the grid width is less, it would also be useful to know how to bind to the smallest of these 2 values).

My implementation so far is something like the following (I simplified this a bit for an example):

<Grid> <Grid.RowDefinitions> <RowDefinition Height="*"/> <RowDefinition x:Name="heightToBind" Height="40"/> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition Width="14*" /> <ColumnDefinition Width="*" /> </Grid.ColumnDefinitions> <Button FontSize="{Binding ElementName=heightToBind, Path=Height.Value, Mode=OneWay}" Content="&#x2699;" Grid.Row="1" Grid.Column="1" HorizontalAlignment="Right" /> </Grid> 

The problem here is that it only works if the height is a fixed value inside RowDefinitions. I want it to work with the following definition:

 <Grid.RowDefinitions> <RowDefinition Height="4*"/> <RowDefinition x:Name="heightToBind" Height="*"/> </Grid.RowDefinitions> 

As a bonus question, I will also be wondering why it may be that the character is too low, so it is cropped at the bottom (I tried VerticalAlignment="Center" for the button, but without effect).

Answer 1

You can try using ViewBox as button content:

 <Button Grid.Row="1" Grid.Column="1"> <Button.Content> <Viewbox StretchDirection="Both" HorizontalAlignment="Stretch"> <TextBlock Text="&#x2699;" /> </Viewbox> </Button.Content> </Button> 

A ViewBox can stretch and scale your child to fill all the free space ...

Answer 2

You can try to bind to ActualHeight instead of Height :

 <Button FontSize="{Binding ElementName=heightToBind, Path=ActualHeight.Value, Mode=OneWay}" Content="&#x2699;" Grid.Row="1" Grid.Column="1" HorizontalAlignment="Right" /> 

That should work.

* in the grid definition means that the available space is the height, so it is determined only when the page layout is prepared for the layout. If the height is either canceled or changed, the actual height is returned in the ActualHeight property.