Автор: Диптимайя Патра (Diptimaya Patra)

Создание записок в приложении WPF. Часть I. В этой статье будет показано, как можно создать лучший проект и конечно сделать так, чтобы он работал как реальный гаджет по созданию записок, как в Vista или в Windows 7.

Введение

Если вы читали мою предыдущую статью Vista like Sticky Notes (Vista в виде заметок), то вам должно казаться, что там чего-то недостает. Да, вы правы, недостает многих вещей. Это был прототип новой версии. В этой статье будет показано, как можно создать лучший проект и конечно сделать, чтобы он работал аналогично реальному гаджету записок, как в Vista. Основное различие в том, что я могу сказать, что использую приложение WPF вместо Silverlight, поэтому мы можем использовать его в качестве EXE-файла.

Создание приложения

Проектирование приложения

В этой части мы собираемся выяснить многие моменты. В первую очередь мы будем использовать Blend 3, чтобы наскоро сделать наше приложение. Я буду углубляться в детали, чтобы вы тоже могли сделать свой гаджет. J
Откройте решение в Blend 3 и откройте файл Window1.xaml. Нам следует хорошо его спроектировать, чтобы он в основном соответствовал исходному гаджету.

1)  Добавьте элемент управления "Рамка" и измените цвет. Я использовал светло-желтый цвет.

2)  Немного поверните рамку.

3)  Теперь добавьте другую рамку и немного сожмите ее по высоте и ширине, чтобы она выглядела, как показано ниже. Назовите эту рамку NotesArea.

4)  Теперь мы добавим сетку в NotesArea, и в этой сетке определим, где разместить нужный элемент управления.

Теперь я внесу небольшое изменение в исходный стиль StickyNote. Вверху я добавил дополнительную строку, в которой будет содержаться название заметки.

5)  Добавим два текстовых поля и сетку в нижнюю строку, чтобы можно было поместить там операционные элементы управления.

6)  Теперь я разделю только что добавленную внизу новую сетку, чтобы разместить определенные операционные элементы управления.

Как можно видеть, я разделил сетку на пять разных частей. В соответствующие столбцы будут размещены кнопки "DeleteButton" (кнопка удаления), "PreviousButton" (кнопка перехода назад), "PageText" (кнопка текста страницы), "NextButton" (кнопка перехода далее), и наконец "AddNoteButton" (кнопка добавления заметки).

Окно объектов будет выглядеть подобно приведенному ниже.

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

Настраиваемые кнопки

Здесь будет показано, как создать настраиваемую кнопку и изменить анимацию.

1)  Мы начнем с создания кнопки перехода далее (NextButton). Нарисуйте эллипс как круг.

2)  С помощью инструмента "перо" нарисуйте треугольник, который будет выглядеть подобно показанному ниже.

3)  Выделите оба рисунка и сгруппируйте их в одну сетку.

4)  Теперь щелкните правой кнопкой мыши сетку и элемент управления выбора Select Make в отображаемом меню, а затем удалите Content Presenter (место, в котором элемент управления размещает содержимое).

5)  Измените триггер MouseOver, чтобы видеть, как изменяется элемент управления.

При изменении триггера окно триггера будет выглядеть следующим образом.

Теперь кнопка перехода далее (NextButton) готова к работе, и я аналогичным образом создал следующие кнопки.

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

Я добавил другую рамку и добавил другое изображение, которое должно выглядеть аналогично кнопке закрытия приложения. Следующий рисунок все объясняет.

В справочных целях я предоставляю код XAML для всего проекта.

<Window
    xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d=https://schemas.microsoft.com/expression/blend/2008 xmlns:mc="https://schemas.openxmlformats.org/markup-compatibility/2006" x:Class="StickyNotes2VistaLook.Window1"
    Title="Window1" Height="263" Width="275" WindowStyle="None" WindowState="Normal" AllowsTransparency="True"  Background="{x:Null}" Foreground="{x:Null}" Opacity="1" mc:Ignorable="d">
<Window.Resources>
<Storyboard x:Key="CloseButtonZoom">
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="btnClose" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)">
<SplineDoubleKeyFrame KeyTime="00:00:00" Value="1"/>
<SplineDoubleKeyFrame KeyTime="00:00:00.1000000" Value="1.148"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="btnClose" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)">
<SplineDoubleKeyFrame KeyTime="00:00:00" Value="1"/>
<SplineDoubleKeyFrame KeyTime="00:00:00.1000000" Value="1.148"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="btnClose" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)">
<SplineDoubleKeyFrame KeyTime="00:00:00" Value="0"/>
<SplineDoubleKeyFrame KeyTime="00:00:00.1000000" Value="1.333"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="btnClose" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)">
<SplineDoubleKeyFrame KeyTime="00:00:00" Value="0"/>
<SplineDoubleKeyFrame KeyTime="00:00:00.1000000" Value="1.624"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
    
