来自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
时,文本将淡入。
你误解了我的意思。
在编译时,样式
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;
}