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 boundaries (as in they are actually members of columns and rows), they do not overlap those boundaries.

How can I do this?

Upvotes: 0

Views: 541

Answers (2)

Ujjwal
Ujjwal

Reputation: 486

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.

Upvotes: 0

Bas
Bas

Reputation: 27085

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.

Upvotes: 1

Related Questions