调整大小使用滑块图像在Silverlight

Question

也许一个愚蠢的问题，但我继承开发的图像编辑器，允许用户添加图像，然后要么保存的是在画布上，或项目的内容等保存到服务器的工作和DB稍后再回来。图像宽度和高度等属性会在加载时发送并回调，以便将图像加载回画布上的位置。

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

的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的值更改事件，然后设置的ScaleXMediator和ScaleYMediator的AnimationValue小号适当。

希望它有帮助！