星期三, 8月 02, 2017

[X.Form] IValueConverter - Switch 轉換

電子書 Creating Mobile Apps with Xamarin.Forms Book First Edition BindingConverter 章節範例,把 Code 複製下來跑跑看,順道筆記一下

建立 BoolToStringConverter 和 BoolToColorConverter
// 要使用 IValueConverter 要引用該 namespace
using Xamarin.Forms;

namespace DataBindingPractice
{
    public class BoolToStringConverter : IValueConverter
    {
        public string TrueText { set; get; }

        public string FalseText { set; get; }

        public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
        {
            return (bool)value ? TrueText : FalseText;
        }

        public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
        {
            return false;
        }
    }

    public class BoolToColorConverter : IValueConverter
    {
        public Color TrueColor { set; get; }

        public Color FalseColor { set; get; }

        public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
        {
            return (bool)value ? TrueColor : FalseColor;
        }

        public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
        {
            return false;
        }
    }
}
Xaml

重點:Switch1 和 Switch2 把 Converter 寫在 ResourceDictionary 內來達到共用目的,Switch3 則是單獨使用,不需要共用
<?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:local="clr-namespace:DataBindingPractice"
             x:Class="DataBindingPractice.XF8_IValueConvert2">

    <ContentPage.Resources>
        <ResourceDictionary>
            <local:BoolToStringConverter 
                x:Key="boolToString" 
                TrueText="Let's od it"
                FalseText="Not Not">
            </local:BoolToStringConverter>
            <Style TargetType="Label">
                <Setter Property="FontSize" Value="Large" />
                <Setter Property="VerticalOptions" Value="Center" />
            </Style>
        </ResourceDictionary>
    </ContentPage.Resources>

    <ContentPage.Content>
        <StackLayout>
            <!-- First Switch with text. -->
            <StackLayout Orientation="Horizontal" VerticalOptions="CenterAndExpand" HorizontalOptions="Center">
                <Label Text="Learn more?"/>
                <Switch x:Name="switch1" VerticalOptions="Center" />
                <Label 
                    Text="{Binding Source={x:Reference switch1}, 
                    Path=IsToggled, 
                    Converter={StaticResource boolToString}}" 
                    HorizontalOptions="FillAndExpand" />
            </StackLayout>

            <!-- Second Switch with text. -->
            <StackLayout Orientation="Horizontal" VerticalOptions="CenterAndExpand" HorizontalOptions="Center">
                <Label Text="Subscribe?" />
                <Switch x:Name="switch2" VerticalOptions="Center" />
                <Label 
                    Text="{Binding Source={x:Reference switch2}, 
                    Path=IsToggled, 
                    Converter={StaticResource boolToString}}" 
                    HorizontalOptions="FillAndExpand" />
            </StackLayout>

            <!-- Third Switch with text and color. -->
            <StackLayout Orientation="Horizontal" VerticalOptions="CenterAndExpand" HorizontalOptions="Center">
                <Label Text="Leave page?" />
                <Switch x:Name="switch3" VerticalOptions="Center" />
                <Label HorizontalOptions="FillAndExpand">
                    <Label.Text>
                        <Binding Source="{x:Reference switch3}" Path="IsToggled">
                            <Binding.Converter>
                                <local:BoolToStringConverter TrueText="Yes" FalseText="No" />
                            </Binding.Converter>
                        </Binding>
                    </Label.Text>
                    <Label.TextColor>
                        <Binding Source="{x:Reference switch3}" Path="IsToggled">
                            <Binding.Converter>
                                <local:BoolToColorConverter TrueColor="Green" FalseColor="Red" />
                            </Binding.Converter>
                        </Binding>
                    </Label.TextColor>
                </Label>
            </StackLayout>
        </StackLayout>
    </ContentPage.Content>
</ContentPage>

執行結果1

[X.Form] IValueConverter - Switch 轉換-2

執行結果2

[X.Form] IValueConverter - Switch 轉換-1

沒有留言:

張貼留言