2

也许是一个愚蠢的问题，但我继承了开发图像编辑器的工作，该编辑器允许用户添加图像，然后保存画布上的内容，或者将项目的元素等保存到服务器和数据库以便稍后返回。图像宽度和高度等属性在加载时被发送和回调，因此图像被加载回画布上的位置。

部分功能是重新调整图像大小。我正在使用与图像宽度绑定的滑块来执行此操作。当我使用滑块时，图像会按比例变小，但图像高度的值或图像实际高度不会改变，这会在再次加载项目时导致问题，因为存储在数据库中的高度不正确。

滑块区域的 XAML：

<TextBlock Grid.Column="0" Grid.Row="0" Text="Width:" VerticalAlignment="Center" FontWeight="Bold" Margin="3" HorizontalAlignment="Left" />
                                    <TextBox Grid.Column="1" Grid.Row="0" Text="{Binding Path=Width, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" Height="24" Margin="3" />
                                    <TextBlock Grid.Column="2" Grid.Row="0" Text="px" VerticalAlignment="Bottom" Margin="3,0,0,0" />

                                    <TextBlock Grid.Column="0" Grid.Row="1" Text="Height:" VerticalAlignment="Center" FontWeight="Bold" Margin="3" HorizontalAlignment="Left" />
                                    <TextBox x:Name="txtImageHeight" Grid.Column="1" Grid.Row="1" Text="{Binding Path=Height, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" Height="24" Margin="3" />
                                    <TextBlock Grid.Column="2" Grid.Row="1" Text="px" VerticalAlignment="Bottom" Margin="3,0,0,0" />

                                    <TextBlock Grid.Column="0" Grid.Row="2" Text="Size:" FontWeight="Bold" Margin="3" HorizontalAlignment="Left" VerticalAlignment="Center" />
                                    <Slider Grid.Column="1" Grid.Row="2" Minimum="0" SmallChange=".01" LargeChange=".10" Maximum="{Binding Path=MaxWidth}"
                                        Value="{Binding Path=Width, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" Margin="3" Grid.ColumnSpan="2" ValueChanged="Slider_ValueChanged" />

高度文本框中的值显然也不会像我想要的那样改变。

和代码：

private void AddImageElement(object param)
    {
        bool? gotImage;
        string fileName;
        BitmapImage imageSource = GetImageFromLocalMachine(out gotImage, out fileName);

        if (gotImage == true)
        {
            Image image = new Image();
            image.Name = fileName;
            image.Source = imageSource;
            image.Height = imageSource.PixelHeight;
            image.Width = imageSource.PixelWidth;
            image.MaxHeight = imageSource.PixelHeight;
            image.MaxWidth = imageSource.PixelWidth;
            image.Cursor = Cursors.Hand;
            image.Tag = null;

            AddDraggingBehavior(image);
            image.MouseLeftButtonUp += element_MouseLeftButtonUp;

            this.Elements.Add(image);
            numberOfElements++;

            this.SelectedElement = image;
            this.SelectedImageElement = image;
        }
    }

如何获取高度值以反映图像呈现的高度？

我对 Silverlight 和 .NET 完全陌生，所以也许我遗漏了一些明显的东西

4

1 回答 1

1

是的，Silverlight 在调整绑定大小方面存在一些已知不足。不久前，我构建了一个带有缩放功能的查看器，我想将其绑定到滑块，我发现需要一些小帮助工具。我使用LayoutTransformerSilverlight Toolkit和AnimationMediatorToolkit 开发人员之一的。

使用 ，LayoutTransformer您可以将其内容设置为任何内容，而不仅仅是图像，并对其应用任何转换，并且与通常的不同RenderTransform，它将影响布局和实际大小。我的元素不在其中Canvas，所以我不知道它在您的场景中会如何表现以及您是否可以使用它，但也许这个示例仍然可以对您有所帮助。

<Grid>
    <fs:AnimationMediator x:Name="ScaleXMediator" LayoutTransformer="{Binding ElementName=LayoutTransformer}" AnimationValue="{Binding ScaleX, ElementName=ScaleTransform, Mode=TwoWay}" />
    <fs:AnimationMediator x:Name="ScaleYMediator" LayoutTransformer="{Binding ElementName=LayoutTransformer}" AnimationValue="{Binding ScaleY, ElementName=ScaleTransform, Mode=TwoWay}" />

    <tkt:LayoutTransformer x:Name="LayoutTransformer" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
        <tkt:LayoutTransformer.LayoutTransform>
            <ScaleTransform x:Name="ScaleTransform" />
        </tkt:LayoutTransformer.LayoutTransform>

        <Image x:Name="MyImage" Source="mysource.png" Width="600" Height="800" />
    </tkt:LayoutTransformer>
</Grid>

因为我不会在这里讨论 MultiBinding，所以您还必须手动处理Slider' 值更改事件，然后适当地设置AnimationValuesScaleXMediator和ScaleYMediator。

希望能帮助到你！

于 2012-07-13T16:52:09.183 回答