04.スライダーの配置方向を設定する
Sliderコントロールは、既定で横方向に配置されますが、Orientationプロパティを使用することで配置方向を変更することが可能です。
OrientationプロパティにはOrientation列挙体の値を指定します。
| メンバ名 | 説明 |
|---|---|
| Horizontal | 横方向 |
| Vertical | 縦方向 |
下記の例では、ラジオボタン［横］をクリックすると横方向に、ラジオボタン［縦］をクリックすると縦方向にSliderコントロールを配置します。
<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>
' スライダーを横方向にする
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
// スライダーを横方向にする
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を設定すると、右に行くほど値が小さくなります。
下記は、値を増加させる方向を反転する例です。
<StackPanel>
<Slider Name="Slider1" VerticalAlignment="Top"
Minimum="0" Maximum="100"
TickPlacement="BottomRight" TickFrequency="10"
AutoToolTipPlacement="BottomRight"
IsDirectionReversed="True"
Value="0"/>
</StackPanel>
Private Sub Window_Loaded(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs) Handles MyBase.Loaded
' 値の増加方向を反転する
Slider1.IsDirectionReversed = True
End Sub
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％までの拡大／縮小を行えるようにする例です。
<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を設定する。
