Updating the Grid.ColumnSpan doesnt change the column span of the rectangle

Question

<Window x:Class="ColumnSpan_Check.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>
        <Rectangle Fill="Red" Grid.Column="0" Grid.ColumnSpan="1">
            <Rectangle.Style>
                <Style>
                    <Setter Property="Grid.ColumnSpan" Value="2"/>
                </Style>
            </Rectangle.Style>
        </Rectangle>
    </Grid>
</Window>

Why cant i get the rectangle to occupy two columns here ? I wanted the rectangle to occupy two columns when a certain condition is met (using a datatrigger ) the issue turns out that the datatrigger gets fired but the layout of rectangle doesn't update to occupy two columns.

Answer 1

Your problem is right there in the XAML:

You're setting the Grid.ColumnSpan attached property in two places, directly in the Rectangle tag and again in the style. The first setting takes precedence over the second.

Since you want the Rectangle to occupy two columns when a condition is met, just remove the Grid.ColumnSpan from the Rectangle tag and put it into the Style & you're good to go. Like this:

<Rectangle Fill="Red" Grid.Column="0">
    <Rectangle.Style>
        <Setter Property="Grid.ColumnSpan" Value="1"/>
        <Style>
            <Setter Property="Grid.ColumnSpan" Value="2"/>
        </Style>
    </Rectangle.Style>
 /Rectangle>

Answer 2

It could just be a typing error, but this property wouldn't work:

public Visibility GridColVisibility
{
    get { return GridColVisibility; }
    set { GridColVisibility= value; RaisePropertyChanged(() => GridColVisibility); }
}

You can't use the property name inside the property like that... you'd get an error. You need a private member to back your property... something like this:

private Visibility gridColVisibility;
public Visibility GridColVisibility
{
    get { return gridColVisibility; }
    set { gridColVisibility = value; RaisePropertyChanged(() => GridColVisibility); }
}

However... I'm going to assume that this was just a typing error.

Looking at your DataTrigger, I can't really see anything that is obviously wrong, so I can only assume that your Binding Path is incorrect... if it is, then look in the Output Window in Visual Studio and you should find details of the error. This small example shows that it is definitely possible to set the Grid.ColumnSpan property in a DataTrigger:

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>
    <Rectangle Fill="LightGreen">
        <Rectangle.Style>
            <Style>
                <Style.Triggers>
                    <Trigger Property="UIElement.IsMouseOver" Value="True">
                        <Setter Property="Grid.ColumnSpan" Value="2" />
                    </Trigger>
                </Style.Triggers>
            </Style>
        </Rectangle.Style>
    </Rectangle>
</Grid>

So I think that unfortunately, given the information that you have provided, you are the only one that can really find your mistake... I'd take a good look at that Binding Path if I were you.

Answer 3

I was able to fix this issue by removing the Grid.ColumnSpan property from the button . Thanks everyone for your help.