binding height/width to child element in XAML

Question

Let me start by saying sorry if this is a duplicate. I was unable to find an answer in any of the similar posts that I have read. I am having an issue where I have a Border control whose Height and Width are bound to the ActualHeight and ActualWidth of a TextBlock that is a child of the Border .

Everything displays fine in the designer, but for some reason at run-time, the Border control is not visible. I am not sure if it is because the Height or Width may be 0 , or perhaps the Visibility is being set some other way. If I hard code the Height / Width then everything displays the same in the designer and at runtime, but something is acting bizarre with this binding. Even more bizarre, is that they were working before, and I'm not sure what I could have done to break them. Here is my XAML:

<Grid Visibility="{Binding Path=Contacts.Count, Converter={StaticResource ItemCountToVisibilityConverter}}" >
    <Border CornerRadius="5"
            BorderBrush="White"
            BorderThickness="2"
            Padding="20,15,0,15"
            Margin="0,15,0,15">
         <ListView ItemsSource="{Binding Path=Contacts}">
             <ListView.ItemTemplate>
                 <DataTemplate>
                     <StackPanel>
                         <TextBlock Text="{Binding Path=Name}" />
                         <TextBlock Text="{Binding Path=Number}" />
                         <TextBlock Text="{Binding Path=EmailAddress}" />
                     </StackPanel>
                 </DataTemplate>
             </ListView.ItemTemplate>
         </ListView>
     </Border>
     <Border Background="White"
             CornerRadius="5"
             Height="{Binding Path=ActualHeight, ElementName=ContactsTextBlock}"
             Width="{Binding Path=ActualWidth, ElementName=ContactsTextBlock}"
             VerticalAlignment="Top">
          <TextBlock Text="Contact Information"  
                     x:Name="ContactsTextBlock"
                     Foreground="Black"
                     Padding="5,2,5,2"
                     HorizontalAlignment="Center"
                     VerticalAlignment="Center" />
    </Border>
</Grid>

It is the second Border control in the XAML that is having the issue. As I said, it displays properly in the designer, but for some reason at runtime, the Border control as well as the TextBlock it contains are not visible. Also, the Grid is working properly, as well as the ListView and the first Border . It is simply the second Border and it's TextBlock that are not functioning properly.

Thanks in advance!

Here is what it looks like at design-time:

Answer 1

Let the Grid do the dirty work for you. I believe the Grid is one of the best controls WPF has.

The trick is dividing the vertical space in three slices, where the two on the top are sized accordingly to the desired space. That is, the TextBlock will determine how tall will be the row pair. You don't have to do anything than enjoying the result...

Here is a sample XAML (I cut the Visibility property for sake of simplicity):

<Grid Margin="40,20">
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="Auto" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>

    <Border 
        CornerRadius="5"
        BorderBrush="White"
        BorderThickness="2"
        Padding="20,15,20,15"
        Background="DimGray"
        Grid.Row="1"
        Grid.RowSpan="2"
        >
        <ListView ItemsSource="{Binding Path=Contacts}">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <StackPanel>
                        <TextBlock Text="{Binding Path=Name}" />
                        <TextBlock Text="{Binding Path=Number}" />
                        <TextBlock Text="{Binding Path=EmailAddress}" />
                    </StackPanel>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
    </Border>

    <Border 
        Background="White"
        CornerRadius="5"
        Grid.Row="0"
        Grid.RowSpan="2"
        HorizontalAlignment="Center"
        >
        <TextBlock 
            Text="Contact Information"  
            x:Name="ContactsTextBlock"
            Foreground="Black"
            Padding="5,2,5,2"
            />
    </Border>
</Grid>

Please, note the ListView border is sharing the middle row, so that the borderline will run "striking" the text.

That renders as follows:

Answer 2

You may want to set up BorderThickness and BorderBrush :

 <Border Background="White"
     Border Background="White"
     CornerRadius="5"
     BorderThickness="1"
     BorderBrush="Gray"
     HorizontalAlignment="Center"
     VerticalAlignment="Top">
    <TextBlock Text="Contact Information"  
             x:Name="ContactsTextBlock"
             Foreground="Black"
             Padding="5,2,5,2"
             HorizontalAlignment="Center"
             VerticalAlignment="Center" />
</Border>