コントロールの左右反転を簡単に

  • Article

#wp7dev_jp

実行時に、例えばimageコントロールを左右反転したい。そんな時はどうしたらいいか。こういう時にXAML＋C#が便利。

簡単反転

まずは画面定義側。

 <Image Source="Images/myImage.png" RenderTransformOrigin="0.5,0.5" >
    <Image.RenderTransform>
        <CompositeTransform x:Name="invert" ScaleX="1"/>
    </Image.RenderTransform>
</Image>

そして、コード側です。反転するたびに呼び出せばOK。

 private void InvertControl()
{
    invert.ScaleX *= -1;
}

ポイントはXAMLで定義して、インスタンス名（invert) を付けておくこと。これで簡単に設定ができる。

Bindで実装するには

その他チェックボックスなどと、Bindすることも面白いが、そういうときのために Boolean ←→ +1/-1 のコンバーターを作っておくといいかも。Boolean to Visibility コンバーターも便利。

 public class BooleanToInvertConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        if (value == null)
            return -1;
        else
            return (bool)value ? 1 : -1;
    }

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
    {
        return (int)value == 1;
    }
}

使うときはこんな感じ （Blendで指定できないので注意）

 <phone:PhoneApplicationPage.Resources>
    <local:BooleanToInvertConverter x:Key="BooleanToVisibilityConverter"/>
</phone:PhoneApplicationPage.Resources>
　　　　　　： 
<Image x:Name="image1" Stretch="None" Source="/myapp;component/cat.jpg" RenderTransformOrigin="0.5,0.5" >
    <Image.RenderTransform>
        <CompositeTransform x:Name="invert"
　　　　 ScaleX="{Binding IsChecked, Converter={StaticResource BooleanToVisibilityConverter}, ElementName=checkBox1}"/>
    </Image.RenderTransform>
</Image>
<CheckBox Content="CheckBox" x:Name="checkBox1"/>

結果：もこな、このころは小さくてかわいかったなぁ。

 imageimage