DockPanel is not visible even though it is set to visible

Question

I have a DockPanel inside another DockPanel the first one is set to be docked on the whole form, but the second one is set on the top of the form and it has three buttons inside it, the background color of it is set to grey, and I can see the content blue border in the editor but it doesn't have a color or a text in it, and when I run the application there is nothing no button no colors nothing.

Here is the XAML code:

<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>

Answer 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.