如何在blazor应用程序中设置绑定变量的回退值？

Question

来自WPF开发，我正在使用ASP。NET和Blazor在理解以下内容时有点困难：例如，我想将CSS类值绑定到代码隐藏类的属性。

@inherits TextGenerator
<style>
    .mycssclass
    {
        opacity: @TextOpacity;
        transition: opacity 2s;
    }
</style>
<div class="modal-dialog-centered">
    <h1>@Text</h1>
</div>

这就是代码隐藏类的样子：

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();
        });
    }
}

我的问题如下：如何为不透明度设置初始或后备值？例如，在这种情况下，我希望不透明度初始化为0，这样当我在StartTextSlideShow（）中将其设置为1.0f时，文本将淡入。

Answer 1

你误解了我的意思。

在编译时，样式css代码被移动到mycomponent中。剃须刀css文件和标记代码被编译成与代码隐藏类同名的部分类。没有对样式的运行时访问。

您可以使用直接样式属性设置不透明度，如下所示：

<div class="bg-primary" style="opacity:@Opacity ;">Click to change my Opacity</div>

<button class="btn btn-primary ml-3" @onclick="OnClick">Change Opacity</button>

@code {
    decimal Opacity = 1m;

    void OnClick()
    {
        Opacity = Opacity - 0.1m;
    }
}

或者有一系列关于不同不透明度的样式，你可以将其应用于你想要的样式元素。

.opacity-100
{
opacity: 1;
}
.opacity-90
{
opacity: .9;
}