Sizing problems when using custom WPF dialog control

Question

I am defining a custom control in WPF which serves as the base class for multiple dialog windows which all leverage shared services (positioning, Ok and Cancel buttons). The custom control is defined as follows:

public class ESDialogControl : Window
{
    static ESDialogControl()
    {
        DefaultStyleKeyProperty.OverrideMetadata(typeof(ESDialogControl), new FrameworkPropertyMetadata(typeof(ESDialogControl)));
    }

    internal ESDialogControl() { }

    public ESDialogControl(string title)
    {
        Title = title;
        this.KeyDown += new KeyEventHandler(ESDialogControl_KeyDown);
    }

    void ESDialogControl_KeyDown(object sender, KeyEventArgs e)
    {
        switch (e.Key)
        {
            case Key.Escape: cancelButton_Click(null, null); break;
            case Key.Enter: okButton_Click(null, null); break;
            default: break;
        }
    }

    public override void OnApplyTemplate()
    {
        base.OnApplyTemplate();

        _okButton = base.GetTemplateChild("OkButton") as Button;
        _okButton.IsEnabled = false;
        _okButton.Click += new RoutedEventHandler(okButton_Click);

        Button cancelButton = base.GetTemplateChild("CancelButton") as Button;
        cancelButton.Click += new RoutedEventHandler(cancelButton_Click);
    }

    protected Button OkButton { get { return _okButton; } }

    void cancelButton_Click(object sender, RoutedEventArgs e)
    {
        DialogResult = false;
        Close();
    }

    void okButton_Click(object sender, RoutedEventArgs e)
    {
        DialogResult = true;
        Close();
    }

    Button _okButton;
}

And the Generic.xaml which defines the template looks like this:

<Style TargetType="{x:Type local:ESDialogControl}">
    <Setter Property="Width" Value="600" />
    <Setter Property="Height" Value="Auto" />
    <Setter Property="VerticalAlignment" Value="Top" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type local:ESDialogControl}">
                <Grid Height="Auto" Background="Beige" VerticalAlignment="Top" >
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*" />
                    </Grid.ColumnDefinitions>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="*" />
                        <RowDefinition Height="1" />
                        <RowDefinition Height="Auto" />
                    </Grid.RowDefinitions>
                    <ContentPresenter Grid.Row="0" 
                                      HorizontalAlignment="Stretch" VerticalAlignment="Stretch"
                                      Content="{TemplateBinding Content}" Margin="{TemplateBinding Padding}" />

                    <Rectangle Grid.Row="1" Fill="Navy" />
                    <StackPanel Grid.Row="2" Grid.Column="1" Orientation="Horizontal" HorizontalAlignment="Right">
                        <Button x:Name="OkButton" Width="70" Margin="0 10 10 0">OK</Button>
                        <Button x:Name="CancelButton" Width="70" Padding="2" Margin="0 10 10 0">Cancel</Button>
                    </StackPanel>

                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Finally, I define my new dialog as a derived class:

<local:ESDialogControl x:Class="Mercersoft.Economica.Studio.View.DialogWindows.NewModelDialog"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:local="clr-namespace:Mercersoft.Economica.Studio.View">
    <Grid Background="Yellow" VerticalAlignment="Top" Height="Auto">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="80" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>
        <Label Grid.Row="0" Grid.Column="0" HorizontalAlignment="Right">Name:</Label>
        <TextBox x:Name="ItemName"  x:FieldModifier="public" Grid.Column="1" 
                 HorizontalContentAlignment="Stretch" HorizontalAlignment="Stretch"
                 VerticalContentAlignment="Center" TextAlignment="Left"
                 TextChanged="ItemName_TextChanged" />

        <Label Grid.Row="1" Grid.Column="0" HorizontalAlignment="Right">Description:</Label>
        <TextBox x:Name="ItemDescription" x:FieldModifier="public" Grid.Row="1" Grid.Column="1" 
                 AcceptsReturn="True" TextWrapping="Wrap" Height="140"
                 HorizontalContentAlignment="Stretch" HorizontalAlignment="Stretch"
                 VerticalContentAlignment="Center" TextAlignment="Left" />
    </Grid>
</local:ESDialogControl>

Everything behaves as expected, except that the main window's height is way too large. It doesn't seem to fit just its content, but rather extends almost the entire height of the monitor. I went through the code to make sure VerticalAlignments are set to Top (rather than Stretch) and that the Height properties are set to Auto except for the description text box which has an explicit height.

Which property setting am I missing to get this custom control to size correct?

Answer 1

You are missing the SizeToContent="Height" setting in your ESDialogControl style. You can also take away the Height="Auto" setting, as that is the default for a Window.