Smart Info Panel

The three pieces of content

• RotatableContentFace – the side of the card on show at first.
• RotatableContentBack – the side shown once the card has turned.
• NonRotatableContent – shown to the right of the card, vertically centred, and never turned: a title, a price, a line saying "click the picture".

Each can be any element, or text. The panel's own ContentControl.Content is not shown; use these three.

Turning the card

Pressing a mouse button on the card turns it over, in about a second, with the card dipping away and coming back as it turns; pressing again turns it back. Flip does the same from code, and IsFaceShowing says which side is up. RotateFlipType chooses the movement: over the vertical or horizontal centre line, a spin in place, or a push in and out. A button or other control on the card that handles its own clicks does not turn it.

While the card is at rest each side is shown as an ordinary flat element, so text stays sharp and controls on it work; the 3D picture is on screen only during the turn.

Appearance

The panel has a 1-pixel Control.BorderBrush outline in grey with rounded corners (IsBorderEdgeCurved, BorderEdgeCornerRadius) and no Control.Background. A soft glow can be put around the whole panel (IsBorderDropShadowEnabled) and around the card (IsRotatableContentDropShadowEnabled), and the 3D turn is lit by two lights (DirectionalLightColor, AmbientLightColor).

A product tile in XAML. The assembly is Binarymission.WPF.Controls.SmartInfoPanel.

<Window x:Class="Shop.ProductWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:info="clr-namespace:Binarymission.WPF.Controls.Containers;assembly=Binarymission.WPF.Controls.SmartInfoPanel"
        Title="Kettles" Width="520" Height="260">

    <info:SmartInfoPanel x:Name="kettlePanel" Margin="16" Background="White"
                         RotateFlipType="FlipLeftToRight"
                         IsBorderDropShadowEnabled="True">
        <info:SmartInfoPanel.RotatableContentFace>
            <Image Source="/Images/Kettle.png" Width="120" Height="120" />
        </info:SmartInfoPanel.RotatableContentFace>

        <info:SmartInfoPanel.RotatableContentBack>
            <Border Width="120" Height="120" Background="#F3F4F6" Padding="8">
                <TextBlock TextWrapping="Wrap" Text="1.7 litres, 3 kW, brushed steel, rapid boil." />
            </Border>
        </info:SmartInfoPanel.RotatableContentBack>

        <info:SmartInfoPanel.NonRotatableContent>
            <StackPanel>
                <TextBlock Text="Brushed steel kettle" FontSize="16" FontWeight="SemiBold" />
                <TextBlock Text="£49.99" Margin="0,4,0,0" />
                <TextBlock Text="Click the picture for the specification." Foreground="Gray" Margin="0,8,0,0" />
            </StackPanel>
        </info:SmartInfoPanel.NonRotatableContent>
    </info:SmartInfoPanel>
</Window>

Turning the card from code – here, back to its face when the next product is shown.

private void ShowProduct(Product product)
{
    DataContext = product;
    if (!kettlePanel.IsFaceShowing)
    {
        kettlePanel.Flip();
    }
}