Question

这是CheckBox.xaml

<?xml version="1.0" encoding="UTF-8"?>  
<ContentView xmlns="http://xamarin.com/schemas/2014/forms"   
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"   
    x:Class="CheckBoxSample.Controls.CheckBox">  
    <ContentView.Content>  
        <StackLayout Orientation="Horizontal"  
                     x:Name="mainContainer"  
                     HorizontalOptions="FillAndExpand"  
                     VerticalOptions="FillAndExpand"  
                     Padding="0"  
                     Spacing="5">  
            <AbsoluteLayout HorizontalOptions="Center"  
                            VerticalOptions="Center"  
                            WidthRequest="20"  
                            HeightRequest="20"  
                            x:Name="imageContainer">  
                <Image Source="{Binding CheckedBackgroundImageSource}"  
                       x:Name="checkedBackground"  
                       Aspect="AspectFit"  
                       AbsoluteLayout.LayoutBounds="0.5, 0.5, 1, 1"  
                       AbsoluteLayout.LayoutFlags="All"  
                       Opacity="0"  
                       InputTransparent="True"/>  
                <Image Source="{Binding BorderImageSource}"  
                       x:Name="borderImage"  
                       Aspect="AspectFit"  
                       AbsoluteLayout.LayoutBounds="0.5, 0.5, 1, 1"  
                       AbsoluteLayout.LayoutFlags="All"  
                       InputTransparent="True"/>  
                <Image Source="{Binding CheckmarkImageSource}"  
                       x:Name="checkedImage"  
                       Aspect="AspectFit"  
                       AbsoluteLayout.LayoutBounds="0.5, 0.5, 1, 1"  
                       AbsoluteLayout.LayoutFlags="All"  
                       Opacity="0"  
                       InputTransparent="True"/>  
            </AbsoluteLayout>  
            <Label x:Name="controlLabel"  
                   HorizontalOptions="FillAndExpand"  
                   VerticalOptions="FillAndExpand"  
                   HorizontalTextAlignment="Start"  
                   VerticalTextAlignment="Center"  
                   Text="{Binding Title}"  
                   Style="{Binding LabelStyle}"  
                   InputTransparent="True"/>  
        </StackLayout>  
    </ContentView.Content>  
</ContentView>

这是CheckBox.Xaml.cs。

    using System;  
using System.Collections.Generic;  
using Xamarin.Forms;  
using Xamarin.Forms.Xaml;  

namespace CheckBoxSample.Controls  
{ /// <summary>  
  /// Custom checkbox control  
  /// </summary>  
    [XamlCompilation(XamlCompilationOptions.Compile)]  

    public partial class CheckBox : ContentView  
    {  
        public CheckBox()  
        {  
            InitializeComponent();  
            controlLabel.BindingContext = this;  
            checkedBackground.BindingContext = this;  
            checkedImage.BindingContext = this;  
            borderImage.BindingContext = this;  
            mainContainer.GestureRecognizers.Add(new TapGestureRecognizer()  
            {  
                Command = new Command(tapped)  
            });  
        }  

        public static readonly BindableProperty BorderImageSourceProperty = BindableProperty.Create(nameof(BorderImageSource), typeof(string), typeof(CheckBox), "", BindingMode.OneWay);  
        public static readonly BindableProperty CheckedBackgroundImageSourceProperty = BindableProperty.Create(nameof(CheckedBackgroundImageSource), typeof(string), typeof(CheckBox), "", BindingMode.OneWay);  
        public static readonly BindableProperty CheckmarkImageSourceProperty = BindableProperty.Create(nameof(CheckmarkImageSource), typeof(string), typeof(CheckBox), "", BindingMode.OneWay);  
        public static readonly BindableProperty IsCheckedProperty = BindableProperty.Create(nameof(IsChecked), typeof(bool), typeof(CheckBox), false, BindingMode.TwoWay, propertyChanged: checkedPropertyChanged);  
        public static readonly BindableProperty TitleProperty = BindableProperty.Create(nameof(Title), typeof(string), typeof(CheckBox), "", BindingMode.OneWay);  
        public static readonly BindableProperty CheckedChangedCommandProperty = BindableProperty.Create(nameof(CheckedChangedCommand), typeof(Command), typeof(CheckBox), null, BindingMode.OneWay);  
        public static readonly BindableProperty LabelStyleProperty = BindableProperty.Create(nameof(LabelStyle), typeof(Style), typeof(CheckBox), null, BindingMode.OneWay);  

        public string BorderImageSource  
        {  
            get { return (string)GetValue(BorderImageSourceProperty); }  
            set { SetValue(BorderImageSourceProperty, value); }  
        }  

