新文章 网摘 文章 随笔 日记

Xamarin.Forms Switch开关的数据绑定

Switch没有绑定功能,只能曲线实现:

<?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="MPhone.Views.Learning.ExamPage">
    <ContentPage.Content>
        <StackLayout>
            <Label Text="一、判斷題" VerticalOptions="Start" HorizontalOptions="Start" />
            <ListView x:Name="JudgmentQuestionListView"
                      HasUnevenRows ="True"
                      ItemsSource="{Binding JudgmentQuestions}">
                <ListView.ItemTemplate>
                    <DataTemplate>
                        <ViewCell>
                            <StackLayout>
                                <Label Text="{Binding QuestionId}" IsVisible="False"/>
                                <Label Text="{Binding SerialNo}" />
                                <Label Text="{Binding Content}"/>

                                <!--以下是改成横向排列控件-->
                                <StackLayout Orientation="Horizontal">
                                    <!--由于switch控件没有绑定功能,这个label用于监控开关状态并切换文字为“对”或“错”,用于显示-->
                                    <Label Text="错" TextColor="Red">
                                        <Label.Triggers>
                                            <!--事件触发器-->
                                            <DataTrigger TargetType="Label"
                                                Binding="{Binding Source={x:Reference userAnswerSwitch}, Path=IsToggled}"
                                                Value="true">
                                                <Setter Property="Text" Value="对" />
                                                <Setter Property="TextColor" Value="Green" />
                                            </DataTrigger>
                                        </Label.Triggers>
                                    </Label>
                                    <!--由于switch控件没有绑定功能,只能将值绑定到lable,这个label用于监控开关状态并切换值为“true”或“false”,用于提交值-->
                                    <!--模式为双向绑定,这样当view中改变时,后端也才会跟着改变,默认是单向绑定的-->
                                    <Label Text="{Binding UserAnswer, Mode=TwoWay}">
                                        <!--事件触发器-->
                                        <Label.Triggers>
                                            <!--监控userAnswerSwitch的IsToggled值-->
                                            <DataTrigger TargetType="Label"
                                                Binding="{Binding Source={x:Reference userAnswerSwitch}, Path=IsToggled}"
                                                Value="true">
                                                <!--事件触发时,如果IsToggled为true,设置本label的Text为"true"-->
                                                <Setter Property="Text" Value="true" />
                                            </DataTrigger>
                                            <DataTrigger TargetType="Label"
                                                Binding="{Binding Source={x:Reference userAnswerSwitch}, Path=IsToggled}"
                                                Value="false">
                                                <!--事件触发时,如果IsToggled为false,设置本label的Text为"false"-->
                                                <Setter Property="Text" Value="false" />
                                            </DataTrigger>
                                        </Label.Triggers>
                                    </Label>
                                    <Switch x:Name="userAnswerSwitch" />
                                </StackLayout>
                            </StackLayout>
                        </ViewCell>
                    </DataTemplate>
                </ListView.ItemTemplate>
            </ListView>
            <Button x:Name="BtnSumit" Text="交卷" Clicked="BtnSumit_Clicked"/>
        </StackLayout>
    </ContentPage.Content>
</ContentPage>
using MPhone.ViewModels.Learning;
using System;
using System.Collections.Generic;

using Xamarin.Forms;
using Xamarin.Forms.Xaml;

namespace MPhone.Views.Learning
{
    [XamlCompilation(XamlCompilationOptions.Compile)]
    public partial class ExamPage : ContentPage
    {
        public List<JudgmentQuestionExamListModel> JudgmentQuestions = new List<JudgmentQuestionExamListModel>()
        {
            new JudgmentQuestionExamListModel
            {
                    QuestionId=Guid.NewGuid().ToString(),
                    SerialNo="000001",
                    Content="SMT是指表面贴装技术,DIP是指双列直插封装技术"
            },
            new JudgmentQuestionExamListModel
            {
                    QuestionId=Guid.NewGuid().ToString(),
                    SerialNo="000002",
                    Content="SMT一般贴装的是无引脚或短引线表面组装元器件,而DIP焊接的是直插形式封装的器件。"
            },
            new JudgmentQuestionExamListModel
            {
                    QuestionId=Guid.NewGuid().ToString(),
                    SerialNo="000003",
                    Content="Panel作业与MS单板作业完全相同。"
            },
        };
        public ExamPage()
        {
            InitializeComponent();

            //数据绑定
            JudgmentQuestionListView.ItemsSource = JudgmentQuestions;
        }

        private void BtnSumit_Clicked(object sender, EventArgs e)
        {

        }
    }
}

 

posted @ 2020-08-06 17:31  岭南春  阅读(318)  评论(0)    收藏  举报