Attach the last item of a stackPanel horizontal to the right

stackpanel horizontal alignment stretch
wpf stackpanel horizontal
wpf stackpanel vertical content alignment
wpf dockpanel
wpf grid
wpf stackpanel add items programmatically
dockpanel vs stackpanel
wpf stackpanel spacing

In my WPF application, i created a dockpanel with a stackpanel with orientation=horizontal.

I add some buttons on my stackpanel ( like a toolbar)

I would like to be able to set my last item on my stackpanel to be attached to the right of my window.

Some picture in order to explain.

What i have :

What i would to have :

Here is my XAML :

<DockPanel  Height="40" VerticalAlignment="Top" >
    <Border>

        <StackPanel Orientation="Horizontal" Background="{StaticResource DegradeCouleurTheme}">

            <Image  Source="ElipseGauche.png" Height="28" Margin="10,0,0,0" />

            <StackPanel  Orientation="Horizontal" Height="28">

                <StackPanel.Background>
                    <ImageBrush ImageSource="ElipseMilieu.png"></ImageBrush>
                </StackPanel.Background>

                <Button Template="{StaticResource BoutonRessourcesTpl}" Click="Button_Click_Goto_Premier">
                    <Image Source= "xRtDiva_XWPF_TBR_PREMIER.PNG_IMAGES.png" Height="16"/>
                </Button>

                <Button Template="{StaticResource BoutonRessourcesTpl}" Click="Button_Click_Goto_Precedent">
                    <Image Source= "xRtDiva_XWPF_TBR_PRECED.PNG_IMAGES.png" Height="16"/>
                </Button>

                <Button Template="{StaticResource BoutonRessourcesTpl}" Click="Button_Click_Goto_Suivant">
                    <Image Source= "xRtDiva_XWPF_TBR_SUIVANT.PNG_IMAGES.png" Height="16"/>
                </Button>

                <Button Template="{StaticResource BoutonRessourcesTpl}" Click="Button_Click_Goto_Dernier">
                    <Image Source= "xRtDiva_XWPF_TBR_DERNIER.PNG_IMAGES.png" Height="16"/>
                </Button>

            </StackPanel>

            <Image  Source="ElipseDroite.png" Height="28" Margin="0,0,0,0" />


            <Image  Source="ElipseGauche.png" Height="28" Margin="15,0,0,0" />

            <StackPanel  Orientation="Horizontal" Height="28">

                <StackPanel.Background>
                    <ImageBrush ImageSource="ElipseMilieu.png"></ImageBrush>
                </StackPanel.Background>

                <Button Template="{StaticResource BoutonRessourcesTpl}" Click="Button_Click_Creer" >
                    <Image Source= "Toolbar_Creer.png" Height="16" />
                </Button>

            </StackPanel>

            <Image  Source="ElipseDroite.png" Height="28" Margin="0,0,0,0" />

            <Image  Source="ElipseGauche.png" Height="28" Margin="15,0,0,0" />


            <StackPanel  Orientation="Horizontal" Height="28">

                <StackPanel.Background>
                    <ImageBrush ImageSource="ElipseMilieu.png"></ImageBrush>
                </StackPanel.Background>

                <Button Template="{StaticResource BoutonRessourcesTpl}" Click="Button_Click_Evenement_Supprimer">
                    <Image Source= "Toolbar_Supprimer.png" Height="16"/>
                </Button>

            </StackPanel>

            <Image  Source="ElipseDroite.png" Height="28" Margin="0,0,0,0" />

            <Image  Source="ElipseGauche.png" Height="28" Margin="15,0,0,0" />


            <StackPanel  Orientation="Horizontal" Height="28">

                <StackPanel.Background>
                    <ImageBrush ImageSource="ElipseMilieu.png"></ImageBrush>
                </StackPanel.Background>

                <Button Template="{StaticResource BoutonRessourcesTpl}" Click="Button_Click_Evenement_Joints">
                    <Image Source= "Toolbar_FicJoints.png" Height="18"/>
                </Button>

            </StackPanel>

            <Image  Source="ElipseDroite.png" Height="28" Margin="0,0,0,0" />

            <Image  Source="ElipseGauche.png" Height="28" Margin="15,0,0,0" />


            <StackPanel  Orientation="Horizontal" Height="28">

                <StackPanel.Background>
                    <ImageBrush ImageSource="ElipseMilieu.png"></ImageBrush>
                </StackPanel.Background>

                <Button Template="{StaticResource BoutonRessourcesTpl}" Click="Button_Click_Evenement_Annuler" >
                    <Image Source= "Toolbar_Annuler.png" Height="16"/>
                </Button>

                <Button Template="{StaticResource BoutonRessourcesTpl}" Click="Button_Click_Evenement_Valider">
                    <Image Source= "Toolbar_Valider.png" Height="16"/>
                </Button>

            </StackPanel>

            <Image  Source="ElipseDroite.png" Height="28" Margin="0,0,0,0" />



            <Image  Source="ElipseGauche.png" Height="28" Margin="15,0,0,0" />


            <StackPanel  Orientation="Horizontal" Height="28">

                <StackPanel.Background>
                    <ImageBrush ImageSource="ElipseMilieu.png"></ImageBrush>
                </StackPanel.Background>

                <Button Template="{StaticResource BoutonRessourcesTpl}" Click="Button_Click_App_Parametrer" >
                    <Image Source= "Toolbar_Parametrer.png" Height="16"/>
                </Button>

            </StackPanel>

            <Image  Source="ElipseDroite.png" Height="28" Margin="0,0,0,0" />

            <Grid HorizontalAlignment="Right">
                <StackPanel Orientation="Horizontal" Height="28" >
                    <Image  Source="ElipseGauche.png" Height="28" Margin="15,0,0,0" />


                    <StackPanel  Orientation="Horizontal" Height="28">

                        <StackPanel.Background>
                            <ImageBrush ImageSource="ElipseMilieu.png"></ImageBrush>
                        </StackPanel.Background>

                        <Button Template="{StaticResource BoutonRessourcesTpl}" Click="Button_Click_About" >
                            <Label Margin="0,0,0,1" Foreground="White" Content="About" Height="16"  VerticalAlignment="Center" HorizontalAlignment="Center" Padding="0,0,0,0"/>
                        </Button>

                    </StackPanel>

                    <Image  Source="ElipseDroite.png" Height="28" Margin="0,0,0,0" />
                </StackPanel>
            </Grid>


        </StackPanel>

    </Border>
