图像透明度,开启和关闭

4

我有五张图片,当你点击其中一张时,我希望它变得不透明,而其他四张则只显示一半的透明度,以显示它是被选中的。

我正在使用MVVM,一般来说,我想知道我是否在正确地使用它。

我考虑将绑定到属性的图像源的名称传递。

<StackLayout Grid.Row="3" Grid.Column="1" Orientation="Horizontal" Spacing="0">
                            <Image Source="{Binding StatusUnresolved}" HorizontalOptions="Center"
                                   VerticalOptions="Center" HeightRequest="40" Opacity="{Binding StatusUnresolvedOpacity}">
                                <Image.GestureRecognizers>
                                    <!--<TapGestureRecognizer Command="{Binding Source={x:Reference this}, Path=OnStatusTappedCommand}" CommandParameter="{Binding StatusUnresolved}" />-->
                                </Image.GestureRecognizers>
                            </Image>
                        </StackLayout>
将字符串转换为状态的列表。
  public List<IssueStatusModel> PossibleStatusValues
        {
            get
            {
                var items = new List<IssueStatusModel>
                {
                    new IssueStatusModel("statusUnresolved.png", IssueStatus.Unresolved),
                    new IssueStatusModel("statusInProgress.png", IssueStatus.InProgress),
                    new IssueStatusModel("statusDone.png", IssueStatus.Done)
                };

                return items;
            }
        }

不透明度属性

       public double StatusDoneOpacity
        {
            get { return statusDoneOpacity; }
            set
            {
                if (statusDoneOpacity != value)
                {
                    statusDoneOpacity = value;
                    NotifyPropertyChanged(nameof(StatusUnresolvedOpacity));
                }
            }
        }

        public string StatusDone
        {
            get { return "statusDone.png"; }
        }

public void OnStatusTapped(string fileName)
        {
                foreach (IssueStatusModel item in StatusValues)
                {
                    if (item.Name != fileName) continue;
                    Issue.Status = item.Status;
                    StatusChecker();
                    return;
                }
            }

    }

Switch语句:更改所有不透明度。

    private void StatusChecker()
            {
                switch (Issue.Status)
                {
                    case IssueStatus.Unresolved:
                        StatusUnresolvedOpacity = 1;
                        StatusInProgressOpacity = 0.5;
                        StatusDoneOpacity = 0.5;
                        StatusText = "Unresolved";
                        break;
                    case IssueStatus.InProgress:
                        StatusUnresolvedOpacity = 0.5;
                        StatusInProgressOpacity = 1;
                        StatusDoneOpacity = 0.5;
                        StatusText = "In Progress";
                        break;
                    case IssueStatus.Done:
                        StatusUnresolvedOpacity = 0.5;
                        StatusInProgressOpacity = 0.5;
                        statusDoneOpacity = 1;
                        StatusText = "Done";
                        break;
                }
            }

有困难让它正常工作。请告诉我们更多细节... - mjwills
抱歉,它确实能够工作,但似乎是一种非常粗糙的实现方式。 - JsonDork
1个回答

2
如果你有多个图像,我会创建一个ImageVm并封装任何特定于图像的实现细节,例如枚举StateIsSelected通知属性。当然,如果你只有1个图像,这变得非常容易,你不需要vms。 使用一个DataTrigger绑定到一个IsSelected MVVM属性来设置Opacity和状态,如果你需要更改图像源。显然,在单击时,你需要设置IsSelected属性并取消选择其他VMsIsSelectedDataTrigger示例。
<Image Grid.Column="2" Stretch="None">
    <Image.Style>
        <Style TargetType="{x:Type Image}">
            <Setter Property="Opacity" Value="0.5" />
            <Style.Triggers>
                <DataTrigger Value="True" Binding="{Binding IsSelected}">
                    <Setter Property="Opacity" Value="0.5"/>
                </DataTrigger>
            </Style.Triggers>
        </Style>
    </Image.Style>
</Image>

更新

您可以使用触发器与枚举一起使用,并且可以使用轻拍手势来触发主视图模型中的命令。此外,命令也可以带参数。

根据您在评论中描述的情况,最好只需创建一个“状态”和“严重性”枚举并进行绑定,然后通过手势命令设置状态和严重性。

然后,您可以为每个图像制作一个触发器,以便在不同的状态和严重程度下更改每个图像的不透明度。


是的!我实际上有3个状态图像和5个严重性图像,所以这可能是更好的方法?那么我应该创建一个ImageViewModel类,但有点不确定。我该如何在imageVM中设置和取消选定属性?抱歉,我有点新手。 - JsonDork
这只是一个图像控件吗?有很多要更改的图像吗? - TheGeneral
@JsonDork 我的意思是,你的页面中有多少张图片?只有一个 <image> 还是有很多张? - TheGeneral
啊,好的。我现在明白了。 - TheGeneral
@JsonDork 我已经更新了我的回答,但我现在没有时间详细说明一个完整的示例,不过其他人可能会给您一个更好的示例。但是它应该足以让您思考并进行研究。 - TheGeneral
显示剩余3条评论

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,