community/Ink Canvas/Controls/PptNavBar.xaml

<UserControl x:Class="Ink_Canvas.Controls.PptNavBar"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             xmlns:ikw="http://schemas.inkore.net/lib/ui/wpf"
             xmlns:local="clr-namespace:Ink_Canvas.Controls"
             mc:Ignorable="d"
             d:DesignHeight="50" d:DesignWidth="200">
    <UserControl.Resources>
        <SolidColorBrush x:Key="PptNavBarItemForeground" Color="#71717a"/>
        <DataTemplate x:Key="PptPreviewItemTemplate">
            <Grid Margin="2,4">
                <Border CornerRadius="8" Background="Transparent" Padding="6">
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="28"/>
                            <ColumnDefinition Width="*"/>
                        </Grid.ColumnDefinitions>
                        <TextBlock Grid.Column="0" VerticalAlignment="Center" HorizontalAlignment="Center"
                                   FontSize="12" FontWeight="SemiBold"
                                   Foreground="{DynamicResource PptNavBarItemForeground}"
                                   Text="{Binding SlideNumber}"/>
                        <Image Grid.Column="1" Source="{Binding Thumbnail}" Stretch="Uniform"/>
                    </Grid>
                </Border>
            </Grid>
        </DataTemplate>
        <Style x:Key="PptPreviewItemContainerStyle" TargetType="ListBoxItem">
            <Setter Property="Background" Value="Transparent"/>
            <Setter Property="BorderThickness" Value="0"/>
            <Setter Property="Padding" Value="0"/>
            <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
            <Setter Property="FocusVisualStyle" Value="{x:Null}"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="ListBoxItem">
                        <Border x:Name="Bd" CornerRadius="8" Background="Transparent"
                                BorderBrush="Transparent" BorderThickness="2">
                            <ContentPresenter/>
                        </Border>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsMouseOver" Value="True">
                                <Setter TargetName="Bd" Property="Background" Value="#1affffff"/>
                            </Trigger>
                            <Trigger Property="IsSelected" Value="True">
                                <Setter TargetName="Bd" Property="BorderBrush" Value="#22c55e"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </UserControl.Resources>

    <Border x:Name="RootBorder" BorderThickness="1" BorderBrush="#a1a1aa"
            Background="#f4f4f5" Opacity="1" CornerRadius="6">
        <Border.Effect>
            <DropShadowEffect Color="#000000" BlurRadius="14" ShadowDepth="2" Opacity="0.16"/>
        </Border.Effect>
        <DockPanel x:Name="LayoutRoot" LastChildFill="True">
            <ListBox x:Name="PreviewList"
                     Visibility="Collapsed"
                     Background="Transparent" BorderThickness="0"
                     Padding="6,8,6,4"
                     HorizontalAlignment="Stretch" VerticalAlignment="Stretch"
                     ScrollViewer.VerticalScrollBarVisibility="Auto"
                     ScrollViewer.HorizontalScrollBarVisibility="Disabled"
                     ItemTemplate="{StaticResource PptPreviewItemTemplate}"
                     ItemContainerStyle="{StaticResource PptPreviewItemContainerStyle}"
                     MouseUp="PreviewList_MouseUp"/>
            <ikw:SimpleStackPanel x:Name="ButtonRow" Orientation="Horizontal"
                                  HorizontalAlignment="Center" VerticalAlignment="Center">
                <Border x:Name="PreviousButtonBorder" Width="50" Height="50"
                        MouseDown="PreviousButton_MouseDown"
                        MouseUp="PreviousButton_MouseUp"
                        MouseLeave="PreviousButton_MouseLeave"
                        CornerRadius="5 5 0 0" Background="Transparent">
                    <Grid>
                        <Border x:Name="PreviousButtonFeedbackBorder" Margin="3" CornerRadius="5"
                                Background="#18181b" Opacity="0"/>
                        <Image Height="28" Width="28">
                            <Image.Source>
                                <DrawingImage>
                                    <DrawingImage.Drawing>
                                        <DrawingGroup ClipGeometry="M0,0 V24 H24 V0 H0 Z">
                                            <GeometryDrawing x:Name="PreviousButtonGeometry" Brush="#27272a"/>
                                        </DrawingGroup>
                                    </DrawingImage.Drawing>
                                </DrawingImage>
                            </Image.Source>
                        </Image>
                    </Grid>
                </Border>
                <Border x:Name="PageButtonBorder" Visibility="Visible" TextBlock.Foreground="#171717"
                        MouseDown="PageButton_MouseDown"
                        MouseUp="PageButton_MouseUp"
                        MouseLeave="PageButton_MouseLeave"
                        MinWidth="50" MinHeight="50" Background="Transparent">
                    <Grid>
                        <Border x:Name="PageButtonFeedbackBorder" Margin="0,3" CornerRadius="5"
                                Background="#18181b" Opacity="0"/>
                        <ikw:SimpleStackPanel VerticalAlignment="Center" Orientation="Vertical"
                                             Spacing="0.5" Margin="12,0">
                            <TextBlock x:Name="PageNowText" HorizontalAlignment="Center" VerticalAlignment="Center"
                                       FontSize="17" FontWeight="Bold" Text="?"/>
                            <TextBlock x:Name="PageTotalText" HorizontalAlignment="Center" VerticalAlignment="Center"
                                       FontSize="10" Text="/ ?"/>
                        </ikw:SimpleStackPanel>
                    </Grid>
                </Border>
                <Border x:Name="NextButtonBorder" Width="50" Height="50"
                        MouseDown="NextButton_MouseDown"
                        MouseUp="NextButton_MouseUp"
                        MouseLeave="NextButton_MouseLeave"
                        CornerRadius="0 0 5 5" Background="Transparent">
                    <Grid>
                        <Border x:Name="NextButtonFeedbackBorder" Margin="3" CornerRadius="5"
                                Background="#18181b" Opacity="0"/>
                        <Image VerticalAlignment="Center" HorizontalAlignment="Center" Height="28" Width="28">
                            <Image.Source>
                                <DrawingImage>
                                    <DrawingImage.Drawing>
                                        <DrawingGroup ClipGeometry="M0,0 V24 H24 V0 H0 Z">
                                            <GeometryDrawing x:Name="NextButtonGeometry" Brush="#27272a"/>
                                        </DrawingGroup>
                                    </DrawingImage.Drawing>
                                </DrawingImage>
                            </Image.Source>
                        </Image>
                    </Grid>
                </Border>
            </ikw:SimpleStackPanel>
        </DockPanel>
    </Border>
</UserControl>