locked
How does the border control work? RRS feed

  • Question

  • In the example code below, note that OuterBorder expands to fill the width of it's parent containter.

    InnerBorder appears to be sized by it's child control (the hyperlink button)

    I don't understand why the two borders behave differently.

    <navigation:Page x:Class="Test1.Views.TestPage" 
               xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
               xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
               xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
               xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
               mc:Ignorable="d"
               xmlns:navigation="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Navigation"
               d:DesignWidth="640" d:DesignHeight="480"
               Title="TestPage Page">
        <Grid x:Name="LayoutRoot">
            <Grid.RowDefinitions>
                <RowDefinition Height="200"></RowDefinition>
                <RowDefinition Height="400"></RowDefinition>
            </Grid.RowDefinitions>
            <TextBlock Text="This is row 0" Grid.Row="0"></TextBlock>
            <Border x:Name="OuterBorder" Background="Blue" BorderBrush="Red" BorderThickness="3" Grid.Row="1">
                <Popup Height="300" Width="500" IsOpen="True" HorizontalOffset="0" VerticalOffset="0">
                    <Border x:Name="InnerBorder" Background="Yellow" BorderBrush="Green" BorderThickness="3">
                        <HyperlinkButton Content="This is row 1" HorizontalAlignment="Center" VerticalAlignment="Center"></HyperlinkButton>
                    </Border>
                </Popup>
            </Border>
    
        </Grid>
    </navigation:Page>


    Monday, January 31, 2011 4:23 PM

Answers

  • Please note that the border control has nothing to do with its parent. it just wrap its child and shows it on the screen.

    Now if you put your border on the screen and the border is inside a grid, Grid stretches its children and so your border will be streached. In trun, your child will also be stretched.

    I hope this is helpful.

    Thanks,
    Radhey

    Tuesday, February 1, 2011 10:20 AM

All replies

  • Your issue is the "PopUp", it shrinkwraps to the objects within it.

    Monday, January 31, 2011 6:06 PM
  • I don't think that is it.  This has the same effect:

    <Border x:Name="OuterBorder" Background="Blue" BorderBrush="Red" BorderThickness="3" Grid.Row="1">
                        <Canvas Height="300" Width="300" >
                            <Border x:Name="InnerBorder" Background="Yellow" BorderBrush="Green" BorderThickness="3" Canvas.Left="10" Canvas.Top="10">
                                <HyperlinkButton Content="This is row 1" HorizontalAlignment="Center" VerticalAlignment="Center"></HyperlinkButton>
                            </Border>
                        </Canvas>
                    </Border>




    Tuesday, February 1, 2011 1:52 AM
  • Using a canvas creates another issue (same end result), use a grid instead. You should get the desired results.

    Tuesday, February 1, 2011 9:51 AM
  • Please note that the border control has nothing to do with its parent. it just wrap its child and shows it on the screen.

    Now if you put your border on the screen and the border is inside a grid, Grid stretches its children and so your border will be streached. In trun, your child will also be stretched.

    I hope this is helpful.

    Thanks,
    Radhey

    Tuesday, February 1, 2011 10:20 AM