CODEWITHSUNDEEP
c#wpfxaml
Force444
Force444

Reputation: 3381

WPF how to get control and TextBlock to align in center in stretched grid

I have the following scenario:

<Grid x:Uid="Grid_3" Grid.Row="0" Margin="5" Focusable="False" Visibility="Visible" Background="DarkGray" Opacity="0.4" VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
        <Grid.RowDefinitions>
            <RowDefinition x:Uid="RowDefinition_8" Height="Auto"/>
            <RowDefinition x:Uid="RowDefinition_9" Height="Auto"/>
        </Grid.RowDefinitions>

        <controls:LoadingPanel Grid.Row="0" IsLoading="True"
                           HorizontalLoadingIndicatorAlignment="Center"
                           VerticalLoadingIndicatorAlignment="Center"  
                           />
        <TextBlock x:Uid="TextBlock_4" Grid.Row="1" HorizontalAlignment="Center" VerticalAlignment="Center" Text="Commit In Process..." />
    </Grid>
</Grid>

I want the LoadingPanel and the TextBlock to be aligned in the center of the Grid which I have set to be stretched vertically and horizontally.

Note that the grid is already inside another grid. At the moment both places themselves at the top.

Upvotes: 1

Views: 2480

Answers (2)

ibebbs
ibebbs

Reputation: 2003

So, I'm guessing the issue you're seeing is that the controls are not centred vertically but instead sit at the top of the grid?

To resolve this (while keeping the controls below one another) simply add a relative sized row above and below the two rows for the controls like so:

<Grid x:Uid="Grid_3" Grid.Row="0" Margin="5" Focusable="False" Visibility="Visible" Background="DarkGray" Opacity="0.4" VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
    <Grid.RowDefinitions>
        <RowDefinition Height="0.5*"/>
        <RowDefinition x:Uid="RowDefinition_8" Height="Auto"/>
        <RowDefinition x:Uid="RowDefinition_9" Height="Auto"/>
        <RowDefinition Height="0.5*"/>
    </Grid.RowDefinitions>

    <controls:LoadingPanel Grid.Row="1" IsLoading="True"
                       HorizontalLoadingIndicatorAlignment="Center"
                       VerticalLoadingIndicatorAlignment="Center"  
                       />
    <TextBlock x:Uid="TextBlock_4" Grid.Row="2" HorizontalAlignment="Center" VerticalAlignment="Center" Text="Commit In Process..." />
</Grid>

This should sort out the issue.

Upvotes: 2

Lupu Silviu
Lupu Silviu

Reputation: 1165

Just to be able to give an answer to this topic, I am reposting the comment from above, to allow @DSF to accept it.

Apparently the issue was related to the fact that the grid had two rows, and each control was on it`s own row. Discarding the rows solved his issue.

To fix the order of visibility, as you want, use Panel.ZIndex="2" on the LoadingPanel and Panel.ZIndex="1" on the TextBlock, like this

Upvotes: 1

Related Questions