スライダーでイメージを拡大/縮小表示する

バインディングを利用してイメージの拡大縮小をする例を紹介します。

まず、イメージを表示するには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>