c# - 如何为图像按钮添加选择效果？

Question

我正在尝试实现的内容：我想要四个图像按钮，如果我单击一个按钮，则会显示一个小复选标记，表明我选择了复选标记。如果我点击另一个按钮，那么前一个按钮的复选标记将消失，我新选择的按钮将显示一个小复选标记。

我目前拥有的代码：

<Grid HorizontalOptions="CenterAndExpand"
                  VerticalOptions="CenterAndExpand"
                  Margin="20, 80">
                <Grid.RowDefinitions>
                    <RowDefinition Height="120" />
                    <RowDefinition Height="120" />
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="1*" />
                    <ColumnDefinition Width="1*" />
                </Grid.ColumnDefinitions>
                <ImageButton Source="select_payment_placeholder.png"
                             Grid.Row="0"
                             Grid.Column="0" />
                <ImageButton Source="select_payment_placeholder.png"
                             Grid.Row="0"
                             Grid.Column="1" />
                <ImageButton Source="select_payment_placeholder.png"
                             Grid.Row="1"
                             Grid.Column="0" />
                <ImageButton Source="select_payment_placeholder.png"
                             Grid.Row="1"
                             Grid.Column="1" />
            </Grid>

这是我正在尝试实现的效果的演示。

标签： c#xamarin.forms

Answer 1

在这里，我使用Xamarin.Forms CollectionView作为父布局。

创建CheckItem：

public class CheckItem : INotifyPropertyChanged
{

    public event PropertyChangedEventHandler PropertyChanged;

    public string ContentImage { set; get; }

    private bool isShow;

    public bool IsShow
    {
        set
        {
            if (isShow != value)
            {
                isShow = value;
                OnPropertyChanged("IsShow");
            }
        }
        get
        {
            return isShow;
        }
    }

    public ICommand TapCommand
    {
        get
        {
            return new Command((e) =>
            {
                var item = (e as CheckItem);
                // logic on item
                if (item.isShow)
                {
                    PageMain.checkItems[0].IsShow = false;
                    PageMain.checkItems.Remove(PageMain.checkItems[0]);
                    PageMain.checkItems.Add(item);
                }
                else
                {
                    item.IsShow = true;
                    if (PageMain.checkItems.Count == 0)
                    {
                        PageMain.checkItems.Add(item);
                    }
                    else
                    {
                        PageMain.checkItems[0].IsShow = false;
                        PageMain.checkItems.Remove(PageMain.checkItems[0]);
                        PageMain.checkItems.Add(item);
                    }
                }
               
            });
        }
    }

    protected virtual void OnPropertyChanged(string propertyName)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
}

然后CheckModel可以设置一个包含四个项目的列表数据：

public class CheckModel
{

    public List<CheckItem> CheckItems { set; get; }

    public CheckModel()
    {
        CheckItems = new List<CheckItem>();
        CheckItems.Add( new CheckItem() { ContentImage = "XamarinLogo.png", IsShow = false});
        CheckItems.Add( new CheckItem() { ContentImage = "XamarinLogo.png", IsShow = false});
        CheckItems.Add( new CheckItem() { ContentImage = "XamarinLogo.png", IsShow = false});
        CheckItems.Add( new CheckItem() { ContentImage = "XamarinLogo.png", IsShow = false});
    }
}

在ContentPage中，Xaml 代码包含 aCollectionView和其中包含ImageButtonand MarkIcon。并且MarkIcon默认是invisible.

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:d="http://xamarin.com/schemas/2014/forms/design"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             mc:Ignorable="d"
             x:Class="ImageButonSingleCheck.PageMain">
    <ContentPage.Content>
        <StackLayout>
            <Label Text="Welcome to Xamarin.Forms!"
                VerticalOptions="Start" 
                HorizontalOptions="Start" />
            <CollectionView x:Name="MyCollectionView"
                            ItemsSource="{Binding CheckItems}"
                            SelectionMode="None"
                            SelectionChanged="CollectionView_SelectionChanged">
                <CollectionView.ItemsLayout>
                    <GridItemsLayout Orientation="Vertical"
                                     Span="2" />
                </CollectionView.ItemsLayout>
                <CollectionView.ItemTemplate>
                    <DataTemplate>
                        <RelativeLayout x:Name="Item" HorizontalOptions="CenterAndExpand"
                                        VerticalOptions="CenterAndExpand" HeightRequest="120">
                            <ImageButton x:Name="MyImageButton"
                                         BackgroundColor="LightYellow"
                                         Source="{Binding ContentImage}"
                                         Command="{Binding TapCommand}"
                                         CommandParameter="{Binding Source={x:Reference Item}, Path=BindingContext}"
                                         RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent,Property=Height,Factor=.15,Constant=0}"
                                         RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent,Property=Width,Factor=1,Constant=0}"
                                         RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent,Property=Height,Factor=.8,Constant=0}" />
                            <Image x:Name="CheckImage"
                                   Source="Tick.png"
                                   BackgroundColor="AliceBlue"
                                   IsVisible="{Binding IsShow}"
                                   RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToView,ElementName=MyImageButton,Property=Y,Factor=1,Constant=5}"
                                   RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToView,ElementName=MyImageButton,Property=X,Factor=1,Constant=150}"
                                   RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent,Property=Width,Factor=0,Constant=40}"
                                   RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent,Property=Height,Factor=0,Constant=40}" />
                        </RelativeLayout>
                    </DataTemplate>
                </CollectionView.ItemTemplate>
            </CollectionView>
        </StackLayout>
    </ContentPage.Content>
</ContentPage>

在ContentPage中，调用了 CheckModel ：

public partial class PageMain : ContentPage
{
    CheckModel checkModel;
    public static List<CheckItem> checkItems  { set; get; }
    public PageMain()
    {
        InitializeComponent();
        checkModel = new CheckModel();
        BindingContext = checkModel;

        checkItems = new List<CheckItem>();
    }
}

效果：

这是示例。