<Storyboard x:Key="CloseButtonZoomOut">
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="btnClose" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)">
<SplineDoubleKeyFrame KeyTime="00:00:00" Value="1.152"/>
<SplineDoubleKeyFrame KeyTime="00:00:00.1000000" Value="1"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="btnClose" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)">
<SplineDoubleKeyFrame KeyTime="00:00:00" Value="1.152"/>
<SplineDoubleKeyFrame KeyTime="00:00:00.1000000" Value="1"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="btnClose" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)">
<SplineDoubleKeyFrame KeyTime="00:00:00" Value="1.368"/>
<SplineDoubleKeyFrame KeyTime="00:00:00.1000000" Value="0"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="btnClose" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)">
<SplineDoubleKeyFrame KeyTime="00:00:00" Value="1.667"/>
<SplineDoubleKeyFrame KeyTime="00:00:00.1000000" Value="0"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
    
<Style x:Key="DeleteButtonStyle" TargetType="{x:Type Button}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type Button}">
                <ControlTemplate.Triggers>
                    <Trigger Property="IsFocused" Value="True"/>
                    <Trigger Property="IsDefaulted" Value="True"/>
                    <Trigger Property="IsMouseOver" Value="True"/>
                    <Trigger Property="IsPressed" Value="True"/>
                    <Trigger Property="IsEnabled" Value="False"/>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>
<Style x:Key="MyButtonNP" TargetType="{x:Type Button}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type Button}">
                <Grid>
                    <Ellipse Fill="#FFB8B7B3" Stroke="#FF8F8E85"/>
                    <Path x:Name="path" Fill="#FF8F8E85" Stretch="Fill" Stroke="{x:Null}" Margin="7.75,5.628,4.333,5.33" Data="M-217,21.375 L-217,27.625 -210.875,24.375 z"/>
                </Grid>
            <ControlTemplate.Triggers>
            <Trigger Property="IsFocused" Value="True"/>
            <Trigger Property="IsDefaulted" Value="True"/>
            <Trigger Property="IsMouseOver" Value="True">
            <Setter Property="Fill" TargetName="path" Value="#FF0B0B0C"/>
            </Trigger>
            <Trigger Property="IsPressed" Value="True"/>
            <Trigger Property="IsEnabled" Value="False"/>
            </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>
    <Style x:Key="AddNoteButton" TargetType="{x:Type Button}">
        <Setter Property="Template">
        <Setter.Value>
        <ControlTemplate TargetType="{x:Type Button}">
        <Grid>
            <Ellipse Fill="#FFB8B7B3" Stroke="#FF8F8E85"/>
        <Rectangle x:Name="rectangle" Fill="#FF8F8E85" Stroke="{x:Null}" Margin="4,9.25,3.75,8.812"/>
        <Rectangle x:Name="rectangle1" Fill="#FF8F8E85" Stroke="{x:Null}" Margin="4,9.25,3.75,8.812" RenderTransformOrigin="0.5,0.5">
        <Rectangle.RenderTransform>
        <TransformGroup>
            <ScaleTransform ScaleX="1" ScaleY="1"/>
            <SkewTransform AngleX="0" AngleY="0"/>
            <RotateTransform Angle="90"/>
            <TranslateTransform X="0" Y="0"/>
        </TransformGroup>
        </Rectangle.RenderTransform>
        </Rectangle>
        </Grid>
        <ControlTemplate.Triggers>
            <Trigger Property="IsFocused" Value="True"/>
            <Trigger Property="IsDefaulted" Value="True"/>
            <Trigger Property="IsMouseOver" Value="True">
            <Setter Property="Fill" TargetName="rectangle" Value="#FF187E16"/>
            <Setter Property="Fill" TargetName="rectangle1" Value="#FF187E16"/>
            </Trigger>
            <Trigger Property="IsPressed" Value="True"/>
            <Trigger Property="IsEnabled" Value="False"/>
        </ControlTemplate.Triggers>
        </ControlTemplate>
        </Setter.Value>
        </Setter>
        </Style>
        <Style x:Key="DeleteNoteButton" TargetType="{x:Type Button}">
            <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type Button}">
                <Grid>
                <Ellipse Fill="#FFB8B7B3" Stroke="#FF8F8E85" Height="20"/>
                <Rectangle x:Name="rectangle" Fill="#FF8F8E85" Stroke="{x:Null}" Margin="4.917,9.25,4.833,9" RenderTransformOrigin="0.5,0.5">
                <Rectangle.RenderTransform>
                <TransformGroup>
                <ScaleTransform ScaleX="1" ScaleY="1"/>
                <SkewTransform AngleX="0" AngleY="0"/>
                <RotateTransform Angle="45"/>
                <TranslateTransform X="0" Y="0"/>
                </TransformGroup>
                </Rectangle.RenderTransform>
                </Rectangle>
                <Rectangle x:Name="rectangle1" Fill="#FF8F8E85" Stroke="{x:Null}" Margin="4.917,9.25,4.833,9" RenderTransformOrigin="0.5,0.5">
                <Rectangle.RenderTransform>
                <TransformGroup>
                <ScaleTransform ScaleX="1" ScaleY="1"/>
                <SkewTransform AngleX="0" AngleY="0"/>
                <RotateTransform Angle="135"/>
                <TranslateTransform X="0" Y="0"/>
                </TransformGroup>
                </Rectangle.RenderTransform>
                </Rectangle>
                </Grid>
                <ControlTemplate.Triggers>
                <Trigger Property="IsFocused" Value="True"/>
                <Trigger Property="IsDefaulted" Value="True"/>
                <Trigger Property="IsMouseOver" Value="True">
                <Setter Property="Fill" TargetName="rectangle" Value="#FFFF0000"/>
                <Setter Property="Fill" TargetName="rectangle1" Value="#FFFF0000"/>
                </Trigger>
                <Trigger Property="IsPressed" Value="True"/>
                <Trigger Property="IsEnabled" Value="False"/>
                </ControlTemplate.Triggers>
                </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
