Использование FlipPanel

92

Завершив с шаблоном элемента управления и кодом FlipPanel, можно приступить к его использованию в приложениях. Исходя из предположения, что добавлена необходимая ссылка на сборку, следует отобразить префикс XML на пространство имен, которое хранит специальный элемент управления:

xmlns:flip="clr-namespace:WpfCustomControlLibrary1;assembly=WpfCustomControlLibrary1"

После этого можно добавлять экземпляры FlipPanel на страницу. Ниже приведен пример, в котором создается панель FlipPanel, показанная ранее, с использованием контейнера StackPanel для наполнения элементами области содержимого переднего плана и Grid — для заднего:

<flip:FlipPanel x:Name="panel" BorderBrush="DarkOrange"
                            BorderThickness="3" CornerRadius="4" Margin="10">
                <flip:FlipPanel.FrontContent>
                    <StackPanel Margin="6">
                        <StackPanel.Resources>
                            <Style TargetType="Button">
                                <Setter Property="Padding" Value="5"></Setter>
                                <Setter Property="Margin" Value="5,5,5,0"></Setter>
                            </Style>
                        </StackPanel.Resources>
                        <TextBlock TextWrapping="Wrap" FontSize="16" Foreground="DarkOrange">
                            Это передняя сторона элемента FlipPanel
                        </TextBlock>
                        <Button>Первая кнопка</Button>
                        <Button>Вторая кнопка</Button>
                        <Button>Третья кнопка</Button>
                        <Button>Четвертая кнопка</Button>
                    </StackPanel>
                </flip:FlipPanel.FrontContent>
                <flip:FlipPanel.BackContent>
                    <Grid Margin="6">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="auto"></RowDefinition>
                            <RowDefinition></RowDefinition>
                        </Grid.RowDefinitions>
                        <TextBlock TextWrapping="Wrap" FontSize="16" Foreground="DarkOrange">
                            Это обратная сторона элемента управления FlipPanel
                        </TextBlock>
                        <Button Grid.Row="1" Margin="3" Padding="10" Content="Перевернуть назад?"
                                HorizontalAlignment="Center" VerticalAlignment="Center"
                                Click="Button_Click"></Button>
                    </Grid>
                </flip:FlipPanel.BackContent>
</flip:FlipPanel>

Щелчок на кнопке на задней стороне FlipPanel приводит к программному перевороту панели:

private void Button_Click(object sender, RoutedEventArgs e)
{
    panel.IsFlipped = !panel.IsFlipped;
}

Это дает тот же результат, что и щелчок на кнопке ToggleButton со стрелкой, которая определена как часть шаблона по умолчанию.

Использование другого шаблона элемента управления

Правильно спроектированные пользовательские элементы управления исключительно гибкие. В случае FlipPanel можно просто применить новый шаблон для изменения внешнего вида и расположения ToggleButton, а также анимационных эффектов, используемых при переключении между передней и задней областями содержимого.

Ниже показан такой пример. Здесь кнопка помещена в специальную линейку, находящуюся внизу фронтальной стороны и в верхней части обратной стороны. Когда панель переворачивается, она делает это не так, как лист бумаги. Вместо этого содержимое передней панели просто исчезает, сдвигаясь вверх, при этом снизу одновременно "выезжает" содержимое обратной стороны. Когда происходит противоположное преобразование, содержимое обратной стороны уезжает вниз, а содержимое передней части — опускается сверху. Можно создать еще более привлекательный эффект, одновременно размывая содержимое уходящей части с помощью класса BlurEffect.

<Border BorderBrush="{TemplateBinding BorderBrush}"
               BorderThickness="{TemplateBinding BorderThickness}"
               CornerRadius="{TemplateBinding CornerRadius}"
                            Background="{TemplateBinding Background}">
                    <Border.RenderTransform>
                        <ScaleTransform x:Name="FrontContentTransform"></ScaleTransform>
                    </Border.RenderTransform>
                    <Border.Effect>
                        <BlurEffect x:Name="FrontContentEffect" Radius="0"></BlurEffect>
                    </Border.Effect>

                    <Grid>
                        <Grid.RowDefinitions>
                            <RowDefinition></RowDefinition>
                            <RowDefinition Height="Auto"></RowDefinition>
                        </Grid.RowDefinitions>
                        <ContentPresenter
                     Content="{TemplateBinding FrontContent}">
                        </ContentPresenter>

                        <Rectangle Grid.Row="1" Stretch="Fill" Fill="LightSteelBlue"></Rectangle>
                        <ToggleButton Grid.Row="1" x:Name="FlipButton" Margin="5" Padding="15,0" 
                             Content="˄" FontWeight="Bold" FontSize="12" HorizontalAlignment="Right">
                        </ToggleButton>
                    </Grid>

</Border>

Область содержимого обратной стороны почти такая же. Она включает элемент Border, в котором имеется ContentPresenter с собственной кнопкой ToggleButton, расположенной в правой части текстурированного прямоугольника. Также определены необходимая трансформация ScaleTransform и эффект BlurEffect, которые используются анимацией для смены панелей.

<Border BorderBrush="{TemplateBinding BorderBrush}"
           BorderThickness="{TemplateBinding BorderThickness}"
           CornerRadius="{TemplateBinding CornerRadius}"
           Background="{TemplateBinding Background}" RenderTransformOrigin="0,1">
                    <Border.RenderTransform>
                        <ScaleTransform x:Name="BackContentTransform" ScaleY="0"></ScaleTransform>
                    </Border.RenderTransform>
                    <Border.Effect>
                        <BlurEffect x:Name="BackContentEffect" Radius="30"></BlurEffect>
                    </Border.Effect>

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

                        <Rectangle Stretch="Fill" Fill="LightSteelBlue"></Rectangle>
                        <ToggleButton x:Name="FlipButtonAlternate" Margin="5" Padding="15,0" 
                             Content="˅" FontWeight="Bold" FontSize="12" HorizontalAlignment="Right">
                        </ToggleButton>

                        <ContentPresenter Grid.Row="1"
                     Content="{TemplateBinding BackContent}">
                        </ContentPresenter>

                    </Grid>

                </Border>

Поскольку анимация, которая изменяет фронтальную область содержимого, выполняется одновременно с анимацией, изменяющей обратную область содержимого, специальный переход для управления ими не понадобится.

Пройди тесты
Лучший чат для C# программистов