Элемент управления FlipView в WinRT

180

WinRT --- Элемент управления FlipView

FlipView - один из моих любимых элементов управления, появившихся в Windows Runtime - как и ListBox, является производным от ItemsControl, через Selector FlipView отображает результаты по одному варианту, и текущий вариант является выделенным, поэтому в большинстве приложений он не заменит ListBox. Но он имеет удобный интерфейс управления с сенсорного экрана и пригодится вам в некоторых специальных ситуациях.

Как и многие проекты ранее, проект FlipViewColors использует базовые классы, описанные в предыдущих статьях. Секция Resources файла MainPage.xaml содержит обычную ссылку на класс NamedColor, но в ней также определяются шаблоны DataTemplate и ItemsPanelTemplate, которые затем упоминаются в определении Style, также включающем привязку ItemsSource. У элементов Border и TextBlock определения SolidColorBrush привязываются к двум элементам управления FlipView:

<Page ...>

    <Grid Background="#FF1D1D1D">
        <Grid.Resources>
            <local:NamedColor x:Key="namedcolors" />
            <local:ColorToContrastColorConverter x:Key="colorsConverter" />

            <DataTemplate x:Key="colorsTemplate">
                <Border BorderBrush="{Binding Path=Foreground,
                                RelativeSource={RelativeSource TemplatedParent}}"
                    Width="300" Height="80"
                    BorderThickness="4" Margin="4">
                    <Border.Background>
                        <SolidColorBrush Color="{Binding Color}" />
                    </Border.Background>

                    <TextBlock Text="{Binding Name}"
                               VerticalAlignment="Center"
                               HorizontalAlignment="Center"
                               FontSize="32">
                        <TextBlock.Foreground>
                            <SolidColorBrush Color="{Binding Color,
                                         Converter={StaticResource colorsConverter}}" />
                        </TextBlock.Foreground>
                    </TextBlock>
                </Border>
            </DataTemplate>

            <ItemsPanelTemplate x:Key="panelTemplate">
                <VirtualizingStackPanel />
            </ItemsPanelTemplate>

            <Style TargetType="FlipView">
                <Setter Property="Width" Value="312" />
                <Setter Property="Height" Value="100" />
                <Setter Property="SelectedValuePath" Value="Color" />
                <Setter Property="ItemsSource" Value="{Binding Source={StaticResource namedcolors}, 
                                                           Path=All}" />
                <Setter Property="ItemTemplate" Value="{StaticResource colorsTemplate}" />
                <Setter Property="ItemsPanel" Value="{StaticResource panelTemplate}" />
            </Style>
        </Grid.Resources>

        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition />
        </Grid.RowDefinitions>

        <Grid.ColumnDefinitions>
            <ColumnDefinition />
            <ColumnDefinition />
        </Grid.ColumnDefinitions>

        <Border Grid.ColumnSpan="2"
                BorderThickness="14" CornerRadius="54"
                Margin="54" Padding="54"
                HorizontalAlignment="Center">
            <Border.Background>
                <SolidColorBrush Color="{Binding ElementName=flip1, 
                                                 Path=SelectedValue}" />
            </Border.Background>

            <Border.BorderBrush>
                <SolidColorBrush Color="{Binding ElementName=flip2,
                                                 Path=SelectedValue}" />
            </Border.BorderBrush>

            <TextBlock FontFamily="Times New Roman"
                       FontSize="80">
                Элемент управления <Italic>FlipView</Italic>
                <TextBlock.Foreground>
                    <SolidColorBrush Color="{Binding ElementName=flip2,
                                                     Path=SelectedValue}" />
                </TextBlock.Foreground>
            </TextBlock>
        </Border>

        <FlipView Name="flip1" Grid.Row="1" />
        <FlipView Name="flip2" Grid.Row="1" Grid.Column="1" />
    </Grid>
</Page>

По умолчанию в качестве ItemsPanelTemplate для элемента управления FlipView используется панель VirtualizingStackPanel (как для ListBox, но с горизонтальной ориентацией). Я заменил ее вертикальной панелью VirtualizingStackPanel. Элементы управления FlipView, как и ListBox, обычно захватывают все доступное пространство, поэтому желательно задать явные значения свойств Height и Width. В этом приложении первый цвет управляет фоном элемента Border, а второй управляет цветом самой рамки и текста.

Позже будет продемонстрировано использование элемента управления FlipView в качестве простейшей программы чтения электронных книг. Эта идея пришла мне в голову, потому что стандартное диалоговое окно печати использует FlipView для предварительного просмотра страниц. Также будет представлен пример использования FlipView в элементе управления для выбора даты.