图像不透明度，打开和打开

Question

I have five images, when you click one of them I want that one to get full opacity while the other only gets half, to show it is the selected one.

I am using MVVM and generally wondering if I'm doing it the right way

I was thinking about passing the name of the imagesource binded into a property.

<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>

The list that turns the string into status later on.

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

Property for opacity

       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 statement Changing all the opacities.

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

Answer 1

The way id attack this, if you have multiple images, create an ImageVm and encapsulate any image specific implementation details ie enum State and an IsSelected notification properties. Of course if you only have 1 image this becomes trivially easy and you don't need vms

Use a DataTrigger that binds to an IsSelected MVVM property to set the Opacity and state if you need to change the image source. Obviously on click you will need to set the IsSelected Property and deselect the other VMs

Example of DataTrigger for IsSelected

<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>

Update

You CAN use triggers with enums, and you can use a tap recognizers to fire commands in your main viewmodals. also commands can take parameters as well.

Its probably better (knowing what you have described in the comments) to just make a State and Severity enum and bind to it. and set the State and Severity via a command by a gesture.

Then you could just make a Trigger for each Image to change the Opacity for each image on the various state and severity.