FlowControl (Legacy)

The FlowControl is used for both CoverFlow and wheel presentations. Here is an example of its use:

<coverFlow:FlowControl x:Name="FlowControl" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Grid.Column="0" CoverFactory="{Binding CoverFactory}" ImageType="Clear Logo" CurveAmount="4.5" CameraZPosition="3.0" VisibleCount="14" PageSize="6" Spacing="1.0" ItemZPosition="1.0" SelectedItemZPosition="2.0" MaxVerticalImageResolutionOverride="500" />

In order to use the FlowControl, you will need the following line in the opening UserControl tag:

xmlns:coverFlow="clr-namespace:Unbroken.LaunchBox.Windows.Controls.CoverFlow;assembly=Unbroken.LaunchBox.Windows"

ImageType

If not specified or left blank, the FlowControl will use the default ImageType for the active platform, or if no active platform an overall default image type will be used.

Here are all the possible valid values for platforms views: Clear Logo, Fanart, Banner, Device

Here are all the possible valid values for games views: Boxes, 3D Boxes, Carts, 3D Carts, Screenshots, Clear Logos

CurveAmount

The CurveAmount is a multiplier decimal value that specifies how much the wheel should curve. Putting 0 in this value will result in no curve at all. A negative value will curve the wheel in the opposite direction.

CurveAmount is currently only supported by the wheel views (WheelCoverFactory and HorizontalWheelCoverFactory). This property will be ignored for CoverFlow views.

The default CurveAmount value is 4.5.

RotationAmount

The RotationAmount is a multiplier decimal value that specifies how much items in the wheel should rotate as they move further from the selected position. Putting 0 in this value will result in no rotation. A negative value will curve the wheel in the opposite direction.

RotationAmount is currently only supported by the wheel views (WheelCoverFactory and HorizontalWheelCoverFactory). This property will be ignored for CoverFlow views.

The default RotationAmount value is 0.

CameraZPosition

The CameraZPosition property specifies the position of the camera in relation to the Z positions of the images. Generally this affects the size of the images.

The CameraZPosition property should always be greater than both the ItemZPosition and SelectedItemZPosition properties, or the images will appear behind the camera and hence not be shown. The bigger the CameraZPosition property, the further away from the images the camera will be, and thus the smaller the images will appear.

The default CameraZPosition value is 3.0.

CameraYAngle

The CameraYAngle property specifies the angle on the Y axis that the camera should be pointing.

The default CameraYAngle value is 0.

CameraXAngle

The CameraXAngle property specifies the angle on the X axis that the camera should be pointing.

The default CameraXAngle value is 0.

CameraZAngle

The CameraZAngle property specifies the angle on the Z axis that the camera should be pointing.

The default CameraZAngle value is 0.

ItemZPosition

The ItemZPosition property specifies the Z position of items that are not the currently selected item. This also affects the size of the images in relation to the camera.

The ItemZPosition property should always be less than the CameraZPosition property, or the images will appear behind the camera and hence not be shown. The bigger the ItemZPosition property, the closer the images will appear to the camera, and thus the bigger the images will appear.

ItemZPosition is currently only supported by the wheel views (WheelCoverFactory and HorizontalWheelCoverFactory). This property will be ignored for CoverFlow views.

The default ItemZPosition value is 1.0.

SelectedItemZPosition

The SelectedItemZPosition property specifies the Z position of the currently selected item only. This affects the size of the selected image in relation to the camera.

The SelectedItemZPosition property should always be less than the CameraZPosition property, or the images will appear behind the camera and hence not be shown. The bigger the SelectedItemZPosition property, the closer the selected image will appear to the camera, and thus the bigger the selected image will appear.

Generally, the SelectedItemZPosition property should also be larger than the ItemZPosition property in order to make the selected item appear larger than the other items in the control.

SelectedItemZPosition is currently only supported by the wheel views (WheelCoverFactory and HorizontalWheelCoverFactory). This property will be ignored for CoverFlow views.

The default SelectedItemZPosition value is 2.0.

Spacing

The Spacing property is a multiplier decimal value that specifies how close the images in the control should appear to each other. The greater the value for the Spacing property, the farther away the images will appear from each other.

Spacing is currently only supported by the wheel views (WheelCoverFactory and HorizontalWheelCoverFactory). This property will be ignored for CoverFlow views.

