CODEWITHSUNDEEP
c#wpfxaml
holland
holland

Reputation: 2182

Center Grid according to Grid Cell in WPF

I have a Grid in my WPF application which is currently centered horizontally and vertically, no big deal. However, I would like to center my entire Grid according to a single Grid cell instead of the entire Grid. Is this possible? Here is a small illustration of what I want to achieve. I want the red cross to be the center. enter image description here The first picture shows the entire grid (The Grid is the green square) being centered, the second picture shows the entire grid being centered according to the cell with the red cross. Is this possible in XAML? I didn't provide any code on purpose because I don't really think that's necessary for this question, it's not like I have an error or something that doesn't work, I just have no clue how I would achieve this.

Upvotes: 0

Views: 1746

Answers (2)

ASh
ASh

Reputation: 35733

There are outer Grid, inner Grid and element which should be centered. Outer and inner Grid have equal Row and Column weights. Layout adapts to resize

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

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

    <Grid Grid.Column="1" Grid.ColumnSpan="3"
          Background="LightGray"
          Grid.Row="0" Grid.RowSpan="2">

        <Grid.ColumnDefinitions>
            <ColumnDefinition/>
            <ColumnDefinition/>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>

        <Grid.RowDefinitions>
            <RowDefinition />
            <RowDefinition />
            <RowDefinition />
        </Grid.RowDefinitions>

        <Border Grid.Row="0" Grid.Column="1" Grid.ColumnSpan="2"
                Background="Green"/>

        <Border Grid.Row="1" Grid.RowSpan="2" Grid.Column="0" Grid.ColumnSpan="2"
            Background="Cyan"/>
    </Grid>
</Grid>

screen shot

Upvotes: 3

Lupu Silviu
Lupu Silviu

Reputation: 1165

The only way I think you can achieve this, is only if your UI components have fixed size. This here is a code sample of how I achieved what you asked.

<Window x:Class="StackStuff.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:local="clr-namespace:StackStuff"
    mc:Ignorable="d"
    Title="MainWindow" Height="350" Width="525">
<DockPanel>
    <Grid HorizontalAlignment="Center" VerticalAlignment="Center" Background="Red"
          Width="150" Height="100" ClipToBounds="False">

        <Border Margin="0,-150,-30,0" BorderBrush="Black" BorderThickness="1" Height="50" 
                Width="180">
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="50"/>
                    <ColumnDefinition Width="130"/>
                </Grid.ColumnDefinitions>

                <Border Grid.Column="0" BorderThickness="1" BorderBrush="Black"/>
                <Border Grid.Column="1" BorderThickness="1" BorderBrush="Black"/>

            </Grid>
        </Border>

        <Border Margin="0,0,-180,0" BorderBrush="Black" BorderThickness="1" 
                Width="30" Height="100">

        </Border>
    </Grid>
</DockPanel>

As you can see, it has fixed size for all the cells.

Upvotes: 0

Related Questions