バインディングを利用してイメージの拡大縮小をする例を紹介します。
まず、イメージを表示するにはImage 要素を使用します。
この Image 要素に対して ScaleTranform クラスを使用すると、イメージの拡大/縮小を行うことが可能になります。
横方向の拡大率はScaleX プロパティを、縦方向の拡大率は ScaleY プロパティを設定するのですが、ここでSliderコントロールのValueプロパティをバインディングすることで、Sliderの値を使用してイメージを拡大/縮小させることができるようになります。
下記は Slider の最小値を1に、最大値を200にすることで、1%~200%までの拡大/縮小を行えるようにする例です。
XAMLの例
<StackPanel> <StackPanel Orientation="Horizontal"> <TextBlock Margin="5,5,10,5">拡大</TextBlock> <!-- 拡大率の値とSlider1のValueをバインド--> <TextBlock Margin="5,5,0,5" Text="{Binding Path=Value, ElementName=Slider1, Mode=OneWay}"/> <TextBlock Margin="0,5">%</TextBlock> </StackPanel> <Slider x:Name="Slider1" Orientation="Horizontal" Minimum="1" Maximum="200" Value="100"/> <!-- チューリップを表示 --> <Image Source="images/Tulips.jpg" RenderTransformOrigin="0, 0"> <Image.RenderTransform> <TransformGroup> <ScaleTransform ScaleX="0.01" ScaleY="0.01"/> <ScaleTransform> <ScaleTransform.ScaleX> <!-- X方向の拡大率をSlider1のValueをバインド --> <Binding ElementName="Slider1" Path="Value" Mode="OneWay"/> </ScaleTransform.ScaleX> <ScaleTransform.ScaleY> <!-- Y方向の拡大率をSlider1のValueをバインド --> <Binding ElementName="Slider1" Path="Value" Mode="OneWay"/> </ScaleTransform.ScaleY> </ScaleTransform> </TransformGroup> </Image.RenderTransform> </Image> </StackPanel>