XAML 绑定值更改时UWP图像控件大小不变

ergxz8rk  于 2023-05-27  发布在  其他
关注(0)|答案(2)|浏览(156)

我有一个图像控件,其高度和宽度绑定到一个属性,如下所示:

<Image x:Name="capturedPhoto" Height="{x:Bind Path=CrosshairHeight, Mode=OneWay}" Width="{x:Bind Path=CrosshairWidth, Mode=OneWay}"/>

我还有绑定到相同属性的数字框。

<muxc:NumberBox Value="{x:Bind Path=CrosshairHeight, Mode=TwoWay}" SpinButtonPlacementMode="Inline" Grid.Row="0" Grid.Column="1" />
<muxc:NumberBox Value="{x:Bind Path=CrosshairWidth, Mode=TwoWay}" SpinButtonPlacementMode="Inline" Grid.Row="1" Grid.Column="1" />

当我在运行时更改数字框的值时,图像大小不会更改。

92vpleto

92vpleto1#

我的第一个猜测是CrosshairHeightCrosshairWidth没有用INotifyPropertyChanged实现。
您需要实现INotifyPropertyChanged或直接使用绑定:

<StackPanel>
    <muxc:NumberBox
        Header="Height"
        Value="{x:Bind AwesomeImage.Height, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" />
    <muxc:NumberBox
        Header="Width"
        Value="{x:Bind AwesomeImage.Width, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" />
    <Image
        x:Name="AwesomeImage"
        Source="Assets/StoreLogo.png"
        Stretch="Fill" />
</StackPanel>
gzjq41n4

gzjq41n42#

有两种解决方案,一种是像@Andrew说的那样实现INotifyPropertyChanged,另一种是直接使用binding绑定NumberBox的值。如果您只是用值实现简单的大小更改,则第二种方法更简单

-实现INotifyPropertyChanged

<Image x:Name="capturedPhoto"  Height="{x:Bind  Path=imageCls.CrosshairHeight, Mode=OneWay}" Width="{x:Bind Path=imageCls.CrosshairWidth, Mode=OneWay}" Loaded="capturedPhoto_Loaded"/>
<muxc:NumberBox Value="{x:Bind Path=imageCls.CrosshairHeight, Mode=TwoWay}" SpinButtonPlacementMode="Inline"/>
<muxc:NumberBox Value="{x:Bind Path=imageCls.CrosshairWidth, Mode=TwoWay}" SpinButtonPlacementMode="Inline"/>
public imageCls imageCls = new imageCls();
public MainPage()
{
    this.InitializeComponent();

    imageCls.CrosshairWidth = 300;
    imageCls.crosshairHeight = 100;
}

//-------------------------------------------------------
// This is a new class
public class imageCls : INotifyPropertyChanged   
{
    public double crosshairHeight, crosshairWidth;

    public double CrosshairHeight 
    { 
        get
        {
            return this.crosshairHeight;
        }
        set
        {
            if (this.crosshairHeight != value)
            {
                crosshairHeight = value;
                OnPropertyChanged("CrosshairHeight");
            }
        }
    }
    public double CrosshairWidth
    {
        get
        {
            return this.crosshairWidth;
        }
        set
        {
            if (this.crosshairWidth != value)
            {
                crosshairWidth = value;
                OnPropertyChanged("CrosshairWidth");
            }
        }
    }

    protected virtual void OnPropertyChanged(string propertyName)
    {
        PropertyChangedEventHandler handler = PropertyChanged;
        if (handler != null) handler(this, new PropertyChangedEventArgs(propertyName));
    }

    public event PropertyChangedEventHandler PropertyChanged;
}

-绑定NumberBox的值

<Image x:Name="capturedPhoto"  Height="{Binding ElementName=num1, Path=Value}" Width="{Binding ElementName=num2, Path=Value}" />
<muxc:NumberBox x:Name="num1" Value="{x:Bind Path=CrosshairHeight, Mode=TwoWay}" SpinButtonPlacementMode="Inline"/>
<muxc:NumberBox x:Name="num2" Value="{x:Bind Path=CrosshairWidth, Mode=TwoWay}" SpinButtonPlacementMode="Inline"/>

相关问题