CODEWITHSUNDEEP
c#wpfxamlmargin
Vithis
Vithis

Reputation: 13

WPF changing margin pushes other elements down

First of all, sorry for my bad English.

I'm trying to make buttons "pop?" in my application when I hover the mouse over them.

This is what I came up with:

 <Style x:Key="SelectButton" TargetType="Button" BasedOn="{StaticResource {x:Type Button}}">
        <Style.Triggers>
            <Trigger Property="IsMouseOver" Value="False">
                <Setter Property="Content">
                    <Setter.Value>
                        <Image Source="\directory"/>
                    </Setter.Value>
                </Setter>
                <Setter Property="Margin">
                    <Setter.Value>
                        <Thickness Bottom="10" Right="10" Top="10" Left="10"/>
                    </Setter.Value>
                </Setter>
            </Trigger>
            <Trigger Property="IsMouseOver" Value="True">
                <Setter Property="Content">
                    <Setter.Value>
                        <Image Source ="\directory"/>
                    </Setter.Value>
                </Setter>
                <Setter Property="Margin">
                    <Setter.Value>
                        <Thickness Bottom="0" Right="0" Top="0" Left="0"/>
                    </Setter.Value>
                </Setter>
            </Trigger>
        </Style.Triggers>
    </Style>

You can see how it looks compiled here:

enter image description here

The problem is, whenever I change the margin of the button, it pushes every single other element of the application down. I'm honestly out of ideas.

Thanks, in advance.

Upvotes: 1

Views: 639

Answers (1)

user1228
user1228

Reputation:

Well, you're resizing the button, which would cause this behavior. It's completely expected.

Fortunately for you, what you REALLY want to do is apply a RenderTransform. They don't affect layout. From the docs,

A render transform does not regenerate layout size or render size information. Render transforms are typically intended for animating or applying a temporary effect to an element. For example, the element might zoom when focused or moused over, or might jitter on load to draw the eye to that part of the user interface (UI).

You'll want to use a ScaleTransform. Transforms are fun. It won't be long after you use one that you realize you can animate them, and then you'll be animating them.

Upvotes: 5

Related Questions