HypernovaDesktop Components · docs
Binarymission
WPF › Smart Info Panel › SmartInfoPanel

SmartInfoPanel

class.NET 6 / 8 / 10.NET Framework 4.8Binarymission.WPF.Controls.Containers

A panel with a two-sided card at its left that turns over in 3D when it is clicked, beside content that stays put – a product photo that turns to show its specification, a contact's picture that turns to show their details, a figure that turns to show how it was reached.

public class SmartInfoPanel : ContentControl

Inherits from / implements: ContentControl

Remarks

The three pieces of content

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.

Tip

The turn is drawn on a square, so the card looks best when both sides are square and the same size – a 120 by 120 photo, say. The card takes the size of the larger side.

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).

Examples

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();
    }
}

See also

Members at a glance

Properties
AmbientLightColorGets or sets the colour of the light that falls evenly on every part of the card while it turns, and so how bright the card stays when it is edge-on.
BorderDropShadowColorGets or sets the colour of the glow around the whole panel.
BorderDropShadowSoftnessGets or sets how far the glow around the whole panel spreads.
BorderEdgeCornerRadiusGets or sets how rounded each corner of the panel's outline is.
DirectionalLightColorGets or sets the colour of the light shining straight onto the card while it turns.
IsBorderDropShadowEnabledGets or sets whether a soft glow is drawn around the whole panel, lifting it off the window.
IsBorderEdgeCurvedGets or sets whether the panel's outline has rounded corners.
IsFaceShowingGets whether the face of the card – RotatableContentFace – is the side on show.
IsRotatableContentDropShadowEnabledGets or sets whether a soft glow is drawn around the card.
NonRotatableContentGets or sets the content shown to the right of the card, which stays still while the card turns – a name, a price, a short description.
RotatableContentBackGets or sets the side of the card shown once it has been turned over.
RotatableContentDropShadowColorGets or sets the colour of the glow around the card.
RotatableContentDropShadowSoftnessGets or sets how far the glow around the card spreads.
RotatableContentFaceGets or sets the side of the card on show at first, before it is turned.
RotateFlipTypeGets or sets the movement the card makes as it turns over.
Methods
FlipTurns the card over, exactly as a click on it does, using the current RotateFlipType.
OnApplyTemplateFinds the parts of the template the panel works with, and puts on the glows and light colours.
OnPreviewMouseDownGets the card's 3D surfaces ready before a click on the card turns it.
Fields
AmbientLightColorPropertyIdentifies the AmbientLightColor dependency property.
BorderDropShadowColorPropertyIdentifies the BorderDropShadowColor dependency property.
BorderDropShadowSoftnessPropertyIdentifies the BorderDropShadowSoftness dependency property.
BorderEdgeCornerRadiusPropertyIdentifies the BorderEdgeCornerRadius dependency property.
DirectionalLightColorPropertyIdentifies the DirectionalLightColor dependency property.
IsBorderDropShadowEnabledPropertyIdentifies the IsBorderDropShadowEnabled dependency property.
IsBorderEdgeCurvedPropertyIdentifies the IsBorderEdgeCurved dependency property.
IsRotatableContentDropShadowEnabledPropertyIdentifies the IsRotatableContentDropShadowEnabled dependency property.
NonRotatableContentPropertyIdentifies the NonRotatableContent dependency property.
RotatableContentBackPropertyIdentifies the RotatableContentBack dependency property.
RotatableContentDropShadowColorPropertyIdentifies the RotatableContentDropShadowColor dependency property.
RotatableContentDropShadowSoftnessPropertyIdentifies the RotatableContentDropShadowSoftness dependency property.
RotatableContentFacePropertyIdentifies the RotatableContentFace dependency property.
RotateFlipTypePropertyIdentifies the RotateFlipType dependency property.

Properties

AmbientLightColor

public Color AmbientLightColor

Gets or sets the colour of the light that falls evenly on every part of the card while it turns, and so how bright the card stays when it is edge-on.

