CODEWITHSUNDEEP
c#wpfgrid
Willy
Willy

Reputation: 10638

WPF Grid column alignment: first to right, second to left

I have a grid in my WPF application. This grid has two columns and one row.

Now, I am trying to align the first column content to the right and second column content to the left as below:

-----------------------------------------------------
|                ProgressControlSpinner|"Loading..."|
-----------------------------------------------------

Instead I obtain:

-----------------------------------------------------
|ProgressControlSpinner|"Loading..."                |
-----------------------------------------------------

Note that I want second column to be auto adjusted to the text width. Also this grid should expand to the outer grid column in which it is contained.

My grid is as below:

<Grid x:Name="MyGrid" Grid.Column="1" Margin="3" Visibility="Collapsed">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="auto"/>
    </Grid.ColumnDefinitions>                    
    <controls:ProgressControlSpinner Grid.Column="0" Width="20" Height="20" HorizontalAlignment="Right"/>
    <TextBlock Margin="3 0 0 0" Grid.Column="1" VerticalAlignment="Center" HorizontalAlignment="Left" Text="Loading..." />
</Grid>

Note: This grid is contained within another outer grid.

Upvotes: 4

Views: 10199

Answers (1)

Willy
Willy

Reputation: 10638

I have solved. My problem was in the outer grid when defining the width for the column where inner grid was contained.

I had:

<Grid Grid.Column="0" Grid.Row="0" Margin="10 10 10 5" HorizontalAlignment="Stretch">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="auto"></ColumnDefinition>
        <ColumnDefinition Width="auto"></ColumnDefinition>
        <ColumnDefinition Width="*"></ColumnDefinition>
    </Grid.ColumnDefinitions>

    <Grid x:Name="MyGrid" Grid.Column="1" Margin="3" Visibility="Collapsed">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="auto"/>
        </Grid.ColumnDefinitions>                    
        <controls:ProgressControlSpinner Grid.Column="0" Width="20" Height="20" HorizontalAlignment="Right"/>
        <TextBlock Margin="3 0 0 0" Grid.Column="1" VerticalAlignment="Center" HorizontalAlignment="Left" Text="Loading..." />
    </Grid>

</Grid>

and the correct is:

<Grid Grid.Column="0" Grid.Row="0" Margin="10 10 10 5" HorizontalAlignment="Stretch">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="auto"></ColumnDefinition>
        <ColumnDefinition Width="*"></ColumnDefinition>
        <ColumnDefinition Width="auto"></ColumnDefinition>
    </Grid.ColumnDefinitions>


    <Grid x:Name="MyGrid" Grid.Column="1" Margin="3" Visibility="Collapsed">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="auto"/>
        </Grid.ColumnDefinitions>                    
        <controls:ProgressControlSpinner Grid.Column="0" Width="20" Height="20" HorizontalAlignment="Right"/>
        <TextBlock Margin="3 0 0 0" Grid.Column="1" VerticalAlignment="Center" HorizontalAlignment="Left" Text="Loading..." />
    </Grid>

</Grid>

Upvotes: 5

Related Questions