Graphics, Animation & Multimedia

<UserControl x:Class="Bookshelf.Desktop.Controls.StarRating"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <UserControl.Resources>
        <!-- A frozen geometry shared by all five stars. -->
        <PathGeometry x:Key="StarGeometry"
                      Figures="M 10,0 L 12.6,7 L 20,7.6 L 14.2,12.4 L 16,20 L 10,15.8 L 4,20 L 5.8,12.4 L 0,7.6 L 7.4,7 Z" />
        <SolidColorBrush x:Key="StarOn" Color="#F5A623" />
        <SolidColorBrush x:Key="StarOff" Color="#D9D9D9" />
    </UserControl.Resources>

    <StackPanel Orientation="Horizontal">
        <Path Data="{StaticResource StarGeometry}" Fill="{StaticResource StarOn}"
              Stroke="#B9790F" StrokeThickness="0.75" Margin="0,0,2,0" />
        <Path Data="{StaticResource StarGeometry}" Fill="{StaticResource StarOn}"
              Stroke="#B9790F" StrokeThickness="0.75" Margin="0,0,2,0" />
        <Path Data="{StaticResource StarGeometry}" Fill="{StaticResource StarOn}"
              Stroke="#B9790F" StrokeThickness="0.75" Margin="0,0,2,0" />
        <Path Data="{StaticResource StarGeometry}" Fill="{StaticResource StarOff}"
              Stroke="#9A9A9A" StrokeThickness="0.75" Margin="0,0,2,0" />
        <Path Data="{StaticResource StarGeometry}" Fill="{StaticResource StarOff}"
              Stroke="#9A9A9A" StrokeThickness="0.75" />
    </StackPanel>
</UserControl>

<Grid Width="120" Height="170" Margin="8">
    <Grid.Resources>
        <!-- Rounded corners for the cover; used both to fill and to clip. -->
        <RectangleGeometry x:Key="CoverShape" Rect="0,0,120,170" RadiusX="8" RadiusY="8" />
    </Grid.Resources>

    <!-- Filled shape built from a combined geometry: the cover minus a bookmark notch. -->
    <Path Fill="#3F5F8A" Stroke="#243A57" StrokeThickness="1">
        <Path.Data>
            <CombinedGeometry GeometryCombineMode="Exclude">
                <CombinedGeometry.Geometry1>
                    <RectangleGeometry Rect="0,0,120,170" RadiusX="8" RadiusY="8" />
                </CombinedGeometry.Geometry1>
                <CombinedGeometry.Geometry2>
                    <PathGeometry Figures="M 96,-1 L 108,14 L 120,-1 Z" />
                </CombinedGeometry.Geometry2>
            </CombinedGeometry>
        </Path.Data>
    </Path>

    <!-- A cover image clipped to the same rounded rectangle. -->
    <Image Source="pack://application:,,,/Assets/DefaultCover.png"
           Stretch="UniformToFill"
           Clip="{StaticResource CoverShape}" />
</Grid>

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

    <!-- Book spine: a vertical gradient. -->
    <LinearGradientBrush x:Key="SpineBrush" StartPoint="0,0" EndPoint="1,0">
        <GradientStop Color="#2C3E5C" Offset="0.0" />
        <GradientStop Color="#4A6FA5" Offset="0.5" />
        <GradientStop Color="#2C3E5C" Offset="1.0" />
    </LinearGradientBrush>

    <!-- Subtle checker tile for the shelf background. -->
    <DrawingBrush x:Key="PaperBrush" Viewport="0,0,16,16" ViewportUnits="Absolute"
                  TileMode="Tile" Stretch="None">
        <DrawingBrush.Drawing>
            <DrawingGroup>
                <GeometryDrawing Brush="#FAF6EE">
                    <GeometryDrawing.Geometry>
                        <RectangleGeometry Rect="0,0,16,16" />
                    </GeometryDrawing.Geometry>
                </GeometryDrawing>
                <GeometryDrawing Brush="#F1EBDD">
                    <GeometryDrawing.Geometry>
                        <GeometryGroup>
                            <RectangleGeometry Rect="0,0,8,8" />
                            <RectangleGeometry Rect="8,8,8,8" />
                        </GeometryGroup>
                    </GeometryDrawing.Geometry>
                </GeometryDrawing>
            </DrawingGroup>
        </DrawingBrush.Drawing>
    </DrawingBrush>
