第十五章：交互式界面（四）

滑块颜色选择
这是一个名为RgbSliders的程序，它包含三个Slider元素，用于选择Color的红色，绿色和蓝色组件。 Slider的隐式样式将Maximum值设置为255：

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="RgbSliders.RgbSlidersPage">
    <ContentPage.Padding>
        <OnPlatform x:TypeArguments="Thickness"
                    iOS="10, 20, 10, 10"
                    Android="10, 0, 10, 10"
                    WinPhone="10, 0, 10, 10" />
    </ContentPage.Padding>
    <StackLayout>
        <StackLayout.Resources>
            <ResourceDictionary>
                <Style TargetType="Slider">
                    <Setter Property="Maximum" Value="255" />
                </Style>
                <Style TargetType="Label">
                    <Setter Property="FontSize" Value="Large" />
                    <Setter Property="HorizontalTextAlignment" Value="Center" />
                </Style>
            </ResourceDictionary>
        </StackLayout.Resources>
        <Slider x:Name="redSlider"
                ValueChanged="OnSliderValueChanged" />
        <Label x:Name="redLabel" />
        <Slider x:Name="greenSlider"
                ValueChanged="OnSliderValueChanged" />
        <Label x:Name="greenLabel" />
        <Slider x:Name="blueSlider"
                ValueChanged="OnSliderValueChanged" />
        <Label x:Name="blueLabel" />
        <BoxView x:Name="boxView"
                 VerticalOptions="FillAndExpand" />
    </StackLayout>
</ContentPage>

Slider元素与三个Label元素交替显示它们的值，StackLay？out以BoxView结束以显示结果颜色。
代码隐藏文件的构造函数将Slider设置初始化为128以获得中灰色。 共享的ValueChanged处理程序检查哪个Slider已更改，因此需要更新哪个Label，然后为BoxView计算新颜色：

public partial class RgbSlidersPage : ContentPage
{
    public RgbSlidersPage()
    {
        InitializeComponent();
        redSlider.Value = 128;
        greenSlider.Value = 128;
        blueSlider.Value = 128;
    }
    void OnSliderValueChanged(object sender, ValueChangedEventArgs args)
    {
        if (sender == redSlider)
        {
            redLabel.Text = String.Format("Red = {0:X2}", (int)redSlider.Value);
        }
        else if (sender == greenSlider)
        {
            greenLabel.Text = String.Format("Green = {0:X2}", (int)greenSlider.Value);
        }
        else if (sender == blueSlider)
        {
            blueLabel.Text = String.Format("Blue = {0:X2}", (int)blueSlider.Value);
        }
        boxView.Color = Color.FromRgb((int)redSlider.Value,
                                      (int)greenSlider.Value,
                                      (int)blueSlider.Value);
    }
}

严格来说，这里的if和else语句不是必需的。 无论哪个滑块发生变化，代码都可以简单地设置所有三个标签。 事件处理程序无论如何都会访问所有三个滑块以设置新颜色：

您可以将手机侧向转动，但BoxView会变得更短，特别是在Windows 10移动设备上，其中Slider的垂直高度超出了要求。 在第18章介绍Grid之后，您将看到应用程序如何更轻松地响应方向更改。
以下TextFade程序使用单个Slider来控制AbsoluteLayout中两个Label元素的不透明度和水平位置。 在初始布局中，两个Label元素都位于AbsoluteLayout的左中心，但第二个将其Opacity设置为0：

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="TextFade.TextFadePage"
             Padding="10, 0, 10, 20">
    <StackLayout>
        <AbsoluteLayout VerticalOptions="CenterAndExpand">
            <Label x:Name="label1"
                   Text="TEXT"
                   FontSize="Large"
                   AbsoluteLayout.LayoutBounds="0, 0.5"
                   AbsoluteLayout.LayoutFlags="PositionProportional"                  />
 
             <Label x:Name="label2"
                   Text="FADE"
                   FontSize="Large"
                   Opacity="0"
                   AbsoluteLayout.LayoutBounds="0, 0.5"
                   AbsoluteLayout.LayoutFlags="PositionProportional" />
 </AbsoluteLayout>
        <Slider ValueChanged="OnSliderValueChanged" />
 
    </StackLayout>
</ContentPage>

Slider事件处理程序在屏幕上从左向右移动两个Label元素。 比例定位在这里有很大帮助，因为Slider值的范围从0到1，这导致Label元素从屏幕的最左侧到最右侧逐步定位：

public partial class TextFadePage : ContentPage
{
    public TextFadePage()
    {
        InitializeComponent();
    }
    void OnSliderValueChanged(object sender, ValueChangedEventArgs args)
    {
        AbsoluteLayout.SetLayoutBounds(label1,
            new Rectangle(args.NewValue, 0.5, AbsoluteLayout.AutoSize,
                                              AbsoluteLayout.AutoSize));
        AbsoluteLayout.SetLayoutBounds(label2,
            new Rectangle(args.NewValue, 0.5, AbsoluteLayout.AutoSize,
                                              AbsoluteLayout.AutoSize));
        label1.Opacity = 1 - args.NewValue;
        label2.Opacity = args.NewValue;
    }
}

同时，设置不透明度值，以便当两个标签在屏幕上移动时，一个Label似乎淡入另一个Label：