<Storyboard x:Key="FadeOutOperate" x:Name="FadeOutOperate1">
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="NextButton" Storyboard.TargetProperty="(UIElement.Opacity)">
    <SplineDoubleKeyFrame KeyTime="00:00:00" Value="1"/>
    <SplineDoubleKeyFrame KeyTime="00:00:00.1000000" Value="0"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="PreviousButton" Storyboard.TargetProperty="(UIElement.Opacity)">
    <SplineDoubleKeyFrame KeyTime="00:00:00" Value="1"/>
    <SplineDoubleKeyFrame KeyTime="00:00:00.1000000" Value="0"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="PageText" Storyboard.TargetProperty="(UIElement.Opacity)">
    <SplineDoubleKeyFrame KeyTime="00:00:00" Value="1"/>
    <SplineDoubleKeyFrame KeyTime="00:00:00.1000000" Value="0"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="AddNote" Storyboard.TargetProperty="(UIElement.Opacity)">
    <SplineDoubleKeyFrame KeyTime="00:00:00" Value="1"/>
    <SplineDoubleKeyFrame KeyTime="00:00:00.1000000" Value="0"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="DeleteButton" Storyboard.TargetProperty="(UIElement.Opacity)">
    <SplineDoubleKeyFrame KeyTime="00:00:00" Value="1"/>
    <SplineDoubleKeyFrame KeyTime="00:00:00.1000000" Value="0"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Key="FadeInOperate">
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="NextButton" Storyboard.TargetProperty="(UIElement.Opacity)">
    <SplineDoubleKeyFrame KeyTime="00:00:00" Value="0"/>
    <SplineDoubleKeyFrame KeyTime="00:00:00.1000000" Value="1"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="PreviousButton" Storyboard.TargetProperty="(UIElement.Opacity)">
    <SplineDoubleKeyFrame KeyTime="00:00:00" Value="0"/>
    <SplineDoubleKeyFrame KeyTime="00:00:00.1000000" Value="1"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="PageText" Storyboard.TargetProperty="(UIElement.Opacity)">
    <SplineDoubleKeyFrame KeyTime="00:00:00" Value="0"/>
    <SplineDoubleKeyFrame KeyTime="00:00:00.1000000" Value="1"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="AddNote" Storyboard.TargetProperty="(UIElement.Opacity)">
    <SplineDoubleKeyFrame KeyTime="00:00:00" Value="0"/>
    <SplineDoubleKeyFrame KeyTime="00:00:00.1000000" Value="1"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="DeleteButton" Storyboard.TargetProperty="(UIElement.Opacity)">
    <SplineDoubleKeyFrame KeyTime="00:00:00" Value="0"/>
    <SplineDoubleKeyFrame KeyTime="00:00:00.1000000" Value="1"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Key="FadeInControl">
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="ControlBorder" Storyboard.TargetProperty="(UIElement.Opacity)">
    <SplineDoubleKeyFrame KeyTime="00:00:00" Value="0"/>
    <SplineDoubleKeyFrame KeyTime="00:00:00.1000000" Value="1"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Key="FadeOutControl">
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="ControlBorder" Storyboard.TargetProperty="(UIElement.Opacity)">
    <SplineDoubleKeyFrame KeyTime="00:00:00" Value="1"/>
    <SplineDoubleKeyFrame KeyTime="00:00:00.1000000" Value="0"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</Window.Resources>
