How to identify whether the control is going inside the window / tab control bounds in WPF

Question

I want make the control height as double when the mouse is over that control and control height should become normal when the mouse leaves the control.

Consider, I am using the following style to make the button height as double when the mouse is over a button.

<Style TargetType="{x:Type Buttons}">  
<Style.Triggers>  
    <Trigger Property="IsMouseOver" Value="True">  
        <Setter Property="RenderTransform"> 
            <Setter.Value> 
                <ScaleTransform ScaleX="1" ScaleY="2" /> 
            </Setter.Value> 
        </Setter> 
        <Setter Property="RenderTransformOrigin" Value="0.5,0.5"/>  
        <Setter Property="Panel.ZIndex" Value="99999"/>  
    </Trigger>  
</Style.Triggers>  

If the button is placed near to the window/tab control boundary then button goes inside the Tab control/window bounds when it expands. (when mouse is over the button)

I don't want the button to go inside the Tab Control/Window bounds.

Instead the button should move inside the window (RenderTransformOrigin must be changed) when the button touches the Tab Control/Window bounds.

I have attached my Sample Application for your reference here.

Answer 1

You could try using a converter on your RenderTransformOrigin setter

The converter would accept a control as a parameter and check to see if the control's position within its parent is between 0 and (ControlHeight / 2) and if it is then calculate and return a different RenderTransformOrigin value. If not, just return the default (0.5,0.5)

Edit: To answer your comment, I'm not sure of the exact syntax since I'm not testing this, but I was thinking something similar to the following:

Create your converter. It will probably have to be a MultiBinding converter

public class RenderTransformConverter : IMultiValueConverter
{
    public object Convert(object[] values, Type targetType, object parameter, CultureInfo culture)
    {
        // Get parameters - You'll probably want to include validation and default values
        UIElement control = (UIElement)value[0];            
        UIElement parent = (UIElement)value[1];

        int controlHeight = control.Height;
        int controlXPositionInParent = control.TranslatePoint(new Point(0, 0), parent).X;

        if (controlXPositionInParent < (controlHeight * .5))
        {
            // Calculate a new render transform. 
            // Should verify I'm doing the math right, didn't get much sleep last night
            return new Point(0.5, controlXPositionInParent / controlHeight);
        }
        else
        {
            return new Point(0.5, 0.5);
        }
    }

    public object[] ConvertBack(object value, Type[] targetTypes, object parameter, CultureInfo culture)
    {
        throw new NotImplementedException();
    }
}

Your XAML would include a line to include the converter namespace, and create an object of the new converter.

<localNamespace:RenderTransformConverter x:Key="renderTransformConverter />

Then your Style would use it by something like this:

<Setter Property="RenderTransformOrigin">
<Setter.Value>
    <MultiBinding Converter="{StaticResource renderTransformConverter}">
        <Binding Path="{Binding RelativeSource=Self}" />
        <Binding Path="{Binding RelativeSource=Self, Path=Parent}" />
    </MultiBinding>
</Setter.Value>

I'm not positive if you can pass controls as parameters to a converter, but if not you'll probably have to re-arrange the parameters to get whatever values are needed for the calculation.