</ResourceDictionary>

using System.Windows.Media;

namespace Bookshelf.Desktop.Graphics;

internal static class BookshelfBrushes
{
    public static readonly Brush Accent = Freeze(new SolidColorBrush(Color.FromRgb(0x4A, 0x6F, 0xA5)));

    public static readonly Brush AccentFill = Freeze(new SolidColorBrush(Color.FromArgb(0x33, 0x4A, 0x6F, 0xA5)));

    public static readonly Pen AccentPen = FreezePen(new Pen(Accent, 1.5));

    private static T Freeze<T>(T brush) where T : Freezable
    {
        brush.Freeze();
        return brush;
    }

    private static Pen FreezePen(Pen pen)
    {
        pen.Freeze();
        return pen;
    }
}

<StackPanel Orientation="Horizontal" Margin="12">
    <!-- A rotated element still occupies its original slot: RenderTransform. -->
    <Border Background="#E8EEF6" Padding="8,4" Margin="0,0,16,0"
            RenderTransformOrigin="0.5,0.5">
        <Border.RenderTransform>
            <RotateTransform Angle="-6" />
        </Border.RenderTransform>
        <TextBlock Text="New arrival" FontWeight="SemiBold" />
    </Border>

    <!-- A rotated element makes the parent adjust to the new size: LayoutTransform. -->
    <Border Background="#E8EEF6" Padding="8,4">
        <Border.LayoutTransform>
            <RotateTransform Angle="-90" />
        </Border.LayoutTransform>
        <TextBlock Text="Shelf A" FontWeight="SemiBold" />
    </Border>
</StackPanel>

<Border x:Name="Card" Width="140" Height="190" CornerRadius="8" Background="White" Margin="12">
    <Border.Effect>
        <DropShadowEffect BlurRadius="12" ShadowDepth="3" Direction="270"
                          Color="Black" Opacity="0.25" RenderingBias="Performance" />
    </Border.Effect>
    <TextBlock Text="The Left Hand of Darkness" TextWrapping="Wrap" Margin="10"
               FontWeight="SemiBold" />
</Border>

using System.Windows;
using System.Windows.Media;
using System.Windows.Media.Effects;

namespace Bookshelf.Desktop.Effects;

/// <summary>Fades a visual toward grey; the amount is a shader constant.</summary>
public sealed class DimEffect : ShaderEffect
{
    private static readonly PixelShader Shader = new()
    {
        UriSource = new Uri("pack://application:,,,/Bookshelf.Desktop;component/Effects/Dim.ps"),
    };

    public static readonly DependencyProperty InputProperty =
        RegisterPixelShaderSamplerProperty(nameof(Input), typeof(DimEffect), 0);

    public static readonly DependencyProperty AmountProperty =
        DependencyProperty.Register(
            nameof(Amount),
            typeof(double),
            typeof(DimEffect),
            new UIPropertyMetadata(0.0, PixelShaderConstantCallback(0)));

    public DimEffect()
    {
        PixelShader = Shader;
        UpdateShaderValue(InputProperty);
        UpdateShaderValue(AmountProperty);
    }

    public Brush Input
    {
        get => (Brush)GetValue(InputProperty);
        set => SetValue(InputProperty, value);
    }

    public double Amount
    {
        get => (double)GetValue(AmountProperty);
        set => SetValue(AmountProperty, value);
    }
}

using System.Globalization;
using System.Windows;
using System.Windows.Media;

namespace Bookshelf.Desktop.Graphics;

/// <summary>Draws pages read per day as a line, with the last point highlighted.</summary>
public sealed class ReadingSparkline : FrameworkElement
{
    private readonly VisualCollection _children;
    private readonly DrawingVisual _visual = new();

    public ReadingSparkline()
    {
        _children = new VisualCollection(this) { _visual };
    }

    public static readonly DependencyProperty ValuesProperty =
        DependencyProperty.Register(
            nameof(Values),
            typeof(IReadOnlyList<double>),
            typeof(ReadingSparkline),
            new FrameworkPropertyMetadata(null, FrameworkPropertyMetadataOptions.AffectsRender, OnValuesChanged));

    public IReadOnlyList<double>? Values
    {
        get => (IReadOnlyList<double>?)GetValue(ValuesProperty);
        set => SetValue(ValuesProperty, value);
    }

