How to make controls in 2 DataGridTemplateColumns have equal Heights?

Question

I have a DataGrid with two DataGridTemplateColumns. In it a ComboBox and a Button. The ComboBox has a normal Height, but the Canvas of the RubbishBinIcon is 200 x 200. So the Button is way too big! If I set the Height and Width by hand to 20, the Button is shrunk to an acceptable size. But I prefer to set the Height to the Height of the ComboBox. This is the XAML:

            <DataGridTemplateColumn Header="X" >
                <DataGridTemplateColumn.CellTemplate >
                    <DataTemplate>
                        <ComboBox x:Name="CmbGreenRed" Text="{Binding A}" >
                            <ComboBoxItem Content="{x:Static properties:Resources.G}"/>
                            <ComboBoxItem Content="{x:Static properties:Resources.R}"/>
                        </ComboBox>
                    </DataTemplate>
                </DataGridTemplateColumn.CellTemplate>
            </DataGridTemplateColumn>
            <DataGridTemplateColumn Width="Auto" >
                <DataGridTemplateColumn.CellTemplate>
                    <DataTemplate>
                        <StackPanel Orientation="Horizontal">
                            <Button >
                                <Viewbox Stretch="Uniform" Height="20" Width="20">
                                    <ContentControl Content="{StaticResource RubbishBinIcon}" />
                                </Viewbox>
                            </Button>
                        </StackPanel>
                    </DataTemplate>
                </DataGridTemplateColumn.CellTemplate>
            </DataGridTemplateColumn>

I tried to set the Height="{Binding ActualHeight, ElementName=CmbGreenRed}" (and Width as well to make the button square) but then I get the Data Error: 4 : Cannot find source for binding with reference 'ElementName=CmbGreenRed'.

I read here that "DataGridTemplateColumn is not part of the visual or logical tree". So I tried to implement that solution, but I couldn't get it working properly. I had a TwoWay binding to the Height of the Combobox and a OneWay binding to the Height of the Viewbox like the snippets below, but then both controls got too small.

<ComboBox x:Name="CmbGreenRed" Height="{Binding Data.CmbGreenRedHeight, Source={StaticResource Proxy}, Mode=TwoWay}" >
    ...
</ComboBox>

<Viewbox Stretch="Uniform" Height="{Binding Data.CmbGreenRedHeight, Source={StaticResource Proxy}, Mode=OneWay}" />

So is it possible to reduce the size of the Viewbox to normal proportions without using hard coded numbers?

score 0 · Answer 1 · answered Apr 13 '22 at 10:40

Either specify a hardcoded height or bind the actual height of the ComboBox to a source property and then bind the Height of the ViewBox to the same source property:

<ComboBox SizeObserver.Observe="True" SizeObserver.ObservedHeight="{Binding Height,
    Mode=OneWayToSource}" ...>
...    
<Viewbox Stretch="Uniform" Height="{Binding Height}" Width="20">

How to make controls in 2 DataGridTemplateColumns have equal Heights?

1 Answers1