The default Spacing value is 1.0.

VisibleCount

The VisibleCount property specifies the total number of images displayed on the screen at once.

This number is automatically increased by 3 on the backend in order to prevent clipping or popping as new images are added to the ends of the control. Therefore, if for some reason you want to display less than three images, you’ll need to set this to a negative value.

PageSize

The PageSize property is primarily used for Page Up and Page Down commands. This specifies how many images should be skipped in either direction when pressing Page Up or Page Down.

MaxVerticalImageResolutionOverride

Used to override the user’s default CoverFlow image quality settings. Omit this property to use the default settings (recommended for most scenarios). Cached images will be resized to this vertical resolution.

CustomImageType

The CustomImageType property is used specifically if you want a theme-specific, forced set of images for the FlowControl. For example:

<coverFlow:FlowControl x:Name="FlowControl" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Grid.Column="0" CustomImageType="My Theme Custom Image Type" CurveAmount="0" CameraZPosition="6.0" VisibleCount="14" PageSize="6" ItemZPosition="1.0" SelectedItemZPosition="3.0" Spacing="3.5" />

Assuming the theme that you are using is called “My Theme”, the above code would load platform images from the following folder:

LaunchBox\Themes\My Theme\Images\Platforms\My Theme Custom Image Type

“My Theme” is of course replaced with the name of your theme, and “My Theme Custom Image Type” is replaced with the CustomImageType value that you use in the FlowControl property.

PNG and/or JPG images are then loaded up from that folder that match the name of the platform.

For game images, the same markup can be used. Assuming the theme that you are using is called “My Theme”, the above code would load game images from the following folder:

LaunchBox\Themes\My Theme\Images\Games\My Theme Custom Image Type\[Platform]

“My Theme” is of course replaced with the name of your theme, “My Theme Custom Image Type” is replaced with the CustomImageType value that you use in the FlowControl property, and “[Platform]” is replaced with the game’s platform name.

PNG and/or JPG images are then loaded up from that folder that match the name of the game.

CoverFactory

The CoverFactory property specifies the CoverFactory class that is used in order to arrange images in the control. This affects the overall behavior and look of the FlowControl.

Using a value of “{Binding CoverFactory}” will automatically assign the default CoverFactory for the current view. However, you can override this by assigning a specific CoverFactory class like so:

<coverFlow:FlowControl x:Name="FlowControl" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Grid.Column="0" ImageType="Clear Logos" CurveAmount="0" CameraZPosition="6.0" VisibleCount="14" PageSize="6" ItemZPosition="1.0" SelectedItemZPosition="3.0" Spacing="3.5">
   <coverFlow:FlowControl.CoverFactory>
      <coverFlow:HorizontalWheelCoverFactory />
   </coverFlow:FlowControl.CoverFactory>
</coverFlow:FlowControl>

This will result in forcing the control to use the HorizontalWheelCoverFactory, which ultimately means that the control will behave like the CoverFlow views.

Below are all the possible CoverFactory classes that can be used in place of the default CoverFactory:

BoxArtCoverFactory – Used for the CoverFlow views; will result in a horizontal flipping flow of covers

<coverFlow:FlowControl x:Name="FlowControl" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Grid.Row="0" CameraZPosition="3.0" VisibleCount="14" PageSize="5">
   <coverFlow:FlowControl.CoverFactory>
      <coverFlow:BoxArtCoverFactory />
   </coverFlow:FlowControl.CoverFactory>
</coverFlow:FlowControl>

HorizontalWheelCoverFactory – Used to display a horizontal wheel

<coverFlow:FlowControl x:Name="FlowControl" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Grid.Column="0" ImageType="Clear Logos" CurveAmount="0" CameraZPosition="6.0" VisibleCount="14" PageSize="6" ItemZPosition="1.0" SelectedItemZPosition="3.0" Spacing="3.5">
   <coverFlow:FlowControl.CoverFactory>
      <coverFlow:HorizontalWheelCoverFactory />
   </coverFlow:FlowControl.CoverFactory>
</coverFlow:FlowControl>

WheelCoverFactory – Used to display a vertical wheel

