#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