

Buttonタップ後にタップしたボタンの動的表示について質問します。  
あるxamlファイルに以下のButtonタグが設定しているとします。

[code]

    <Button 
        Clicked="TheButtonTapped"
        Image="sample.png"
        WidthRequest="256"
        HeightRequest="256"
        Opacity="0.0"
        VerticalOptions="Center"/>
    
[/code]

ボタンタップ(メソッド「TheButtonTapped」)実行時にこのボタンを以下のように  
動的表示したいのです。

  1. ボタンのロック(タップ操作不可)
  2. ボタンのイメージ表示(Opacityを'1.0'に変更)
  3. タイマー起動(例:5秒)
  4. タイマー起動中ボタンをfadeout(Opacityを'1.0'から'0.0'に低減)
  5. タイマー終了
  6. ボタンのロック解除(タップ操作可)

JQueryなら実装例があるのでイメージがつきやすいのですが、これのC#版を  
見つけることができず、困っております。  
もしご存知の方がいらっしゃいましたらご教授のほどお願い致します。


CC BY-SA 3.0
2016-06-25T07:09:29.033
27058
2016-06-25T13:38:19.487
2016-06-25T08:42:52.870
8000
9561
question
c# xaml xamarin
xamlのButtonの動的表現方法について


アニメーションが目的なら、 Xamarin.Forms にアニメーションの機能が用意されているので、それを使って実現できます。

[code]

    <Button 
        Text="Button1"
        Clicked="Button1_Clicked" />
    
    <Button 
        x:Name="Button2"
        Text="Button2"
        Clicked="Button2_Clicked" />
    
[/code]

上記のようにボタンが２つ（`Button1` と `Button2`）があり、`Button1` が押された時に、 `Button2`
に対して目的のアニメーションを実行するには、以下のようにします。

[code]

    volatile bool _button2Enabled = true;
    
    async void Button1_Clicked(object sender, System.EventArgs e)
    {
        _button2Enabled = false;
        // Button2.IsEnabled = false; を使うとボタンが非活性化状態の色になってしまうので相応しくない？
    
        // アニメーション開始：5秒かけてfadeout(Opacityを'1.0'から'0.0'に低減)
        Button2.Opacity = 1.0;
        await Button2.FadeTo(0.0, 5000, Easing.Linear);
    
        _button2Enabled = true;
        //Button2.IsEnabled = true; 
    }
    
    void Button2_Clicked(object sender, System.EventArgs e)
    {
        if (!_button2Enabled) // Button2.IsEnabled が使えない場合はフラグでロック
            return;
    }
    
[/code]

ボタンのロックは、本来 `Button2.IsEnabled = false`
を使うべきですが、これを行うとボタンが非活性時の色に変わってしまうので、アニメーションに違和感が生じる可能性があります。その場合、上記コードで示したように自前でフラグを持ちロックを実現する必要があります。


CC BY-SA 3.0
2016-06-25T13:38:19.487
27071
2016-06-25T13:38:19.487
15190
27058
answer