Value
The control's style sets #808080, a mid grey.
Remarks

Added channel by channel to DirectionalLightColor; see there.

BorderDropShadowColor

public Color BorderDropShadowColor

Gets or sets the colour of the glow around the whole panel.

Value
The control's style sets Gray. The glow is drawn at 80% opacity.
See also

BorderDropShadowSoftness

public double BorderDropShadowSoftness

Gets or sets how far the glow around the whole panel spreads.

Value
The blur radius in logical pixels (1/96 inch); the control's style sets 12. A negative value is taken as 0.
Remarks

Drawn only while IsBorderDropShadowEnabled is true, in BorderDropShadowColor.

BorderEdgeCornerRadius

public CornerRadius BorderEdgeCornerRadius

Gets or sets how rounded each corner of the panel's outline is.

Value
The radius of each corner – top left, top right, bottom right, bottom left – in logical pixels (1/96 inch). The control's style sets 4,4,9,9: slightly rounded at the top, more at the bottom.
Remarks

Used only while IsBorderEdgeCurved is true.

DirectionalLightColor

public Color DirectionalLightColor

Gets or sets the colour of the light shining straight onto the card while it turns.

Value
The control's style sets #808080, a mid grey.
Remarks

The lights matter only during the turn: at rest each side is shown flat, as it is. The colours of this light and AmbientLightColor are added together channel by channel, and anything above white is lost, so the two greys of the style add up to white and the turning card looks as it does at rest when it faces you.

To tint the turn, lower AmbientLightColor – to #303030, say – and give this light the colour.

IsBorderDropShadowEnabled

public bool IsBorderDropShadowEnabled

Gets or sets whether a soft glow is drawn around the whole panel, lifting it off the window.

Value
true to draw the glow; the default is false.
Remarks

The glow follows whatever the panel draws. Give the panel a Control.Background so that it surrounds the panel's edge; with none, it falls on the outline and on everything inside, text included.

See also

IsBorderEdgeCurved

public bool IsBorderEdgeCurved

Gets or sets whether the panel's outline has rounded corners.

Value
true for corners rounded by BorderEdgeCornerRadius; false for square corners whatever that radius. The control's style sets true.

IsFaceShowing

public bool IsFaceShowing

Gets whether the face of the card – RotatableContentFace – is the side on show.

Value
true while the face is up, false while the back is. A panel whose template has not been built yet reports true.
Remarks

Turning away from the face, it becomes false as soon as the turn starts; turning back, it becomes true when the face reappears, about a second later.

IsRotatableContentDropShadowEnabled

public bool IsRotatableContentDropShadowEnabled

Gets or sets whether a soft glow is drawn around the card.

Value
true to draw the glow; the default is false.
Remarks

The glow follows the shape of what the card shows: a card with a solid background glows round its edge, while transparent parts let it fall on the content itself.

See also

NonRotatableContent

public Object NonRotatableContent

Gets or sets the content shown to the right of the card, which stays still while the card turns – a name, a price, a short description.

Value
Any element, or text. The default is null: nothing beside the card.
Remarks

It is placed beside the card, vertically centred and aligned to the left.

RotatableContentBack

public Object RotatableContentBack

Gets or sets the side of the card shown once it has been turned over.

Value
Any element or text. The default is null: the back of the card is empty.
Remarks

Make it the same size as RotatableContentFace; the card takes the size of the larger of the two.

See also

RotatableContentDropShadowColor

public Color RotatableContentDropShadowColor

Gets or sets the colour of the glow around the card.

Value
The control's style sets Gray. The glow is drawn at 80% opacity.
See also

RotatableContentDropShadowSoftness

public double RotatableContentDropShadowSoftness

Gets or sets how far the glow around the card spreads.

Value
The blur radius in logical pixels (1/96 inch); the control's style sets 12. A negative value is taken as 0.
Remarks

Drawn only while IsRotatableContentDropShadowEnabled is true, in RotatableContentDropShadowColor.

RotatableContentFace