<coverFlow:FlowControl x:Name="FlowControl" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Grid.Column="0" ImageType="Clear Logo" CurveAmount="4.5" CameraZPosition="3.0" VisibleCount="14" PageSize="6" Spacing="1.0" ItemZPosition="1.0" SelectedItemZPosition="2.0">
   <coverFlow:FlowControl.CoverFactory>
      <coverFlow:WheelCoverFactory />
   </coverFlow:FlowControl.CoverFactory>
</coverFlow:FlowControl>

FlowControl (Heavily Updated in 11.10)

The FlowControl control has been updated in version 11.10. All the above still works but the following has been added to the control.

Animate (bool)
This value, when set to false, suppresses any animations tied to the movement of the items drawn in the FlowControl. By default this is set to true.

Camera (Camera)
This is the camera that is to be used to render the FlowControl scene. Setting this property will override the following legacy properties: CameraXAngle, CameraYAngle, CameraZAngle. Here is an example:

<coverFlow:FlowControl x:Name="FlowControl" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Grid.Column="0"> 
   <coverFlow:FlowControl.Camera> 
      <OrthographicCamera Position="0,0,5" LookDirection="0,0,-1" NearPlaneDistance=".01" FarPlaneDistance="1000" Width="15" /> 
   </coverFlow:FlowControl.Camera> 
</coverFlow:FlowControl>

Columns (int)
This is the number of columns to be drawn in the FlowControl. If neither Columns or Rows has been set this value will default to 5. Setting a CoverFactory (see legacy properties) will override this setting.

Endless (bool)
This value controls whether the FlowControl should wrap its content (similar to default wheel views). This defaults to false. If a CoverFactory has been set this setting will respect that CoverFactory’s Endless property.

FlowContext
This is a control you will put as the root element of the FlowTemplate. You can see an example syntax of this control below in the FlowTemplate section. FlowContext has the following properties you can bind to to allow for styling your template:

IsItemSelected (bool)
This property is set to true if your template is the currently selected item.

IsRowSelected (bool)
This property is set to true if your template is in the same row as the currently selected item.

NavigationHeld (bool)
Properties inside this trigger will only be in effect when the navigation speed has become 150ms or less (faster).

FlowTemplate (DataTemplate)

This property allows you to control what each individual item in the FlowControl looks like. This property should not be used with the CoverFactory property set. This property will override the CoverFactory property when determining how the item should appear. Here is an example of its use:

<coverFlow:FlowControl x:Name="FlowControl" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Grid.Column="0"> 
   <coverFlow:FlowControl.Camera> 
      <OrthographicCamera Position="0,0,5" LookDirection="0,0,-1" NearPlaneDistance=".01" FarPlaneDistance="1000" Width="15"/> 
   </coverFlow:FlowControl.Camera> 
   <coverFlow:FlowControl.FlowTemplate> 
      <DataTemplate> 
         <coverFlow:FlowContext> 
             <!-- Template goes here --> 
         </coverFlow:FlowContext> 
      </DataTemplate> 
   </coverFlow:FlowControl.FlowTemplate> 
</coverFlow:FlowControl>

ItemSpacing (Point)
This property sets the spacing between items in the FlowControl. X is horizontal spacing, Y is vertical.

NavigationColumns (int)
This property sets the number of columns you must navigate away from either end of the FlowControl before the FlowControl item being selected is forced to the center. This property allows you to justify your items to the side of the FlowControl when Endless has been set to false.

NavigationRows (int)
This property allows you to set the number of rows you must navigate away from either end of the FlowControl before the FlowControl item being selected is forced to the center. This property allows you to justify your items to the top and bottom of the FlowControl when Endless has been set to false.

Rows (int)
This is the number of rows to be drawn in the FlowControl. The default value is 0. Setting a CoverFactory (see legacy properties) will override this setting.

SelectedScale (Point)
This property scales the selected item in the FlowControl. X controls horizontal scaling, Y controls vertical.

SelectedOffsetProperty (Point3D)
This property will move the selected item by this much in 3D space. If Animate is true this movement will be animated as well. If the legacy ItemZPosition is set as well it’s value will be added to the Z value of this property.

MinimumAnimationSpeed (int)
This property will override a user’s Minimum Animation Speed of the wheel with its value. Value is in milliseconds.

DelaySelectedItemAnimation (bool)
This property will reduce the minimum animation speed on selected item, causing it to go slower than normal. Setting this to True could help smooth out the animation on the selected item for 3D Models.

EasingFunction