</DockPanel>

I tried to use a grid with horizontalaligneemnt = right on the last item of my stackpanel but it has no effect ( and it's logic !)

Anyone could help me please ?

Thanks a lot :)

You can not do this with a stackpanel. You will need to use a Grid instead.

Aligning buttons in a StackPanel - MSDN, The last one against the right edge. This xaml (using HorizontalAlignment) doesn'​t do that: <StackPanel Orientation="Horizontal"> <Button  How to: Horizontally or Vertically Align Content in a StackPanel. 03/30/2017; 2 minutes to read +6; In this article. This example shows how to adjust the Orientation of content within a StackPanel element, and also how to adjust the HorizontalAlignment and VerticalAlignment of child content.

How to: Horizontally or Vertically Align Content in a StackPanel , How to: Horizontally or Vertically Align Content in a StackPanel Row="3" Name​="sp1" Background="Yellow"> <Button>Button One</Button> <Button>Button Two</Button> <Button>Button Three</Button> Right; } else if (li. By default, StackPanel stacks items vertically from top to bottom in the order they are declared. You can set the Orientation property to Horizontal to stack items from left to right. You can insert items into a StackPanel at a specific location using the Insert method in code-behind.

You can do this by using in StackPanel Orientation="Horizontal"

The StackPanel control, A thorough description of the WPF StackPanel and its most important features. Instead it stretches it content in one direction, allowing you to stack item after item 2</Button> <Button HorizontalAlignment="Right">Button 3</Button> <Button  1. Make the last column in your Grid with width = "*", and set the final grid in your xaml to be in that row. That way everything in that sub-grid will be all the way to the right – Jeff May 1 '13 at 13:55.

Computer Graphics: Principles and Practice, We'll explain the last two xmlns statements shortly. Recall that each large-scale element (Window, DockPanel, StackPanel, etc.) Between these are other items that constitute the content of these large-scale elements. if it were Horizontal, the stacking would be left-to-right. and </Button> tags, we have the button's content,  A StackPanel places child elements in a vertical or horizontal stack. It is one of the popular panels because of its simplicity. By default, a StackPanel's child element grows from the top of the panel to the bottom, in other words in vertical orientation.

The DockPanel control, A thorough description of the WPF DockPanel and its most important features. makes it easy to dock content in all four directions (top, bottom, left and right). the panel possibilities by using an attached property of it, in this case the DockPanel. If you don't use this, the first control(s) will be docked to the left, with the last  We can use a DockPanel as the main container and add a StackPanel docked on the right and oriented vertically. But when we do this, the StackPanel expands to fill the available space, as does each Button. The HorizontalAlignment of the StackPanel defaults to Stretch, as do each of the buttons.

Right to Left Stack in WPF, 5: <StackPanel Orientation="Horizontal"> 6: <Border But there is one simple method to create horizontal right to left stack. We can use the dock panel and dock every item at the right hand side. Here is a This is quite close to our requirement except the last element is not at required position. This is  Working on a windows universal app. I'm having difficulty in expanding a stackpanel to occupy the entire screen width on various devices. I'd like for the contents of the stackpanel to fill the entire screen for all devices. XAML:

Comments
  • Ok, do you know if it will be possible to modify my xaml whitout big modification ?
  • It should not be that big of a change.... just modify your outermost stackpanel to a Grid, (or even DockPanel). Add some Grid columns and rows and you're all set. Documentation on this is plenty.
  • Make the last column in your Grid with width = "*", and set the final grid in your xaml to be in that row. That way everything in that sub-grid will be all the way to the right
  • So i can do : DockPanel->Border->Grid instead of DockPanel->Border->stackpanel, yes ?
  • Yes sir...you got it!
  • I recommend using objects of the same width.