    protected override int VisualChildrenCount => _children.Count;

    protected override Visual GetVisualChild(int index)
    {
        ArgumentOutOfRangeException.ThrowIfNegative(index);
        ArgumentOutOfRangeException.ThrowIfGreaterThanOrEqual(index, _children.Count);
        return _children[index];
    }

    protected override Size MeasureOverride(Size availableSize) =>
        new(
            double.IsInfinity(availableSize.Width) ? 120 : availableSize.Width,
            double.IsInfinity(availableSize.Height) ? 32 : availableSize.Height);

    protected override Size ArrangeOverride(Size finalSize)
    {
        Redraw(finalSize);
        return finalSize;
    }

    private static void OnValuesChanged(DependencyObject d, DependencyPropertyChangedEventArgs e) =>
        ((ReadingSparkline)d).Redraw(((ReadingSparkline)d).RenderSize);

    private void Redraw(Size size)
    {
        using DrawingContext dc = _visual.RenderOpen();

        var values = Values;
        if (values is null || values.Count < 2 || size.Width <= 0 || size.Height <= 0)
        {
            return;
        }

        double max = Math.Max(values.Max(), 1);
        double stepX = size.Width / (values.Count - 1);

        Point PointAt(int i) => new(i * stepX, size.Height - (values[i] / max) * (size.Height - 4) - 2);

        // StreamGeometry is the light-weight way to describe a line that never changes after it is built.
        var geometry = new StreamGeometry();
        using (StreamGeometryContext ctx = geometry.Open())
        {
            ctx.BeginFigure(PointAt(0), isFilled: false, isClosed: false);
            for (int i = 1; i < values.Count; i++)
            {
                ctx.LineTo(PointAt(i), isStroked: true, isSmoothJoin: true);
            }
        }

        geometry.Freeze();

        dc.DrawGeometry(null, BookshelfBrushes.AccentPen, geometry);
        dc.DrawEllipse(BookshelfBrushes.Accent, null, PointAt(values.Count - 1), 3, 3);

        var label = new FormattedText(
            values[^1].ToString("0", CultureInfo.CurrentCulture),
            CultureInfo.CurrentCulture,
            FlowDirection.LeftToRight,
            new Typeface("Segoe UI"),
            10,
            BookshelfBrushes.Accent,
            VisualTreeHelper.GetDpi(this).PixelsPerDip);
        dc.DrawText(label, new Point(size.Width - label.Width, 0));
    }
}

<local:ReadingSparkline Width="160" Height="36"
                        Values="{Binding SelectedBook.PagesPerDay}" />

<StackPanel Margin="12" Width="320">
    <MediaElement x:Name="Preview"
                  Source="{Binding SelectedBook.SampleUri}"
                  LoadedBehavior="Manual" UnloadedBehavior="Stop"
                  MediaOpened="OnPreviewOpened"
                  MediaEnded="OnPreviewEnded"
                  MediaFailed="OnPreviewFailed" />

    <StackPanel Orientation="Horizontal" Margin="0,8,0,0">
        <Button Content="Play" Click="OnPlay" Margin="0,0,6,0" />
        <Button Content="Pause" Click="OnPause" Margin="0,0,6,0" />
        <Button Content="Stop" Click="OnStop" />
    </StackPanel>

    <Slider x:Name="PositionSlider" Margin="0,8,0,0" Minimum="0"
            Thumb.DragStarted="OnSeekStarted" Thumb.DragCompleted="OnSeekCompleted" />
    <TextBlock x:Name="Status" Foreground="#9A1F1F" TextWrapping="Wrap" />
</StackPanel>

using System.Windows;
using System.Windows.Controls;
using System.Windows.Controls.Primitives;
using System.Windows.Threading;

namespace Bookshelf.Desktop.Views;

public partial class SamplePlayerView : UserControl
{
    private readonly DispatcherTimer _timer = new() { Interval = TimeSpan.FromMilliseconds(250) };
    private bool _seeking;

    public SamplePlayerView()
    {
        InitializeComponent();
        _timer.Tick += (_, _) =>
        {
            if (!_seeking && Preview.NaturalDuration.HasTimeSpan)
            {
                PositionSlider.Value = Preview.Position.TotalSeconds;
            }
        };
    }