This property allows you to override the Ease used on the wheel and set your own.

<Setter Property="EasingFunction">
   <Setter.Value>
      <ExponentialEase Exponent="7" EasingMode="EaseOut"/>
   </Setter.Value>
</Setter>

SelectedItemEasingFunction
This property allows you to set an EasingFunction to only the Selected Item within a FlowControl.

<Setter Property="SelectedItemEasingFunction">
   <Setter.Value>
      <CubicEase EasingMode="EaseInOut"/>
   </Setter.Value>
</Setter>

FlowImage (Introduced in 11.10)

This control allows you to draw an image related to a Game, Platform, Platform Category, or Playlist. It is used as a control inside of a FlowTemplate.

FlowImage has the following properties:

CreateFallbackImage (bool)
When this property is set to true the control will create a fallback image if the image requested is not found. The default value of this property is true.

HasImage (bool)
This property is set to true when the FlowImage control has found and loaded the requested image

ImageType (string)
This is the image group you are attempting to load an image from.

Here are all the possible valid values for platforms views: Backgrounds, Clear Logo, Fanart, Banner, Device

Here are all the possible valid values for games views: Backgrounds, Boxes, 3D Boxes, Carts, 3D Carts, Screenshots, Clear Logos, Steam Banners

Example of displaying a Clear Logo image inside of a Platform Wheel:

<coverFlow:FlowImage ImageType=”Clear Logo” />

As of LaunchBox 12.14 you can now point directly to any image type, instead of using the above image groupings. Image type names can be found in LaunchBox in Tools > Options > Media, under any of the priorities. Some examples: Screenshot - Gameplay, Steam Poster

ImagePath (string)
This allows you to point to a specific image file within your theme files.

Example of pointing to a background.jpg image that is located in your Theme > Images folder.

<coverFlow:FlowImage ImagePath=”LAUNCHBOX_THEME_FOLDER/Images/background.jpg” />

IsLoading (bool)
This read-only property is true when the control is attempting to cache or load an image. It is false if the control tried to load the image but found none.

LoadImage (bool)
This property tells the control whether or not to attempt to load an image. It is defaulted to True.

Stretch
This operates the same as the Stretch property of an Image control

StretchDirection
This operates the same as the StretchDirection property of an image control

UseImageCache (bool)
When this property is set to true load the full-sized image instead of using the image cache. This is defaulted to false. NOTE: This will increase load time since you are loading and rendering a larger image than if this is set to false.

FlowImage Outside of a Wheel

FlowImage comes with a number of benefits over the traditional <image> WPF element. There’s better caching and disposal logic specific for Big Box, which provides better general and long term performance in your Big Box theme. This means you could use more images on screen at once without overburdening your view. If you find that your View is a bit laggy, switching to FlowImage may be the answer.

Example displaying a background image based on the user’s Background image priority group for a game outside of a wheel:

<coverFlow:FlowImage DataContext="{Binding ActiveGame}" ImageType="Backgrounds" />

FlowBadge

The FlowBadge element allows theme creators to visually display contextual badges for games—like storefronts, control support, progress, and more—right within their Big Box layouts. It's fully compatible with bindings and triggers, making it easy to customize behavior and appearance.

BadgeName (string)
Specifies which badge to display. The badge appears only if the game supports it.

Available Values: Favorite, Broken, Portable, Hidden, Progress, HasSavedGame, HasSaveStates, Installed, NotInstalled, Documents, Multiple Discs, Multiple Versions, MAME High Scores, Achievements, Amazon, EpicGames, GOG, EA, Steam, Uplay, Xbox, Origin (deprecated), GamepadSupport, JoystickSupport, KeyboardSupport, LightGunSupport, MotionSupport, MouseSupport, PaddleSupport, RhythmSupport, TrackballSupport, VRSupport, WheelYokeSupport

HasBadge (bool)
Indicates whether a game has the specified badge. Perfect for use with visibility triggers and conditional UI logic.

This example shows the Steam badge if the currently selected game was imported from the Steam storefront.

<coverFlow:FlowBadge BadgeName="Steam" DataContext="{Binding ActiveGame}" />

FlowVideo (Introduced in 11.10)

This control allows you to render a video related to a Game, Platform, Platform Category, or Playlist. It is used primarily as a control inside of a FlowTemplate.

