提问者:小点点

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


来自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时,文本将淡入。


共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;
}