    private void OnPreviewOpened(object sender, RoutedEventArgs e)
    {
        // The natural size and duration are only known after MediaOpened.
        PositionSlider.Maximum = Preview.NaturalDuration.HasTimeSpan
            ? Preview.NaturalDuration.TimeSpan.TotalSeconds
            : 0;
        Status.Text = string.Empty;
    }

    private void OnPreviewEnded(object sender, RoutedEventArgs e)
    {
        _timer.Stop();
        Preview.Stop();
        PositionSlider.Value = 0;
    }

    private void OnPreviewFailed(object? sender, ExceptionRoutedEventArgs e)
    {
        _timer.Stop();
        Status.Text = $"The sample cannot be played: {e.ErrorException.Message}";
    }

    private void OnPlay(object sender, RoutedEventArgs e)
    {
        Preview.Play();
        _timer.Start();
    }

    private void OnPause(object sender, RoutedEventArgs e)
    {
        Preview.Pause();
        _timer.Stop();
    }

    private void OnStop(object sender, RoutedEventArgs e)
    {
        Preview.Stop();
        _timer.Stop();
        PositionSlider.Value = 0;
    }

    private void OnSeekStarted(object sender, DragStartedEventArgs e) => _seeking = true;

    private void OnSeekCompleted(object sender, DragCompletedEventArgs e)
    {
        Preview.Position = TimeSpan.FromSeconds(PositionSlider.Value);
        _seeking = false;
    }
}

using System.Windows;
using System.Windows.Media;

namespace Bookshelf.Desktop.Graphics;

internal static class TrailerDrawing
{
    public static VideoDrawing Create(Uri uri, Rect area)
    {
        var player = new MediaPlayer();
        player.Open(uri);

        var drawing = new VideoDrawing
        {
            Rect = area,
            Player = player,
        };

        player.Play();
        return drawing;
    }
}

<Viewport3D Width="220" Height="260" ClipToBounds="True">
    <Viewport3D.Camera>
        <PerspectiveCamera Position="0,0,3.2" LookDirection="0,0,-1" UpDirection="0,1,0"
                           FieldOfView="45" NearPlaneDistance="0.5" FarPlaneDistance="20" />
    </Viewport3D.Camera>

    <ModelVisual3D>
        <ModelVisual3D.Content>
            <Model3DGroup>
                <AmbientLight Color="#555555" />
                <DirectionalLight Color="White" Direction="-1,-1,-2" />

                <GeometryModel3D>
                    <GeometryModel3D.Geometry>
                        <MeshGeometry3D Positions="-0.8,-1.1,0  0.8,-1.1,0  -0.8,1.1,0  0.8,1.1,0"
                                        Normals="0,0,1  0,0,1  0,0,1  0,0,1"
                                        TextureCoordinates="0,1  1,1  0,0  1,0"
                                        TriangleIndices="0 1 2  1 3 2" />
                    </GeometryModel3D.Geometry>
                    <GeometryModel3D.Material>
                        <DiffuseMaterial>
                            <DiffuseMaterial.Brush>
                                <ImageBrush ImageSource="pack://application:,,,/Assets/DefaultCover.png" />
                            </DiffuseMaterial.Brush>
                        </DiffuseMaterial>
                    </GeometryModel3D.Material>
                    <GeometryModel3D.BackMaterial>
                        <DiffuseMaterial Brush="#3F5F8A" />
                    </GeometryModel3D.BackMaterial>
                    <GeometryModel3D.Transform>
                        <RotateTransform3D>
                            <RotateTransform3D.Rotation>
                                <AxisAngleRotation3D Axis="0,1,0" Angle="-18" />
                            </RotateTransform3D.Rotation>
                        </RotateTransform3D>
                    </GeometryModel3D.Transform>
                </GeometryModel3D>
            </Model3DGroup>
        </ModelVisual3D.Content>
    </ModelVisual3D>
</Viewport3D>

using System.Windows.Media;

namespace Bookshelf.Desktop.Graphics;

public static class RenderingInfo
{
    /// <summary>The rendering tier, 0 to 2, of the dispatcher on the calling thread.</summary>
    public static int CurrentTier => RenderCapability.Tier >> 16;

    /// <summary>True when expensive visuals (shadows, blur, 3-D) should be turned off.</summary>
    public static bool PreferSimpleVisuals => CurrentTier < 2;

    public static void Watch(Action<int> onChanged) =>
        RenderCapability.TierChanged += (_, _) => onChanged(CurrentTier);
}