FlowVideo has the following properties:

AspectRatio4X3 (bool)
When this is set to true the video will be played in a 4:3 aspect ratio. If false it uses a 16:9. This is only used when the StretchVideo and CenterVideo properties are both set to false. The default value is false.

CenterVideo (bool)
Center the video in the control. The default value is true.

FallbackToDefault (bool)
If this is set to true, the control will attempt to load the default video for the Game, Platform, etc. in question if it fails to find a video of the VideoType specified. The default value is true.

HasVideo (bool)
This property is true if the control has found a video to load. NOTE - this property is true if there is a file to be played, regardless of the play state of the video.

PlayAudio (bool)
If true the video will be played with audio. This property does nothing if PlayVideo is false (no image is playing). The default value is true.

PlayVideo (bool)
When true the control will play the video it has found. The default value is false.

StretchVideo (bool)
When true the video stretches to fill the control. This setting overrides both the CenterVideo property as well as the Aspect4X3 property. The default value is false.

VideoType (string)
This tells the control which video type you would like to load. This is only used when loading video for a Game. The acceptable values are: Video Snap, Trailer, Theme Video, Recording

FlowModel (Introduced in 13.0)

This control allows you to render a 3D Box Model inside of Big Box on all the parent views. It can be used inside or outside of a FlowControl.

FlowMode has the following properties:

RotationAngle
This property will set the rotation value that the Model will take.

RotationAxis (x,y,z)
This property will set the axis point at which the RotationAngle should be applied.

CanManuallyRotate (bool)
When this property is true, the Model will be allowed to rotate using the Flip Box and Manual Rotate mappings.

FieldOfView
This property sets the field of view to the ViewPort of the 3D Box Model. This property will be ignored when used inside of a FlowControl (The Camera of the FlowControl will be used instead).

FlowModel specific Triggers can be used to help set the above properties in certain situations. These can only be used inside of the FlowControl.

IsItemSelected (bool)
Properties inside this trigger will only be in effect on the selected item within the FlowControl.

IsAboveSelected (bool)
Properties inside this trigger will only be in effect on items above the selected.

IsBelowSelected (bool)
Properties inside this trigger will only be in effect on items below the selected.

IsLeftOfSelected (bool)
Properties inside this trigger will only be in effect on items to the left of the selected.

IsRightOfSelected (bool)
Properties inside this trigger will only be in effect on items to the right of the selected.

NavigationHeld (bool)
Properties inside this trigger will only be in effect when the navigation speed has become 150ms or less (faster).

Example: FlowMode inside of a FlowControl

<coverFlow:FlowModel>
   <coverFlow:FlowModel.Style>
      <Style TargetType="{x:Type coverFlow:FlowModel}">
         <Setter Property="CanManuallyRotate" Value="False"/>
         <Setter Property="RotationAngle" Value="0"/>
         <Setter Property="RotationAxis" Value="0,1,0"/>
         <Style.Triggers>
            <MultiTrigger>
               <MultiTrigger.Conditions>
                  <Condition Property="IsItemSelected" Value="True"/>
                  <Condition Property="NavigationHeld" Value="True"/>
               </MultiTrigger.Conditions>
               <Setter Property="RotationAngle" Value="30"/>
               <Setter Property="RotationAxis" Value="0.2,1,0"/>
            </MultiTrigger>
            <MultiTrigger>
               <MultiTrigger.Conditions>
                  <Condition Property="IsItemSelected" Value="True"/>
                  <Condition Property="NavigationHeld" Value="False"/>
               </MultiTrigger.Conditions>
               <Setter Property="CanManuallyRotate" Value="True"/>
               <Setter Property="RotationAngle" Value="390"/>
               <Setter Property="RotationAxis" Value="0.3,1,0"/>
            </MultiTrigger>
            <Trigger Property="IsLeftOfSelected" Value="True">
               <Setter Property="RotationAngle" Value="20"/>
               <Setter Property="RotationAxis" Value="0,1,0"/>
            </Trigger>
            <Trigger Property="IsRightOfSelected" Value="True">
               <Setter Property="RotationAngle" Value="20"/>
               <Setter Property="RotationAxis" Value="0,1,0"/>
            </Trigger>
         </Style.Triggers>
      </Style>
   </coverFlow:FlowModel.Style>
</coverFlow:FlowModel>