xaml - Xamarin MVVM不透明度转换器？

Question

因此，我得到了五张图像，当您单击其中一张时，我希望该一张完全不透明，而另一张只有一半，以显示它是选定的一张。

我设法使用此方法执行此操作，但是由于不允许在MVVM中引用该 View ，因此无法使用。

我想我必须使用转换器来实现不透明度，然后将图像作为命令参数发送？我以前使用过转换器，但从未使用过转换器，因此我不确定该怎么做，第一次尝试使用Mvvm。

   public void OnStatusTapped(object sender, EventArgs args)
        {
            statusUnResolved.Opacity = 0.5;
            statusInProgress.Opacity = 0.5;
            statusDone.Opacity = 0.5;

            var image = (Image)sender;
            image.Opacity = 1;

            String[] buttons = new String[StatusValues.Count];
            for (int n = 0; n < StatusValues.Count; ++n)
            {
                buttons[n] = StatusValues[n].Name;
            }
            if (image.Source is FileImageSource)
            {
                FileImageSource fileImageSource = (FileImageSource)image.Source;
                string fileName = fileImageSource.File;
                foreach (var item in StatusValues)
                {
                    if (item.Name == fileName)
                    {
                        Issue.StatusEx = item.Value;
                        StatusChecker();
                        return;
                    }
                }
            }
        }



 private readonly ICommand onStatusTappedCommand = null;
public ICommand OnStatusTappedCommand
{
    get { return onStatusTappedCommand ?? new Command(OnStatusTapped); }
}


            <StackLayout Grid.Row="3" Grid.Column="1" Orientation="Horizontal" Spacing="0"  >
                <Image x:Name="statusUnResolved" Source="statusUnresolved.png" HorizontalOptions="Center" VerticalOptions="Center" HeightRequest="40" Opacity="0.6">
                    <Image.GestureRecognizers>
                        <TapGestureRecognizer Tapped="OnStatusTapped" NumberOfTapsRequired="1"/>
                    </Image.GestureRecognizers>
                </Image>
            </StackLayout>
            <StackLayout Grid.Row="3" Grid.Column="2" Orientation="Horizontal" Spacing="4">
                <Image x:Name="statusInProgress" Source="statusInProgress.png" HorizontalOptions="Center" VerticalOptions="Center" HeightRequest="40" Opacity="0.6" >
                    <Image.GestureRecognizers>
                        <TapGestureRecognizer Tapped="OnStatusTapped" NumberOfTapsRequired="1"/>
                    </Image.GestureRecognizers>
                </Image>
            </StackLayout>
            <StackLayout Grid.Row="3" Grid.Column="3" Orientation="Horizontal" Spacing="4" >
                <Image x:Name="statusDone" Source="statusDone.png" HorizontalOptions="Center" VerticalOptions="Center" HeightRequest="40" Opacity="1">
                    <Image.GestureRecognizers>
                        <TapGestureRecognizer Tapped="OnStatusTapped" NumberOfTapsRequired="1"/>
                    </Image.GestureRecognizers>
                </Image>
            </StackLayout>
        </Grid>

Answer 1

假设屏幕上始终有这5张特定的图像，则可以在ViewModel中创建五个double属性(每个图像一个)，即:

public double StatusUnresolvedOpacity
{
    get => _statusUnresolvedOpacity;
    set
    {
        if (_statusUnresolvedOpacity != value)
        {
            _statusUnresolvedOpacity = value;
            OnPropertyChanged(nameof(StatusUnresolvedOpacity));
        }
    }
}

并且还有另一种方法可以将每个的不透明度重置为0.5，即

public void ResetOpacities()
{
    StatusUnresolvedOpacity = 0.5;
    StatusInProgressOpacity = 0.5;
    ...
}

然后为每个图像提供一个点击手势识别器，它将调用 ResetOpacities()，然后直接将被单击的按钮的View Model属性设置为1.0。 IE:

private void OnStatusUnresolvedTapped(object sender, EventArgs e)
{
    myViewModel.ResetOpacities();
    myViewModel.StatusUnresolvedOpacity = 1.0;
}

如果您真的想通过使用值转换器，我建议创建五个 bool属性而不是 double属性，即:

public bool IsStatusUnresolvedActive { get ... set ... }

现在，无需重置/设置不透明度，您只需将 Activity 按钮的属性设置为 true，将不 Activity 按钮的属性设置为 false即可。然后在您的值(value)转换器中:

public class ActiveOpacityConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        return (bool)value ? 1.0 : 0.5;
    }

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
    {
        throw new NotImplementedException();
    }
}

并在您的xaml中使用:

<ContentPage x:converters="clr-namespace:MyProject.WhateverFolderValueConverersAreIn;assembly:MyProject" />
    <ContentPage.Resources>
        <ResourceDictionary>
            <converters:ActiveOpacityConverter x:Key="activeOpacityConverter" />
        </ResourceDictionary>
    </ContentPage.Resources>
    <Image Opacity={Binding IsStatusUnresolvedActive, 
                            Converter={converters:activeOpacityConverter}}
</ContentPage>