Search code examples
xamlwinui-3

WinUI3 Xaml align column grid to the right

This is the XAML:

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto"></ColumnDefinition>
        <ColumnDefinition Width="*"></ColumnDefinition>
    </Grid.ColumnDefinitions>
    <MenuBar  Grid.Column="0" Grid.Row="0" RequestedTheme="Dark" VerticalAlignment="Top" HorizontalAlignment="Left" x:Name="TopMenu" />
    <StackPanel Orientation="Horizontal" HorizontalAlignment="Right" Margin="0" Grid.Column="1" Grid.Row="0"  >
        <FontIcon  x:Name="btnDark" Glyph="&#xE790;" Margin="10,0,0,0"/>
        <FontIcon  x:Name="btnSettings" Glyph="&#xE713;" Margin="10,0,0,0"/>
    </StackPanel>
</Grid>

And I got this one: enter image description here

Note that the menu is dynamically created, it's not in the XAML. How can I create the two font icons at the far right ?

Like, for example, Notepad:

enter image description here

Solution 
  • <Grid.ColumnDefinitions>
    <ColumnDefinition Width="Auto"></ColumnDefinition>
    <ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>

    This will let the first column, the MenuBar, take the minimum required width, and let the second column, the StackPanel with FontIcons take the rest.

    In your case you want the oposite, so:

    <Grid.ColumnDefinitions>
    <ColumnDefinition Width="*"></ColumnDefinition>
    <ColumnDefinition Width="Auto"></ColumnDefinition>
</Grid.ColumnDefinitions>