Dev express - Custom caption template not filling DockLayout panel

Question

My custom caption template for Dock Layout panel is not filling completely, there is space around caption. Also, how can i make close button use same background style. docklayoutpanel custom caption template with space around

<dxdo:LayoutPanel.CaptionTemplate>
                    <DataTemplate>
                        <Grid HorizontalAlignment="Stretch"
                              DataContext="{Binding DataContext,ElementName=DockLayoutManager1}">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition />
                                <ColumnDefinition />
                            </Grid.ColumnDefinitions>

                            <Border Background="Blue"
                                    Grid.ColumnSpan="2" />

                            <TextBlock TextWrapping="Wrap"
                                       Text="Wells"
                                       >
                            </TextBlock>

                            <StackPanel Orientation="Horizontal"
                                        Grid.Column="1"
                                        HorizontalAlignment="Right">
                                <ToggleButton>
                                ...
                                </ToggleButton>
                                ...
                                <Button/>
                                ...
                            </StackPanel>
                        </Grid>
                    </DataTemplate>

                </dxdo:LayoutPanel.CaptionTemplate>

Answer 1

If you want to change the LayoutPanel caption background, you can use the LayoutPanel.Appearance property.