Allowing a grid item to overlap over the grid?

I am trying to make a Rectangle (or a UserControl for that matter) lap over its bounds that are given in the grid.

I've constructed a grid with 3X3 items in it. These items (when hovered over) should expand their size by multiplying it by 2. However, since these items have been given specific boundar开发者_C百科ies (as in they are actually members of columns and rows), they do not overlap those boundaries.

How can I do this?

Using a grid in this case is not the best option, consider using a canvas or maybe a wrap panel. Due to the way the WPF layout system works (Arrange/Measure), elements can normally not cross their boundaries.

Alternatively, using a ScaleTransform on your elements' RenderTransform property will also do the trick. Check out this article for more information about transformations.

Probably you are trying to decorate selected Item (or item hovered by mouse). You can think of writing style (using trigger) or adorner.

Update: Taking pointer from 'Bas', i just tried this:

<Button Content="ABC"> 
        <Button.Style>
            <Style TargetType="{x:Type Button}">
                <Style.Triggers>
                    <Trigger Property="IsMouseOver" Value="True">
                        <Setter Property="LayoutTransform" >
                            <Setter.Value>
                                <ScaleTransform ScaleX="2" ScaleY="2" />
                            </Setter.Value>
                        </Setter>
                    </Trigger>
                </Style.Triggers>
            </Style>
        </Button.Style>
    </Button>

This works pretty ok.