button alignment doesn't respect position in winui

Question

button alignment doesn't respect position in winui

Eduardo Gomez 3,591

I am trying to put my button here, where I have the red drawing

User's image

but for some reason it doesn't work

xaml

    <Grid x:Name="rootContainer">

        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>


        <Grid Grid.Row="1">

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

            <!--  Placeholder for TreeView: Replace ListView with TreeView later  -->
            <!--  For TreeView, reintroduce SfTreeView and hierarchical structure  -->

            <ListView
                Padding="10"
                ItemsSource="{x:Bind FileExplorerWindowViewModel.FolderItems}"
                SelectedItem="{x:Bind FileExplorerWindowViewModel.SelectedFolderItem, Mode=TwoWay}"
                SelectionMode="Single">
                <Interactivity:Interaction.Behaviors>
                    <Interactions:EventTriggerBehavior EventName="SelectionChanged">
                        <Interactions:InvokeCommandAction
                            Command="{x:Bind FileExplorerWindowViewModel.FolderSeletedCommand}"
                            CommandParameter="{Binding}" />
                    </Interactions:EventTriggerBehavior>
                </Interactivity:Interaction.Behaviors>
                <ListView.ItemTemplate>
                    <DataTemplate x:DataType="models:FolderItem">
                        <StackPanel
                            Margin="10"
                            Orientation="Horizontal">
                            <Image
                                Width="32"
                                Height="32"
                                Margin="0,0,10,0"
                                Source="{x:Bind IconPath}" />
                            <TextBlock
                                VerticalAlignment="Center"
                                FontSize="14"
                                FontWeight="Bold"
                                Text="{x:Bind FileName}" />
                        </StackPanel>
                    </DataTemplate>
                </ListView.ItemTemplate>
            </ListView>

            <GridView
                Grid.Column="1"
                Padding="10"
                IsItemClickEnabled="True"
                ItemsSource="{x:Bind FileExplorerWindowViewModel.GcodeItems}"
                SelectedItem="{x:Bind FileExplorerWindowViewModel.SelectedFile, Mode=TwoWay}"
                SelectionMode="Single">
                <Interactivity:Interaction.Behaviors>
                    <Interactions:EventTriggerBehavior EventName="ItemClick">
                        <Interactions:InvokeCommandAction Command="{x:Bind FileExplorerWindowViewModel.FileSelectedCommand}" />
                    </Interactions:EventTriggerBehavior>
                </Interactivity:Interaction.Behaviors>
                <GridView.ItemTemplate>
                    <DataTemplate x:DataType="models:GcodeItem">
                        <StackPanel
                            Margin="10"
                            HorizontalAlignment="Center"
                            Orientation="Vertical">
                            <Image
                                Width="80"
                                Height="80"
                                Source="{x:Bind IconPath}" />
                            <TextBlock
                                HorizontalAlignment="Center"
                                Text="{x:Bind GetBaseFileName}"
                                TextWrapping="Wrap" />
                        </StackPanel>
                    </DataTemplate>
                </GridView.ItemTemplate>
            </GridView>

            <StackPanel
                Grid.Column="2"
                Padding="10"
                Background="#49212121"
                Visibility="{x:Bind FileExplorerWindowViewModel.DetailsStackPanelVisibility, Mode=OneWay}">

                <Image
                    Margin="10"
                    HorizontalAlignment="Center"
                    Source="/Assets/gcode_Large.png" />

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

                    <TextBlock
                        FontWeight="Bold"
                        Text="File name" />
                    <TextBlock
                        Grid.Column="1"
                        Text="{x:Bind FileExplorerWindowViewModel.SelectedFile.GetBaseFileName, Mode=OneWay}" />

                    <TextBlock
                        Grid.Row="1"
                        FontWeight="Bold"
                        Text="File extention" />
                    <TextBlock
                        Grid.Row="1"
                        Grid.Column="1"
                        Text="{x:Bind FileExplorerWindowViewModel.SelectedFile.GetFileExtention, Mode=OneWay}" />

                    <TextBlock
                        Grid.Row="2"
                        FontWeight="Bold"
                        Text="File creation" />
                    <TextBlock
                        Grid.Row="2"
                        Grid.Column="1"
                        Text="{x:Bind FileExplorerWindowViewModel.SelectedFile.CreationTime, Mode=OneWay}" />

                    <TextBlock
                        Grid.Row="3"
                        FontWeight="Bold"
                        Text="File creation" />

                    <TextBlock
                        Grid.Row="3"
                        Grid.Column="1"
                        Text="{x:Bind FileExplorerWindowViewModel.SelectedFile.FileSize, Mode=OneWay}" />

                    <Button
                        Grid.Row="5"
                        Grid.ColumnSpan="2"
                        VerticalAlignment="Center"
                        Content="Start simulation" />

