Question

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

部分功能是重新调整图像大小。我这样做的滑块有一个绑定到图像宽度。当我使用滑块时图像按比例变小，但图像高度的值和图像实际高度不会改变，这会导致项目再次加载时出现问题，因为存储在数据库中的高度不正确。

滑块区域的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的新手，所以也许我错过了一些明显的东西

Answer 1

是的，Silverlight在调整绑定大小时有一些已知的不足之处。我不久前构建了一个具有缩放功能的查看器，我希望将其绑定到滑块，我发现需要一些小帮助工具。我使用Silverlight Toolkit中的LayoutTransformer和AnimationMediator from one of the Toolkit developers。

使用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的值更改事件，然后设置AnimationValue ScaleXMediator和ScaleYMediator {1}}恰当。

希望它有所帮助！

使用Silverlight中的滑块调整图像大小

1 个答案: