WPF-减少堆栈面板中项目之间的间隙

Question

I have a popup and it contains a stackpanel. And there are some controls in the stackpanel.

   <Popup Name="popTest" Placement="Mouse" AllowsTransparency="True"     AllowDrop="True" PopupAnimation="Slide" Height="400" Width="500" >

        <Border BorderThickness="5" >
            <StackPanel Background="WhiteSmoke">
                <TextBlock Text="SomeName"  MaxWidth="100" MaxHeight="100" />
                <Image Source="{Binding TestImage, Mode=TwoWay}" Width="300" Height="300" />
                <TextBlock Text="TheOtherName" Margin="0,2,0,0" />
                <TextBlock Text="AnotherName"  TextWrapping="Wrap"  />
            </StackPanel>
        </Border>

       </Popup>

There is a considerbale gap between the items in the stackpanel. I tried using Separator . It did not help me to reduce the gaps. I even tried setting the widths and heights. That too did not work.

Is there any other way to do this ?

Answer 1

Remove MaxWidth="100" MaxHeight="100" from TextBlock. For Image Width="300" Height="300", does the width and height of image you load are 300 and 300, if image is small obviously you see empty space. You can use a Grid instead of stackpanel.

Answer 2

For the image, if the actual aspect ratio of the original resource image is 3 to 2 and you specify Width="300" Height="200" the image will be displayed without spacing between it and the surround text blocks above and below.

If you want to guarantee no padding around such an image, either specify the Height , or the Width , but not both.

Alternatively, if you want to force the image to be displayed as 300 x 200 (even if it is physically larger or of a different aspect ration) fill it to the size you want by setting the Stretch attribute:-

<Image Source="TestImage.jpg" Width="300" Height="200" Stretch="Fill"/>