WPF left button, centered text, right button in a custom control

Question

I'm trying to prototype a new custom control that has a left button, text, and right button.

The XAML looks like this:

<StackPanel Width="250" Orientation="Vertical" >
 
    <DockPanel Background="Azure" Width="250">
        <Button Name="btnLeft" HorizontalAlignment="Left" Width="30" Background="DarkGray" Click="btnAdd_Click" Template="{DynamicResource StandardButtonTemplate1}">
            <StackPanel Orientation="Horizontal">
                <Image Source="/Images/Previous25px.png" VerticalAlignment="Center" Name="imgLeft"></Image>
            </StackPanel>
        </Button>

        <TextBlock Name="tblkModelType" HorizontalAlignment="Center" Foreground="Black" FontSize="20">Import</TextBlock>
        
        <Button Name="btnRight"  HorizontalAlignment="Right" Width="30" Background="DarkGray"  Click="btnAdd_Click" Template="{DynamicResource StandardButtonTemplate1}" >
            <StackPanel Orientation="Horizontal">
                <Image Source="/Images/Next25px.png" VerticalAlignment="Center" Name="imgRight"></Image>
            </StackPanel>
        </Button>
    </DockPanel>
</StackPanel>

The buttons are left and right justified ok, but the (tblkModelType) is left justified right up next to the left button. It doesn't appear that HorizontalAlignment on that tag does anything. If I remove the right button, the TextBlock does center.

Anyone know how to get the buttons on the outside and the TextBlock centered in the Dockpanel? I guess I could use a grid, but it would make the rest of the control more complex.

user2250152 user2250152 · Accepted Answer · 2021-01-05T05:58:33

This should work:

<DockPanel Background="Azure" Width="250" >
    <Button DockPanel.Dock="Left" Name="btnLeft" Width="30" Background="DarkGray" Click="btnAdd_Click" Template="{DynamicResource StandardButtonTemplate1}">
        <StackPanel Orientation="Horizontal">
            <Image Source="/Images/Previous25px.png" VerticalAlignment="Center" Name="imgLeft"></Image>
        </StackPanel>
    </Button>           

    <Button DockPanel.Dock="Right" Name="btnRight" Width="30" Background="DarkGray"  Click="btnAdd_Click" Template="{DynamicResource StandardButtonTemplate1}" >
        <StackPanel Orientation="Horizontal">
            <Image Source="/Images/Next25px.png" VerticalAlignment="Center" Name="imgRight"></Image>
        </StackPanel>
    </Button>
    <TextBlock DockPanel.Dock="Top" HorizontalAlignment="Center" Name="tblkModelType" Foreground="Black" FontSize="20">Import</TextBlock>
</DockPanel>

Use DockPanel.Dock to dock btnLeft to the left of the DockPanel, btnRight to the right. Then for tblkModelType set DockPanel.Dock="Top". This will stretch the TextBlock to the entire width of the DockPanel between buttons.

This works for me. As you said your control is more complex, so in case of any problem share more xaml with us.

WPF left button, centered text, right button in a custom control

1 Answers