        public string CheckedBackgroundImageSource  
        {  
            get { return (string)GetValue(CheckedBackgroundImageSourceProperty); }  
            set { SetValue(CheckedBackgroundImageSourceProperty, value); }  
        }  

        public string CheckmarkImageSource  
        {  
            get { return (string)GetValue(CheckmarkImageSourceProperty); }  
            set { SetValue(CheckmarkImageSourceProperty, value); }  
        }  

        public bool IsChecked  
        {  
            get { return (bool)GetValue(IsCheckedProperty); }  
            set { SetValue(IsCheckedProperty, value); }  
        }  

        public string Title  
        {  
            get { return (string)GetValue(TitleProperty); }  
            set { SetValue(TitleProperty, value); }  
        }  

        public Command CheckedChangedCommand  
        {  
            get { return (Command)GetValue(CheckedChangedCommandProperty); }  
            set { SetValue(CheckedChangedCommandProperty, value); }  
        }  

        public Style LabelStyle  
        {  
            get { return (Style)GetValue(LabelStyleProperty); }  
            set { SetValue(LabelStyleProperty, value); }  
        }  

        public Label ControlLabel  
        {  
            get { return controlLabel; }  
        }  

        static void checkedPropertyChanged(BindableObject bindable, object oldValue, object newValue)  
        {  
            ((CheckBox)bindable).ApplyCheckedState();  

        }  

        /// <summary>  
        /// Handle chackox tapped action  
        /// </summary>  
        void tapped()  
        {  
            IsChecked = !IsChecked;  
            ApplyCheckedState();  
        }  

        /// <summary>  
        /// Reflect the checked event change on the UI  
        /// with a small animation  
        /// </summary>  
        /// <param name="isChecked"></param>  
        ///   
        void ApplyCheckedState()  
        {  
            Animation storyboard = new Animation();  
            Animation fadeAnim = null;  
            Animation checkBounceAnim = null;  
            Animation checkFadeAnim = null;  
            double fadeStartVal = 0;  
            double fadeEndVal = 1;  
            double scaleStartVal = 0;  
            double scaleEndVal = 1;  
            Easing checkEasing = Easing.CubicIn;  

            if (IsChecked)  
            {  
                checkedImage.Scale = 0;  
                fadeStartVal = 0;  
                fadeEndVal = 1;  
                scaleStartVal = 0;  
                scaleEndVal = 1;  
                checkEasing = Easing.CubicIn;  
            }  
            else  
            {  
                fadeStartVal = 1;  
                fadeEndVal = 0;  
                scaleStartVal = 1;  
                scaleEndVal = 0;  
                checkEasing = Easing.CubicOut;  
            }  
            fadeAnim = new Animation(  
                    callback: d => checkedBackground.Opacity = d,  
                    start: fadeStartVal,  
                    end: fadeEndVal,  
                    easing: Easing.CubicOut  
                    );  
            checkFadeAnim = new Animation(  
                callback: d => checkedImage.Opacity = d,  
                start: fadeStartVal,  
                end: fadeEndVal,  
                easing: checkEasing  
                );  
            checkBounceAnim = new Animation(  
                callback: d => checkedImage.Scale = d,  
                start: scaleStartVal,  
                end: scaleEndVal,  
                easing: checkEasing  
                );  

            storyboard.Add(0, 0.6, fadeAnim);  
            storyboard.Add(0, 0.6, checkFadeAnim);  
            storyboard.Add(0.4, 1, checkBounceAnim);  
            storyboard.Commit(this, "checkAnimation", length: 600);  

            if (CheckedChangedCommand != null && CheckedChangedCommand.CanExecute(this))  
                CheckedChangedCommand.Execute(this);  
        }  
    }  
}

在Xamarin.Forms中使用自定义复选框

声明CheckBox的命名空间。

xmlns:ctrls="clr-namespace:CheckBoxSample.Controls"

如下所示的复选框

<ctrls:CheckBox x:Name="cbIndia" Title="India" IsChecked="True" BorderImageSource="checkborder" CheckedBackgroundImageSource="checkcheckedbg" CheckmarkImageSource="checkcheckmark" />

设置CheckBox属性的值为

标题：印度
已检查：是
BorderImageSource ：checkborder.png
CheckBackgroundImageSource ：checkcheckedbg.png
CheckmarkImageSource ：checkcheckmark.png

用于Android的演示屏幕。

用于iOS的演示屏幕。

Answer 1

尝试一下：

<ctrls:CheckBox x:Name="cbIndia" Title="India" IsChecked="False" BorderImageSource="checkborder" CheckedBackgroundImageSource="checkcheckedbg" CheckmarkImageSource="checkcheckmark" />

如何解决眨眼问题在Xamarin Forms中使用图像创建复选框？

1 个答案: