DockPanel 不可見，即使它設置為可見 (DockPanel is not visible even though it is set to visible)

問題描述

DockPanel 不可見，即使它設置為可見 (DockPanel is not visible even though it is set to visible)

我在另一個 DockPanel 中有一個 DockPanel，第一個設置為停靠在整個表單上，但第二個設置在表單的頂部，並且它裡面有三個按鈕，它的背景顏色設置為灰色，我可以在編輯器中看到內容藍色邊框但它沒有顏色或文本，當我運行應用程序時什麼都沒有 沒有按鈕 沒有顏色 什麼都沒有。

這是 XAML 代碼：

<Grid Background="White">
    <DockPanel Name="MainBackground">
        <DockPanel Name="Top" Height="32" Background="#FF707070" DockPanel.Dock="Top" Margin="0, 0, 0, 1000">

            <Button
            Width="46"
            Height="32"
            DockPanel.Dock="Right"
            Margin="687,0,0,398"
            Background="White" Click="Button_Click_1">

                <StackPanel Orientation="Horizontal">
                    <Image Source="Res/RDI.png" Width="20" Height="20"/>
                </StackPanel>

            </Button>
            <Button
            Width="46"
            Height="32"
            Content="×" 
            FontSize="20" DockPanel.Dock="Right" Click="Button_Click" Margin="734,0,0,398" Background="White"/>

        </DockPanel>
    </DockPanel>
</Grid>

參考解法

方法 1:

The issue is that you try to position all controls using Margin, which defeats the purpose of a DockPanel. You can select each of the buttons in XAML and look at the designer in Visual Studio. They are all positioned way off. Do not every use this kind of brittle positioning in WPF. There are lots of panels that already take care of that way easier and responsive to resizing.

For example, try the code below. I removed all the Margins and just set the DockPanel.Dock to Right for the buttons. Please note, that you have to set the LastChildFill to false, otherwise the last control placed in the DockPanel will take up the remaining space and is centered in there, regardless of setting a DockPanel.Dock value on it.

If you set the LastChildFill property to true, which is the default setting, the last child element of a DockPanel always fills the remaining space, regardless of any other dock value that you set on the last child element. To dock a child element in another direction, you must set the LastChildFill property to false and must also specify an explicit dock direction on the last child element.

For the outer DockPanel, I just added a new last Grid that takes up the remaining space. If it was not there, you would also have to set the LastChildFill, otherwise the bar would be centered in the window.

<Grid Background="White">
   <DockPanel Name="MainBackground">
      <DockPanel Name="Top" Height="32" Background="#FF707070" DockPanel.Dock="Top" LastChildFill="False">
         <Button
            Width="46"
            Height="32"
            DockPanel.Dock="Right"
            Background="White" Click="Button_Click_1">
            <StackPanel Orientation="Horizontal">
               <Image Source="Res/RDI.png" Width="20" Height="20"/>
            </StackPanel>
         </Button>
         <Button
            Width="46"
            Height="32"
            Content="×" 
            FontSize="20" DockPanel.Dock="Right" Click="Button_Click" Background="White"/>
      </DockPanel>
      <StackPanel>
         <TextBlock Text="This is where your content would be placed."/>
         <TextBlock Text="Alternatively, set the last child fill of the dock panel to false."/>
      </StackPanel>
   </DockPanel>
</Grid>

Now the buttons are automatically positioned to the right, next to each other.

Of course, you could create the same layout with other panels as well, but since it is not clear what your final layout should look like, I can only provide this example using your structure.

方法 2:

It's here quite sure but with a margin of Margin="0, 0, 0, 1000" propably it's anywhere.

I think this is the issue.

[EDIT] And I see more of these "3 digit margins". Avoid that, it's not how WPF is meant to be used. Use margins as "a little bit of space around the element"

(by ArterPP、thatguy、Klamsi)

參考文件

1. DockPanel is not visible even though it is set to visible (CC BY‑SA 2.5/3.0/4.0)