Coming from WPF development, I'm playing around with ASP.NET and Blazor and I have a bit of trouble understanding the following: I want to bind for example a CSS class value to a property of a code-behind class.

@inherits TextGenerator
<style>
    .mycssclass
    {
        opacity: @TextOpacity;
        transition: opacity 2s;
    }
</style>
<div >
    <h1>@Text</h1>
</div>

This is what the code-behind class looks like:

public class TextGenerator : ComponentBase
{
    public event Func<Task> OnPropertyChanged;

    private string _text;
    public string Text 
    { 
        get
        {
            return _text;
        }
        set
        {
            _text = value;
            OnPropertyChanged.Invoke();

        }
    }

    private float _textOpacity;
    public float TextOpacity
    {
        get
        {
            return _textOpacity;
        }
        set
        {
            _textOpacity = value;
            OnPropertyChanged.Invoke();

        }
    }

    protected async Task StartTextSlideShow()
    {
        Text = "";
        TextOpacity = 1.0f;
        for (int i = 0; i < 1000; i  )
        {
            Text = "Test #"   i.ToString();
            await Task.Delay(100);
        }
    }

    protected override void OnInitialized()
    {
        OnPropertyChanged  = PropertyChange;
        _ = StartTextSlideShow();
    }

    public async Task PropertyChange()
    {
        await InvokeAsync(() =>
        {
            StateHasChanged();
        });
    }
}

My question is the following: How can I set an initial or fallback value for the opacity? In this case for example I want the opacity to be initialized to 0, so that when I set it to 1.0f in StartTextSlideShow() the text will fade in.

CodePudding user response：

Here's a similar answer that picks up on your slideshow and fade in for each pseudo picture.

The Razor Code:

@page "/Text"
<style>
    .mycssclass
    {
        opacity: @_opacity;
        transition: opacity @_transition;
    }
</style>

<div >
    <h1 >@_text</h1>
</div>

And the code behind:

using Microsoft.AspNetCore.Components;
using System.Timers;

namespace StackOverflow.Server.Pages
{
    public partial class TextGenerator : ComponentBase
    {
        System.Timers.Timer _timer = new System.Timers.Timer();

        private string _text = "Slide Show Starting";
        private decimal _opacity = 0m;
        private string _transition = "0s";
        private int _counter = 0;

        private int _pictureCount = 5;

        private string _cssClass = "bg-white text-white-500 border border-secondary";

        protected override void OnInitialized()
        {
            _opacity = 1m;
            _transition = "2s";
            _timer.Interval = 4000;
            _timer.AutoReset = true;
            _timer.Elapsed  = TimerElapsed;
            _timer.Start();
        }

        public async void TimerElapsed(Object? sender, System.Timers.ElapsedEventArgs e)
        {
            _cssClass = "bg-primary text-white";
            _counter  ;
            _opacity = 0m;
            _transition = "0s";
            await this.InvokeAsync(StateHasChanged);
            await Task.Delay(1);
            _text = $"Picture {_counter}";
            _opacity = 1m;
            _transition = "2s";
            await this.InvokeAsync(StateHasChanged);
            if (_counter >= _pictureCount)
                _timer.Stop();
        }
    }
}

CodePudding user response：

My question is the following: How can I set an initial or fallback value for the opacity? In this case for example I want the opacity to be initialized to 0,

public float TextOpacity { get; set; } = 0.0f;

so that when I set it to 1.0f in StartTextSlideShow()

Just do that like this:

public float TextOpacity { get; set; } = 1.0f;

Note: The above is a complete answer to your question...

Here's a code sample how I would implement your TextGenerator in Blazor Server App, using a Timer. Copy and test...

BlazorTimer.cs

using System.Timers;

public class BlazorTimer
    {
        private Timer _timer;

        internal void SetTimer(double interval)
        {
            _timer = new Timer(interval);
            _timer.Elapsed  = NotifyTimerElapsed;
            _timer.Enabled = true;
            _timer.Start();
        }

     private void NotifyTimerElapsed(object sender, ElapsedEventArgs e)
        {
            OnElapsed?.Invoke();
        }

        public event Action OnElapsed;
    } 

Startup.ConfigureServices

 public void ConfigureServices(IServiceCollection services)
        {
           // Code removed ...

            services.AddTransient(config =>
            {
                var blazorTimer = new BlazorTimer();
                blazorTimer.SetTimer(100);
                return blazorTimer;
            });
        }

Usage: Index.razor

@page "/"
@implements IDisposable

@inject BlazorTimer Timer

<style>
    .mycssclass
    {
         opacity: @TextOpacity;
         transition: opacity 2s;
     }
</style>
<div >
     <h1 >@Text</h1>
</div>


@code
{
    private int i = 0;

    protected override void OnInitialized()
    {
        Timer.OnElapsed  = NotifyTimerElapsed;

        base.OnInitialized();
    }

    public string Text { get; set; }
    public float TextOpacity { get; set; } = 1.0f;

    private void NotifyTimerElapsed()
    {
        InvokeAsync(() =>
        {
           Text = $"Test #{i  }"; TextOpacity -= TextOpacity / 100; StateHasChanged();
        });
    }

    public void Dispose()
    {

    }
}