CODEWITHSUNDEEP
xamlwindows-10uwp
hanali
hanali

Reputation: 227

Stretch my buttons in a TopAppBar

I am developing a universal application in Visual Studio 2015 Community, but I have a problem in stretching my 3 buttons when I test my application on local PC or the Windows phone emulator, this is what I get with my code:

<CommandBar Height="51" >
        <CommandBar.Content>
            <Grid>
                <StackPanel>
                    <Image x:Name="image1" Margin="41,10,-168,-50" Source="images/name.png" RenderTransformOrigin="0.487,0.82"/>
                    <Image x:Name="image" Margin="1,0,-40,-50" Source="images/icon.png"/>
                </StackPanel>
                <StackPanel>
                    <Button  Height="49" Margin="0,0,-244,0" Width="35" HorizontalAlignment="Right" VerticalAlignment="Stretch">
                        <Button.Content>
                            <Image Source="images/home.png" Margin="-9,0.333,-9,-0.667"/>
                        </Button.Content>
                    </Button>
                </StackPanel>
                <StackPanel>
                    <Button  Height="49" Margin="0,0,-280,0" Width="35" HorizontalAlignment="Right" VerticalAlignment="Stretch">
                        <Image Source="images/search.png" Margin="-9,0.333,-9,-0.667"/>
                    </Button>
                </StackPanel>
                <StackPanel>
                    <Button  Height="49" Margin="0,0,-315,0" Width="35" HorizontalAlignment="Right" VerticalAlignment="Stretch">
                        <Image Source="images/profil.png" Margin="-9,0.333,-9,-0.667"/>
                    </Button>
                </StackPanel>
            </Grid>

        </CommandBar.Content>

This what I want to get: enter image description here

Upvotes: 1

Views: 822

Answers (3)

Matt Lacey
Matt Lacey

Reputation: 65564

There are a few issues with what you're trying.

  • The XAML you have is more complicated than it needs to be.
  • You've tried to align controls by setting margins - this doesn't work with variable sized containers.
  • You're not using any of the functionality of the CommandBar so you probably don't need it.

Instead you can make the layout you desire with a simple grid.:

    <Grid VerticalAlignment="Top" Height="51">
        <StackPanel HorizontalAlignment="Left">
            <Image x:Name="image1" Source="images/name.png" />
            <Image x:Name="image" Source="images/icon.png"/>
        </StackPanel>
        <StackPanel Orientation="Horizontal" HorizontalAlignment="Right" >
            <Button >
                <Image Source="images/home.png" />
            </Button>
            <Button>
                <Image Source="images/search.png" />
            </Button>
            <Button >
                <Image Source="images/profil.png" />
            </Button>
        </StackPanel>
    </Grid>

Upvotes: 1

Depechie
Depechie

Reputation: 6142

First up, you tagged your question inside several different area's, so it's difficult for us to tell what platform you are on. Is it a WinRT 8.1 app or a UWP windows 10 app?

But for reference, if it's a UWP Win10 app, first try to use following XAML, it creates a CommandBar with 1 primary command. And on the UWP platform that will position the icon at the right of the screen.

<CommandBar IsOpen="True" IsSticky="True">
   <CommandBar.PrimaryCommands>
      <AppBarButton Icon="Add" />
   </CommandBar.PrimaryCommands>
</CommandBar>

More info on what and how items are displayed inside a commandbar can be found on MSDN here https://msdn.microsoft.com/en-us/library/windows/apps/windows.ui.xaml.controls.commandbar.aspx

Upvotes: 1

Kai Brummund
Kai Brummund

Reputation: 3568

This is going to get you there:

<!--Content Alignment is left by default!-->
<CommandBar HorizontalContentAlignment="Stretch">
    <CommandBar.Content>
        <Grid>
            <!--Left element-->
            <Rectangle Margin="10"  Height="35" Width="35" Fill="Red"
                        HorizontalAlignment="Left"/>

            <!--Right elements together in a horizontal StackPanel-->
            <StackPanel Orientation="Horizontal"
                        HorizontalAlignment="Right">
                <Rectangle Margin="10"  Height="35" Width="35" Fill="Red" />
                <Rectangle Margin="10" Height="35" Width="35" Fill="Red" />
                <Rectangle Margin="10" Height="35" Width="35" Fill="Red" />
            </StackPanel>
        </Grid>
    </CommandBar.Content>
</CommandBar>

Upvotes: 1

Related Questions