<Window.Triggers>
<EventTrigger RoutedEvent="FrameworkElement.Loaded">
<BeginStoryboard x:Name="FadeOutOperate_BeginStoryboard2" Storyboard="{StaticResource FadeOutOperate}"/>
<BeginStoryboard x:Name="CloseButtonZoomOut_BeginStoryboard" Storyboard="{StaticResource CloseButtonZoomOut}"/>
<BeginStoryboard x:Name="FadeOutOperate_BeginStoryboard" Storyboard="{StaticResource FadeOutOperate}"/>
<BeginStoryboard x:Name="FadeInOperate_BeginStoryboard" Storyboard="{StaticResource FadeInOperate}"/>
<BeginStoryboard x:Name="FadeInControl_BeginStoryboard" Storyboard="{StaticResource FadeInControl}"/>
<BeginStoryboard x:Name="FadeOutControl_BeginStoryboard" Storyboard="{StaticResource FadeOutControl}"/>
</EventTrigger>
<EventTrigger RoutedEvent="Mouse.MouseEnter">
<BeginStoryboard x:Name="FadeInOperate_BeginStoryboard1" Storyboard="{StaticResource FadeInOperate}"/>
<BeginStoryboard x:Name="FadeInControl_BeginStoryboard1" Storyboard="{StaticResource FadeInControl}"/>
</EventTrigger>
<EventTrigger RoutedEvent="Mouse.MouseLeave">
<BeginStoryboard x:Name="FadeOutOperate_BeginStoryboard1" Storyboard="{StaticResource FadeOutOperate}"/>
<BeginStoryboard x:Name="FadeOutControl_BeginStoryboard1" Storyboard="{StaticResource FadeOutControl}"/>
</EventTrigger>
<EventTrigger RoutedEvent="Mouse.MouseEnter" SourceName="btnClose">
<BeginStoryboard Storyboard="{StaticResource CloseButtonZoom}"/>
</EventTrigger>
<EventTrigger RoutedEvent="Mouse.MouseLeave" SourceName="btnClose">
<BeginStoryboard x:Name="CloseButtonZoomOut_BeginStoryboard1" Storyboard="{StaticResource CloseButtonZoomOut}"/>
</EventTrigger>
</Window.Triggers>
<Grid Visibility="Visible">
<Border x:Name="ControlBorder" CornerRadius="10" HorizontalAlignment="Right" VerticalAlignment="Top" Width="20" Height="50" BorderBrush="#FF000000" BorderThickness="1,1,1,1" d:IsLocked="True">
<Border.Background>
        <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                    <GradientStop Color="#FFC5C5C5" Offset="1"/>
                    <GradientStop Color="#FFECF792" Offset="0"/>
                </LinearGradientBrush>
            </Border.Background>
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto" MinHeight="14.333"/>
                    <RowDefinition Height="Auto" MinHeight="19.2852142857143"/>
                    <RowDefinition Height="Auto" MinHeight="19.2862142857143"/>
                </Grid.RowDefinitions>
                <Image x:Name="btnClose" Source="images/close.png" HorizontalAlignment="Center" Grid.Row="0" RenderTransformOrigin="0.5,0.5" MouseEnter="btnClose_MouseEnter" MouseLeave="btnClose_MouseLeave" MouseLeftButtonDown="btnClose_MouseLeftButtonDown" >
                    <Image.RenderTransform>
                        <TransformGroup>
                            <ScaleTransform ScaleX="1" ScaleY="1"/>
                            <SkewTransform AngleX="0" AngleY="0"/>
                            <RotateTransform Angle="0"/>
                            <TranslateTransform X="0" Y="0"/>
                        </TransformGroup>
                    </Image.RenderTransform>
                </Image>
            </Grid>
        </Border>
        <Border HorizontalAlignment="Left" VerticalAlignment="Top" Width="252" Height="252" BorderBrush="{x:Null}" BorderThickness="1,1,1,1" Background="#FFE8DA95" RenderTransformOrigin="0.5,0.5" d:IsLocked="True">
            <Border.RenderTransform>
                <TransformGroup>
                    <ScaleTransform ScaleX="1" ScaleY="1"/>
                    <SkewTransform AngleX="0" AngleY="0"/>
                    <RotateTransform Angle="-2.356"/>
                    <TranslateTransform X="0" Y="0"/>
                </TransformGroup>
            </Border.RenderTransform>
        </Border>
        <Border x:Name="NotesArea" HorizontalAlignment="Left" VerticalAlignment="Top" Width="250" Height="250" BorderBrush="{x:Null}" BorderThickness="1,1,1,1" Background="#FFE8DA95">
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="0.113*"/>
                    <RowDefinition Height="0.77*"/>
                    <RowDefinition Height="0.117*"/>
                </Grid.RowDefinitions>
                <TextBox x:Name="NoteText" Text="Note Area" TextWrapping="Wrap" Grid.Row="1" d:LayoutOverrides="Width, Height" Background="{x:Null}" BorderBrush="{x:Null}" AcceptsReturn="True"/>
                <TextBox x:Name="NoteTitle" Text="Note Title" TextWrapping="Wrap" d:LayoutOverrides="Width" Background="{x:Null}" BorderBrush="{x:Null}"/>
                <Grid x:Name="Operate" Grid.Row="2" Visibility="Visible" MouseEnter="Operate_MouseEnter" MouseLeave="Operate_MouseLeave">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="0.109*"/>
                        <ColumnDefinition Width="0.306*"/>
                        <ColumnDefinition Width="0.172*"/>
                        <ColumnDefinition Width="0.3*"/>
                        <ColumnDefinition Width="0.113*"/>
                    </Grid.ColumnDefinitions>
                    <Button x:Name="NextButton" Margin="0,4.016,0,5" Style="{DynamicResource MyButtonNP}" Content="Button" Grid.Column="3" HorizontalAlignment="Left" Width="20.08" RenderTransformOrigin="-0.033,0.6"/>
                    <Button x:Name="PreviousButton" Margin="0,3.682,0.319,5.333" Style="{DynamicResource MyButtonNP}" Content="Button" Grid.Column="1" Width="20" HorizontalAlignment="Right" RenderTransformOrigin="0.5,0.5" d:LayoutOverrides="Height">
                        <Button.RenderTransform>
                            <TransformGroup>
                                <ScaleTransform ScaleX="1" ScaleY="1"/>
                                <SkewTransform AngleX="0" AngleY="0"/>
                                <RotateTransform Angle="-180"/>
                                <TranslateTransform X="0" Y="0"/>
                            </TransformGroup>
                        </Button.RenderTransform>
                    </Button>
                    <TextBlock x:Name="PageText" Margin="0,7.189,-0.52,8.527" Text="1/1" TextWrapping="Wrap" Grid.Column="2" FontSize="10" Foreground="#FF000000" RenderTransformOrigin="0.5,0.5" d:LayoutOverrides="Height" HorizontalAlignment="Center" VerticalAlignment="Center">
                        <TextBlock.RenderTransform>
                            <TransformGroup>
                                <ScaleTransform ScaleX="1" ScaleY="1"/>
                                <SkewTransform AngleX="0" AngleY="0"/>
                                <RotateTransform Angle="0"/>
                                <TranslateTransform X="0" Y="0"/>
                            </TransformGroup>
                        </TextBlock.RenderTransform>
                    </TextBlock>
                    <Button x:Name="AddNote" Margin="0.024,4.016,8,5" Style="{DynamicResource AddNoteButton}" Content="Button" Grid.Column="4" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>
                    <Button x:Name="DeleteButton" Margin="7.032,4.016,0,5" Style="{DynamicResource DeleteNoteButton}" Content="Button"/>
                </Grid>
            </Grid>
        </Border>
    </Grid>
</Window>

Вы наверняка утомились, выполняя такой объем проектирования, я тоже. Следующее событие будет показано в следующей части этой статьи.