Click here to Skip to main content
16,020,315 members
Please Sign up or sign in to vote.
1.00/5 (1 vote)
See more:
I need to make the size of Rectangle automatically takes the needed size of the Grid.
Any idea please?

What I have tried:

XML
<Grid x:Name="GridRecGrip" Width="10" Height="20">
    <Rectangle x:Name="RecGrip"
               Fill="Red"
               HorizontalAlignment="Stretch"
               VerticalAlignment="Stretch"
               Width="{Binding Width, Source=GridRecGrip}" 
               Height="{Binding Height, Source=GridRecGrip}">
    </Rectangle>
</Grid>
Posted
Updated 4-Jan-24 21:46pm
v3
Comments
[no name] 4-Jan-24 16:34pm    
The Grid has no size in this case either, so it won't matter.
Sh.H. 4-Jan-24 16:50pm    
@Gerry Schmitz
Updated. Check again please.
[no name] 4-Jan-24 18:24pm    
If you bind the W,H you should use .ActualWidth and Height. Or just use vertical and horizontal alignment stretch. And you need a color for the rectangle to show.
Sh.H. 5-Jan-24 3:45am    
Yes. I tried ActualWidth. The size sets very larger than the Grid size.
Also I set vertical and Horizontal to Stretch. But no luck.
BTW, I updated code again.
Richard Deeming 5-Jan-24 3:49am    
Using Stretch without binding the width or height works fine for me.

1 solution

You do not need to set the size of the Rectangle if you want to fill the Grid area.
XML
<Grid Width="10" Height="20">
    <Rectangle Fill="Red"></Rectangle>
</Grid>

Now, if you remove the Width and Height of the Grid, the Grid will fill the parent space and the Rectangle will fill the Grid. if the Grid's parent is the form, then the background of the form will be filled with both the Grid and the Rectangle with the Red fill.
XML
<Window x:Class="WpfGridRect.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"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Grid>
        <Rectangle Fill="Red"></Rectangle>
    </Grid>
</Window>

Most, not all, will fill the available area. StackPanel is an exception unless you tell it to.

UPDATE

Nowhere in the question asked does it stipulate that the parent was a DataGridCell. However, the same principle applies:
XML
<DataGridTemplateColumn Width="100">
    <DataGridTemplateColumn.CellTemplate>
        <DataTemplate>
            <Rectangle Fill="DeepSkyBlue"/>
        </DataTemplate>
    </DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>

The Rectangle will fill the DataGridTemplateColumn.

UPDATE #2
Again, the requirements change. However, the same principle applies. Here is my modified answer from your other question on setting the background color of a cell[^]. I've added using a Rectangle for the background color, which, in my opinion, is the wrong way of doing it.

XML
<Window x:Class="WpfDataGridCellBackground.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="450" Width="800">
    <Window.Resources>
        <SolidColorBrush x:Key="clBr" Color="Red" />
    </Window.Resources>
    <Grid>
        <DataGrid ItemsSource="{Binding Path=.}" AutoGenerateColumns="False">
            <DataGrid.Columns>
                <DataGridTextColumn Header="First Name" 
                                    Binding="{Binding Path=FirstName}">
                    <DataGridTextColumn.CellStyle>
                        <Style TargetType="DataGridCell">
                            <Setter Property="Background" 
                                    Value="{StaticResource clBr}" />
                        </Style>
                    </DataGridTextColumn.CellStyle>
                </DataGridTextColumn>

                <!--<DataGridTextColumn Header="Last Name" 
                                    Binding="{Binding Path=LastName}">
                </DataGridTextColumn>-->

                <DataGridTemplateColumn Header="Last Name">
                    <DataGridTemplateColumn.CellTemplate>
                        <DataTemplate>
                            <Grid>
                                <Rectangle Fill="DeepSkyBlue"/>
                                <TextBlock Text="{Binding Path=LastName}" />
                            </Grid>
                        </DataTemplate>
                    </DataGridTemplateColumn.CellTemplate>
                </DataGridTemplateColumn>
            </DataGrid.Columns>
        </DataGrid> 
    </Grid>
</Window>

and the code-behind:
C#
using System.Windows;

namespace WpfDataGridCellBackground;

public partial class MainWindow : Window
{
    public MainWindow()
    {
        InitializeComponent();
        DataContext = new List<Person>()
        {
            new("Freddie", "Mercury"),
            new("John", "Lennon")
        };
    }
}

public record Person(string FirstName, string LastName);

This is a working example. Create a new project called WpfDataGridCellBackground (I am using .Net Core WPF project), then copy and paste the code and run.

Here is an image of the app running: Wpf DataGrid Cell Background Color - Imagebin[^]
 
Share this answer
 
v5
Comments
Sh.H. 5-Jan-24 7:47am    
@Graeme_Grant
Thanks.
You are right.
But the parent is a cell of a DataGrid. So what you said in the post does not work. Because the cell always set its size to the child. And this in a problem.
Graeme_Grant 5-Jan-24 8:27am    
Updated.
Sh.H. 5-Jan-24 10:16am    
@Graeme_Grant
With respect, doesn't work! Because as the Cell is auto size, so the result of size will be 0, and then Rectangle height will be 0 too.
Graeme_Grant 5-Jan-24 17:13pm    
With respect, the code was tested before being posted. I'll post the fully working code used in my answer to your other question, which also works.
Sh.H. 5-Jan-24 17:45pm    
@Graeme_Grant
Doesn't work here.
You just added a Grid before the Rectangle! Also you added a TextBlock with text. But the cell should be empty and without any other elements. Only color. This is why I used Rectangle. And the problem is that the Rectangle is stretch to the size of Cell. And as the Cell is empty, the Height of Cell is 0. So the Height of Rectangle will be 0! So nothing appears in the final run.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900