WPF 中的 iOS UIPickerView 类控件

• 下载演示项目 - 12.8 KB
• 下载源代码 - 24.9 KB

引言

在本文中，我将介绍我使用 WPF 创建的类似 UIPickerView 的控件。UIPickerView 是一个 iOS 控件，用于通过滚轮从列表中选择项目。 通常，此控件与触摸输入相关联，但我发现它也可以很好地与鼠标配合使用。 我可以设想它在桌面应用程序中可能很有用，尤其是在系统中包含支持触摸的监视器的情况下。

背景

几个月前，在撰写一篇关于用户界面设计的文章时，我试图考虑构建日期/时间控件的不同方法。 我想到的一个想法是为不同的日期/时间部分使用滚轮，就像 UIPickerView 控件中一样。 在探索过程中，我创建了一个 WPF 原型实现。 我决定清理该原型并与 CodeProject 社区分享。

Using the Code

使用该控件非常简单。 只需在您的 XAML 文件中包含 WpfUIPickerLib 命名空间，并创建一个 WpfUIPickerControl 元素。 您只需要注意两个自定义依赖属性

• AlwaysOpen：如果设置为 True，则 WpfUIPickerControl 将始终处于打开状态，并且滚轮将可见。 如果设置为 False（默认值），则控件将看起来像一个文本框，仅显示选定的值。 单击控件将打开它，然后滚轮将变为可见，从而使用户能够选择一个新值。 单击控件外部的任何位置将关闭它（如果 AlwaysOpen 为 False）。
• Tumblers：此依赖项属性是一个 WpfUIPickerLib.TumblerData 对象的列表，该对象表示要显示的不同的滚轮。 每个 TumblerData 实例代表控件中的不同滚轮。

以下 XAML 演示了如何包含 WpfUIPickerLib 命名空间以及如何声明 WpfUIPickerControl 对象

<Window x:Class="WpfUIPicker.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:wpfui="clr-namespace:WpfUIPickerLib;assembly=WpfUIPickerLib"
        Title="MainWindow" Height="300" Width="325"
        x:Name="thisWnd">
    <StackPanel>
        <TextBlock Text="WpfUIPickerControl with AlwaysOpen set to True" 
               HorizontalAlignment="Center" />
        <wpfui:WpfUIPickerControl HorizontalAlignment="Center" AlwaysOpen="True" 
           Tumblers="{Binding ApparelTumblers, ElementName=thisWnd}" />
        <TextBlock Text="WpfUIPickerControl with AlwaysOpen set to False" 
           HorizontalAlignment="Center" Margin="0,20,0,0"/>
        <wpfui:WpfUIPickerControl HorizontalAlignment="Center" 
           AlwaysOpen="False" Tumblers="{Binding DateTimeTumblers, ElementName=thisWnd}" />
    </StackPanel>
</Window>

TumblerData 对象是您要在单个滚轮中显示的值的列表的简单包装（将在每个值上调用 ToString）。 控件需要它来触发更新，获取/设置所选值以及显示“分隔符”（可选）。 因为我最初创建此控件用于日期/时间，所以我希望控件的“关闭”版本能够在滚轮值之间显示字符串标记。 例如，如果我为日期（月、日、年）创建了三个滚轮，并且用户为月份选择了 9，为日期选择了 5，为年份选择了 2005，那么我希望控件的关闭版本显示“09/05/2005”。 为了支持此用法，您可以简单地将字符串“/”设置为月和日滚轮的 TumblerData 对象中的分隔符。 如果控件设置为 AlwaysOpen=true，则 TumblerData.Seperator 属性将被忽略。

以下代码演示了如何为日期/时间实现创建 TumblerData 对象，该实现支持从 1990 年 1 月 1 日到 2011 年 12 月 31 日的日期

public List<TumblerData> DateTimeTumblers
{
    get
    {
        List<TumblerData> retVal = new List<TumblerData>();
        List<int> years = new List<int>();
        for (int i = 1990; i < 2012; ++i)
            years.Add(i);

        List<string> months = new List<string>();
        for (int i = 1; i <= 12; ++i)
            months.Add(String.Format("{0:d2}", i));

        List<string> days = new List<string>();
        for (int i = 1; i <= 31; ++i)
            days.Add(String.Format("{0:d2}", i));

        List<string> hours = new List<string>();
        for (int i = 1; i <= 12; ++i)
            hours.Add(String.Format("{0:d2}", i));

        List<string> min = new List<string>();
        for (int i = 0; i < 60; ++i)
            min.Add(String.Format("{0:d2}", i));

        retVal.Add(new TumblerData(months, 8, "/"));
        retVal.Add(new TumblerData(days, 4, "/"));
        retVal.Add(new TumblerData(years, 12, ""));
        retVal.Add(new TumblerData(hours, 10, ":"));
        retVal.Add(new TumblerData(min, 0, ""));
        retVal.Add(new TumblerData(
               new string[] { "AM", "PM" }.ToList<object>(), 0, ""));
        return retVal;
    }
}

关注点

WpfUIPickerControl 支持三种不同的方式来更改滚轮的值：拖动、鼠标滚轮以及只需单击所需的值。 该控件通过隐藏未选定的值来实现“关闭”（因此 valueTemplate 中的 funky binding）。 每个滚轮都呈现为画布上网格内的 StackPanel。 拖动是通过更改网格上的 Canvas.Top 属性来实现的。

历史

史蒂夫·乔布斯于 2007 年 1 月 9 日发布了第一款 iPhone。