I know that stacks are not very good at respecting, this is why I am using a grid, but it dosent work either

Accepted answer

0 additional answers

Your answer

Answer 1

Hello @Eduardo Gomez ,

Welcome to Microsoft Q&A!

I replaced the Stack panel with Grid, and the button location(space) needs to be stretched, so I add <RowDefinition Height="*" /> for it.

Here is the full test code, I removed the data source.

    <Grid x:Name="rootContainer">

        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>


        <Grid Grid.Row="1">

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

            <!--  Placeholder for TreeView: Replace ListView with TreeView later  -->
            <!--  For TreeView, reintroduce SfTreeView and hierarchical structure  -->

            <ListView
                Padding="10"
                SelectionMode="Single">
               
            </ListView>

            <GridView
                Grid.Column="1"
                Padding="10"
                IsItemClickEnabled="True"
                SelectionMode="Single">
             
               
            </GridView>

            <Grid
                Grid.Column="2"
                Padding="10"             
                Background="#49212121" >

                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="*" />
                </Grid.RowDefinitions>
                
                <Image
                    Grid.Row="0"
                    Margin="10"
                    HorizontalAlignment="Center"
                    Source="/Assets/gcode_Large.png" />

                <Grid Background="Green"  Grid.Row="1">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*" />
                        <ColumnDefinition Width="*" />
                    </Grid.ColumnDefinitions>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto" />
                        <RowDefinition Height="Auto" />
                        <RowDefinition Height="Auto" />
                        <RowDefinition Height="Auto" />
                        <RowDefinition Height="*" />
                    </Grid.RowDefinitions>

                    <TextBlock
                        FontWeight="Bold"
                        Text="File name" />
                    <TextBlock
                        Grid.Column="1"
                        Text="BaseFileName" />

                    <TextBlock
                        Grid.Row="1"
                        FontWeight="Bold"
                        Text="File extention" />
                    <TextBlock
                        Grid.Row="1"
                        Grid.Column="1"
                        Text="FileExtention" />

                    <TextBlock
                        Grid.Row="2"
                        FontWeight="Bold"
                        Text="File creation" />
                    <TextBlock
                        Grid.Row="2"
                        Grid.Column="1"
                        Text="CreationTime" />

                    <TextBlock
                        Grid.Row="3"
                        FontWeight="Bold"
                        Text="File creation" />

                    <TextBlock
                        Grid.Row="3"
                        Grid.Column="1"
                        Text="FileSize" />


                    <Button  Grid.Row="5" Grid.ColumnSpan="2"     
                            HorizontalAlignment="Center"
                            VerticalAlignment="Center"
                            Content="Start simulation" />

                </Grid>
            </Grid>
        </Grid>
    </Grid>

Thank you.

Eduardo Gomez 3,591 Reputation points

2025-03-24T08:15:03.0233333+00:00

That is not what I meant

something like his

see the red square?

I want my button there
Junjie Zhu - MSFT 21,476 Reputation points Microsoft External Staff

2025-03-24T09:27:59.4633333+00:00

Hello @Eduardo Gomez ,

Sorry, I misunderstood. I have edited my answer. Please refer to the layout in the code.
Eduardo Gomez Romero 1,355 Reputation points

2025-03-24T10:13:10.0133333+00:00

Can you please put in in answer, I will so I can accept it
Eduardo Gomez Romero 1,355 Reputation points

2025-03-24T10:14:49.5133333+00:00

StackPanel are useless, they don't recpect any things lol
Junjie Zhu - MSFT 21,476 Reputation points Microsoft External Staff

2025-03-25T01:30:54.91+00:00

Hi @Eduardo Gomez ,

Can you please put in in answer, I will so I can accept it

I have revised my original answer, you can check it out.

StackPanel are useless, they don't recpect any things lol

StackPanel cannot achieve the effect you want. The area where the button is located needs to stretch automatically, so using Grid with '<RowDefinition Height="*" />' is a better choice.
Eduardo Gomez Romero 1,355 Reputation points

2025-03-25T07:22:12.1333333+00:00

The accept button doesn't appear
Junjie Zhu - MSFT 21,476 Reputation points Microsoft External Staff

2025-03-25T09:01:13.5333333+00:00

Please use the account you are asking the question from.

Share via

button alignment doesn't respect position in winui

0 additional answers

Your answer