調整大小使用滑塊圖像在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小號適當。

希望它有幫助！