public Object RotatableContentFace

Gets or sets the side of the card on show at first, before it is turned.

Value
Any element – an Image, a Border with text in it – or text. The default is null: an empty card.
Remarks

Make it the same size as RotatableContentBack, and square if you can: the turn is drawn on a square.

See also

RotateFlipType

public FlipType RotateFlipType

Gets or sets the movement the card makes as it turns over.

Value
The control's style sets FlipType.FlipLeftToRight.
Remarks

Change it while the card is at rest: each movement is a template of its own, and the new one starts with its face up.

Example
<info:SmartInfoPanel RotateFlipType="StandardFlip" />

Methods

Flip

public void Flip()

Turns the card over, exactly as a click on it does, using the current RotateFlipType.

Remarks

Turns from whichever side is up, so calling it twice brings the card back. Nothing happens before the panel's template has been built and laid out; call it once the window is loaded.

Example
// A "Details" button beside the panel turns the card over.
detailsButton.Click += (sender, e) => kettlePanel.Flip();
See also

OnApplyTemplate

public override void OnApplyTemplate()

Finds the parts of the template the panel works with, and puts on the glows and light colours.

Remarks

A template of your own keeps the turning card only if it has a ContentPresenter named fliprotatePresenter using one of the built-in flip templates; the glows need elements named outerBorder and rotatableContentPanel.

OnPreviewMouseDown

protected override void OnPreviewMouseDown(MouseButtonEventArgs e)

Gets the card's 3D surfaces ready before a click on the card turns it.

Parameters
e
The mouse event data, passed on unchanged.
Remarks

An override should call the base method, or the first click may turn a blank card.

Fields

AmbientLightColorProperty static

public static readonly DependencyProperty AmbientLightColorProperty

Identifies the AmbientLightColor dependency property.

BorderDropShadowColorProperty static

public static readonly DependencyProperty BorderDropShadowColorProperty

Identifies the BorderDropShadowColor dependency property.

BorderDropShadowSoftnessProperty static

public static readonly DependencyProperty BorderDropShadowSoftnessProperty

Identifies the BorderDropShadowSoftness dependency property.

BorderEdgeCornerRadiusProperty static

public static readonly DependencyProperty BorderEdgeCornerRadiusProperty

Identifies the BorderEdgeCornerRadius dependency property.

DirectionalLightColorProperty static

public static readonly DependencyProperty DirectionalLightColorProperty

Identifies the DirectionalLightColor dependency property.

IsBorderDropShadowEnabledProperty static

public static readonly DependencyProperty IsBorderDropShadowEnabledProperty

Identifies the IsBorderDropShadowEnabled dependency property.

IsBorderEdgeCurvedProperty static

public static readonly DependencyProperty IsBorderEdgeCurvedProperty

Identifies the IsBorderEdgeCurved dependency property.

IsRotatableContentDropShadowEnabledProperty static

public static readonly DependencyProperty IsRotatableContentDropShadowEnabledProperty

Identifies the IsRotatableContentDropShadowEnabled dependency property.

NonRotatableContentProperty static

public static readonly DependencyProperty NonRotatableContentProperty

Identifies the NonRotatableContent dependency property.

RotatableContentBackProperty static

public static readonly DependencyProperty RotatableContentBackProperty

Identifies the RotatableContentBack dependency property.

RotatableContentDropShadowColorProperty static

public static readonly DependencyProperty RotatableContentDropShadowColorProperty

Identifies the RotatableContentDropShadowColor dependency property.

RotatableContentDropShadowSoftnessProperty static

public static readonly DependencyProperty RotatableContentDropShadowSoftnessProperty

Identifies the RotatableContentDropShadowSoftness dependency property.

RotatableContentFaceProperty static

public static readonly DependencyProperty RotatableContentFaceProperty

Identifies the RotatableContentFace dependency property.

RotateFlipTypeProperty static

public static readonly DependencyProperty RotateFlipTypeProperty

Identifies the RotateFlipType dependency property.