CODEWITHSUNDEEP
wpfxamlbuttonwpf-controlswpf-style
BabyHai
BabyHai

Reputation: 93

How to set button position proportional to the border of grid cell border in WPF

I am rearranging the elements in a window in WPF.

I have divided the page into a 3*3 grid and I want to put a button in one of the grid cell and control its size depending on the distance proportion to the grid cell border. In that case when I resize the whole window, the button will resize accordingly.

What I want is the distance of left side of the button to the left border of the grid cell border is 20% of the width of the grid cell, so is the right side to the right border. The top side and bottom side should have the distance of 10% of the grid cell height.

The example xaml is:

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

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

    <Button Content="BACK" Grid.Column="0" Grid.Row="2"/>
</Grid>

Is there an easy way to do that in XAML or it must be done programmatically?

Upvotes: 0

Views: 30

Answers (1)

Clemens
Clemens

Reputation: 128106

Use another nested 3x3 Grid with appropriate row heights and column widths.

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

    <Grid Grid.Column="0" Grid.Row="2">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="3*"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="*"/>
            <RowDefinition Height="8*"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <Button Grid.Column="1" Grid.Row="1" Content="BACK"/>
    </Grid>
</Grid>

Upvotes: 1

Related Questions