Vertical-oriented, single-column user interface design has become ubiquitous for mobile device support and mobile web application layouts. But what about horizontal-based layouts? In this post, I make the case for a dedicated horizontal layout option that provides greater usability than the automatic behavior of a fluidly-resizing vertical layout.
Figure:Switching the interface from vertical-orientation to horizontal-orientation via menu shortcut.
In desktop and certain tablet environments, users typically have great flexibility in their ability to position individual windows and applications; for example, a user might have a custom workflow that entails multiple windows positioned at specific sizes. To better accommodate the workflow preferences of users, application layouts that support both vertical and horizontal fluidity enable users to create their "workflow-stack" based on workspace height and width. In the example included, I show an application that supports an initial vertical layout, but includes a menu option that automatically changes the interface to a horizontal layout; this menu option can be saved at the application-configuration level to "remember" the layout for subsequent application sessions.
<ScrollViewer Grid.Row="1">
<ScrollViewer.Style>
<Style TargetType="{x:Type ScrollViewer}">
<Setter Property="HorizontalScrollBarVisibility" Value="Disabled"/>
<Setter Property="VerticalScrollBarVisibility" Value="Auto"/>
<Style.Triggers>
<DataTrigger Binding="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type local:ColorSelector}}, Path=ApplicationOrientation, Mode=OneWay}" Value="true">
<Setter Property="HorizontalScrollBarVisibility" Value="Auto"/>
<Setter Property="VerticalScrollBarVisibility" Value="Disabled"/>
</DataTrigger>
</Style.Triggers>
</Style>
</ScrollViewer.Style>
...
</ScrollViewer>Source:Themes/Generic.xaml
public static readonly DependencyProperty ApplicationOrientationProperty =
DependencyProperty.Register(nameof(ApplicationOrientation), typeof(bool), typeof(ColorSelector), new PropertyMetadata(false, new PropertyChangedCallback(ApplicationOrientationChanged)));
public bool ApplicationOrientation
{
get { return (bool)GetValue(ApplicationOrientationProperty); }
set { SetValue(ApplicationOrientationProperty, value); }
}Source:ColorSelector.cs
The result is a more flexible user experience that enables additional workflow possibilities.