CODEWITHSUNDEEP
wpfruntimescaling
Seb
Seb

Reputation: 83

How can I update scale at runtime on Image in WPF?

i'm having some issues updating the scale of an image dynamically in WPF. The exact behavior that I want is when I click on a button, i'd like to scale up (or down) the image inside the UserControl.

My XAML:

<UserControl x:Class="Company.Scaling.ScaleControl"
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
         xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
         mc:Ignorable="d" 
         d:DesignHeight="300" d:DesignWidth="300">
<Grid>
    <Image x:Name="imageContainer" Stretch="None" Focusable="False" HorizontalAlignment="Left" VerticalAlignment="Top">
        <Image.LayoutTransform>
            <ScaleTransform x:Name="scaleTransform">
            </ScaleTransform>
        </Image.LayoutTransform>
    </Image>
</Grid>

I'm currently updating the properties ScaleX and ScaleY like this:

this.scaleTransform.ScaleX = this.ZoomScale;
this.scaleTransform.ScaleY = this.ZoomScale;

It works when i'm updating these in the constructor of my XAML like this: 

public ScaleControl()
{
    this.InitializeComponent();

    this.ZoomScale = 1.5f;
}

But when i'm updating these properties on Runtime (after I click the button) it does not work.

Am I missing something?

Thanks for the help!

Edit:

After what Clemens said, I've add a few things.

Bindings in the XAML:

<Image.LayoutTransform>
            <ScaleTransform
                ScaleX="{Binding ZoomScale, RelativeSource={RelativeSource AncestorType=UserControl}}"
                ScaleY="{Binding ZoomScale, RelativeSource={RelativeSource AncestorType=UserControl}}" />
        </Image.LayoutTransform>

A dependency property:

public static readonly DependencyProperty ZoomScaleProperty = DependencyProperty.Register("ZoomScale", typeof(double), typeof(ScaleControl));

and the property:

public double ZoomScale
{
    get { return (double)this.GetValue(ZoomScaleProperty); }
    set { this.SetValue(ZoomScaleProperty, value); }
}

I'm pretty new to WPF so maybe I am missing something again but I can't figure out what.

Upvotes: 0

Views: 999

Answers (2)

Clemens
Clemens

Reputation: 128013

Setting the ZoomScale property will not magically update the ScaleTransform's ScaleX and ScaleY properties, only because you have previously assigned ZoomScale to their values.

You'll have to bind the ScaleTransform properties to ZoomScale, e.g. like this:

<Image ...>
    <Image.LayoutTransform>
        <ScaleTransform
            ScaleX="{Binding ZoomScale,
                     RelativeSource={RelativeSource AncestorType=UserControl}}"
            ScaleY="{Binding ZoomScale,
                     RelativeSource={RelativeSource AncestorType=UserControl}}" />
    </Image.LayoutTransform>
</Image>

See Data Binding Overview for details.

In addition, the ZoomScale property must notify about value changes. In a class derived from DependencyObject, you would usually declare it as dependency property, like this:

public static readonly DependencyProperty ZoomScaleProperty = DependencyProperty.Register(
    "ZoomScale", typeof(double), typeof(ScaleControl));

public double ZoomScale
{
    get { return (double)GetValue(ZoomScaleProperty); }
    set { SetValue(ZoomScaleProperty, value); }
}

Upvotes: 2

Seb
Seb

Reputation: 83

So, i think i've added the right thing in: 

public static readonly DependencyProperty ScalingProperty = DependencyProperty.Register("ZoomScale", typeof(float), typeof(UserControl));

and 

public float ZoomScale { get { return (float)GetValue(ScalingProperty); } set { SetValue(ScalingProperty, value); } }

for the dependency property. Also i've added: 

ScaleX="{Binding ZoomScale, RelativeSource={RelativeSource AncestorType=UserControl}}"

in my XAML but nothing seems to scale..

Upvotes: 0

Related Questions