CodeZine(コードジン)

特集ページ一覧

Silverlight/WPFで使える逆引きTips集
――スライダー機能

(8) Sliderコントロール

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2011/02/11 14:00

ダウンロード Slider_WPF_VB.zip (2.0 MB)
ダウンロード Slider_WPF_CS.zip (1.9 MB)
ダウンロード Slider_Silverlight_VB.zip (5.8 MB)
ダウンロード Slider_Silverlight_CS.zip (5.7 MB)

目次

04.スライダーの配置方向を設定する

 Sliderコントロールは、既定で横方向に配置されますが、Orientationプロパティを使用することで配置方向を変更することが可能です。

 OrientationプロパティにはOrientation列挙体の値を指定します。

Orientation列挙体
メンバ名 説明
Horizontal 横方向
Vertical 縦方向

 下記の例では、ラジオボタン[横]をクリックすると横方向に、ラジオボタン[縦]をクリックすると縦方向にSliderコントロールを配置します。

スライダーの配置方向を設定する例
スライダーの配置方向を設定する例
XAMLの例
<StackPanel>
    <Grid Height="32">
        <RadioButton Content="横" Height="16" 
                     HorizontalAlignment="Left" Margin="6,6,0,0" 
                     Name="RadioButton1" VerticalAlignment="Top" />
        <RadioButton Content="縦" Height="16" 
                     Margin="40,6,0,0" Name="RadioButton2" 
                     VerticalAlignment="Top" HorizontalAlignment="Left" />
    </Grid>
    <!-- スライダーを横方向に配置 -->
    <Slider Name="Slider1" 
            Width="220" Height="220"
            Orientation="Horizontal"/>
</StackPanel>
VBの例
' スライダーを横方向にする
Private Sub RadioButton1_Checked(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs) Handles RadioButton1.Checked
    Slider1.Orientation = Orientation.Horizontal
End Sub

' スライダーを縦方向にする
Private Sub RadioButton2_Checked(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs) Handles RadioButton2.Checked
    Slider1.Orientation = Orientation.Vertical
End Sub
C#の例
// スライダーを横方向にする
private void radioButton1_Checked(object sender, RoutedEventArgs e)
{
    slider1.Orientation = Orientation.Horizontal;
}

// スライダーを縦方向にする
private void radioButton2_Checked(object sender, RoutedEventArgs e)
{
    slider1.Orientation = Orientation.Vertical;
}
ポイント

 スライダーの配置方向を設定するにはOrientationプロパティを使用する。

05.値を増加させる方向を反転する

 値を増加させる方向を反転するにはIsDirectionReversedプロパティにTrueを設定します。IsDirectionReservedプロパティにTrueを設定すると、右に行くほど値が小さくなります。

 下記は、値を増加させる方向を反転する例です。

値を増加させる方向を反転する例
値を増加させる方向を反転する例
XAMLの例
<StackPanel>
    <Slider Name="Slider1" VerticalAlignment="Top"
            Minimum="0" Maximum="100" 
            TickPlacement="BottomRight" TickFrequency="10" 
            AutoToolTipPlacement="BottomRight"
            IsDirectionReversed="True"
            Value="0"/>
</StackPanel>
VBの例
Private Sub Window_Loaded(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs) Handles MyBase.Loaded
    ' 値の増加方向を反転する
    Slider1.IsDirectionReversed = True
End Sub
C#の例
private void Window_Loaded(object sender, RoutedEventArgs e)
{
    // 値の増加方向を反転する
    slider1.IsDirectionReversed = true;
}
ポイント

 値を増加させる方向を反転させるにはIsDirectionReservedプロパティを使用する。

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

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

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

 Sliderコントロールを使用してイメージの拡大/縮小を行うには、Image要素で、TransFormのScaleXおよびScaleYを設定する。


  • LINEで送る
  • このエントリーをはてなブックマークに追加

バックナンバー

連載:Silverlight/WPFで使える逆引きTips集

もっと読む

著者プロフィール

  • HIRO(ヒロ)

    HIRO's.NETのHIROです。 とある半導体工場のSEです。 VB.NET, C#, PowerShellによるプログラミングを楽しんでいます。 最近はBlog でPowerShellについて書いています。 2008/07/07にPowerShell from Japan!!という...

あなたにオススメ

All contents copyright © 2005-2021 Shoeisha Co., Ltd. All rights reserved. ver.1.5