Attach the last item of a stackPanel horizontal to the right

Question

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

Answer 1

You can not do this with a StackPanel. You will need to use a DockPanel or Grid instead.

Answer 2

You can use Grid and Grid children to attack Objecs on the direction: Left, Right, Tip, Bottom and Center.

I did a example with two images on Bottom left and Bottom right:

<Window x:Class="NameClass">

    <Grid Name="Grid 1">  

        <Grid Name="Grid 1.1" VerticalAlignment="Bottom">

            <Grid Name="Grid 1.1.1" HorizontalAlignment="Left">
                <StackPanel>
                    <StackPanel Orientation="Horizontal">
                        <Image HorizontalAlignment="Left" Source="/left.jpg"/>                        
                    </StackPanel>
                </StackPanel>
            </Grid>

            <Grid Name="Grid 1.1.2" HorizontalAlignment="Right">
                <StackPanel>
                    <StackPanel Orientation="Horizontal">                        
                        <Image HorizontalAlignment="Right" Source="/right.jpg"/>
                    </StackPanel>
                </StackPanel>
            </Grid>     

        </Grid>

    </Grid>  

</Window>

Structure explained:

• Grid 1 is Main Grid.
• Grid 1.1 to the desired the main address, in this case is Bottom.
• Grid 1.1.1 and Grid 1.1.2 contain the specific addresses to each <Image>. For this case the StackPanel are used.
  • <StackPanel/> is the main container to fill the Grid 1.1.x.
  • <StackPanel Orientation="Horizontal"/> to use only one row
  • <Image HorizontalAlignment={one direction}/> to locate on the bottom grid, can be on right, left or center.

Result:

PD: I used this video for understand the concept on XAML WPF. Stack Panels & Dock Panels. I found a solution, with trial and error.

Answer 3

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