Vincent
Vincent

Reputation: 2093

Xamarin set BackgroundColor of StackLayout on tapped

StackLayout sl1 = this.FindByName<StackLayout>("myStackLayout");
sl1.GestureRecognizers.Add(
    new TapGestureRecognizer() {
        Command = new Command(() => { 

              Task.Run(() => { 

                 // When this line hits, background is set...  
                 sl1.BackgroundColor = Color.FromHex("CCCCCC");



                 //this.Refresh(); << force Refresh UI function or something????

                 Task.Delay(400);

                 // When this line hits, background is reset...  
                 sl1.BackgroundColor = Color.FromHex("EEEEEE");

              });


        }) 
   });

The above code is working as expected when i debug this code line by line.

However, when i run this code without debugging, the UI will not update the BackgroundColor.

Then when i try to debug to see what is happening, it seems to work.

EDIT:

The first time it also works.

EDIT 2 (Solution):

Using a combination of the two answers i got it to work using the following code:

        StackLayout sl1 = this.FindByName<StackLayout>("myStackLayout");
        sl1.GestureRecognizers.Add(
        new TapGestureRecognizer()
        {
            Command = new Command(async () =>
            {
                sl1.BackgroundColor = Color.FromHex("#CCCCCC");

                await Task.Run(async () => { 
                    await Task.Delay(100);
                    Device.BeginInvokeOnMainThread(() => { 
                        sl1.BackgroundColor = Color.FromHex("#EEEEEE");
                    });
                });

            })
        });

Upvotes: 1

Views: 1525

Answers (2)

Nick Peppers
Nick Peppers

Reputation: 3251

You are trying to update the UI from a background thread and all UI changes should be done on the main thread.

Device.BeginInvokeOnMainThread(() =>
{
    sl1.BackgroundColor = Color.FromHex("CCCCCC");
}); 

Upvotes: 1

App Pack
App Pack

Reputation: 1532

Just tested this with a quick app, and this works:

MainPage.xaml.cs

public partial class MainPage : ContentPage
{
    public MainPage()
    {
        InitializeComponent();
        StackLayout sl1 = this.FindByName<StackLayout>("myStackLayout");
        sl1.GestureRecognizers.Add(
            new TapGestureRecognizer()
            {
                Command = new Command(async () => {

                    // When this line hits, background is set...  
                    sl1.BackgroundColor = Color.FromHex("#e50000");



                    //this.Refresh(); << force Refresh UI function or something????

                    await Task.Delay(400);

                    // When this line hits, background is reset...  
                    sl1.BackgroundColor = Color.FromHex("#0be204");

                })
            });
    }
}

MainPage.xaml

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:test"
             x:Class="test.MainPage">

    <StackLayout x:Name="myStackLayout" BackgroundColor="RoyalBlue">
        <!-- Place new controls here -->
        <Label Text="Welcome to Xamarin.Forms!" 
           HorizontalOptions="Center"
           VerticalOptions="CenterAndExpand" BackgroundColor="Blue" />
    </StackLayout>

</ContentPage>

Upvotes: 0

Related Questions