Tuesday, March 6, 2012

Fixing the WPF Accordion

image

One of the three new controls included in the February 2010 release of the WPF toolkit is the Accordion control. This control is similar to a collection of standard Expander controls with the behavior that only one item is expanded at a time. Diederik Krols wrote an excellent tutorial in a posting entitled How to play the Accordion. The Accordion is an excellent alternative to multiple tabs on a TabControl.

The purpose of this posting is to describe a workaround for instances when the contents of an AccordionItem is larger than the space provided. For example, if the sample app used in the posting was reduced in height then you would see the following. That is, no scrollbars.

image

To add scrollbars so that the contents of each AccordionItem is scrollable we need to change the default alignment properties and add ScrollViewers as below.

<Window x:Class="WpfApplication10.MainWindow"

        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

        xmlns:layoutToolkit="clr-namespace:System.Windows.Controls;

                             assembly=System.Windows.Controls.Layout.Toolkit"

        Title="MainWindow"

        Height="300"

        Width="400">

    <Window.Resources>

        <Style TargetType="layoutToolkit:AccordionItem">

            <Setter Property="HorizontalContentAlignment" Value="Stretch"/>

            <Setter Property="VerticalContentAlignment" Value="Stretch"/>

        </Style>

        <Style TargetType="Button">

            <Setter Property="HorizontalAlignment" Value="Left"/>

        </Style>

    </Window.Resources>

    <Grid>

        <layoutToolkit:Accordion VerticalAlignment="Stretch"  Width="200">

            <layoutToolkit:AccordionItem Header="Mail">

                <ScrollViewer VerticalScrollBarVisibility="Auto">

                    <StackPanel Orientation="Vertical" HorizontalAlignment="Stretch">

                        <Button Content="Button 1" Width="75" />

                        <Button Content="Button 2" Width="75" />

                        <Button Content="Button 3" Width="75" />

                        <Button Content="Button 4" Width="75" />

                        <Button Content="Button 5" Width="75" />

                        <Button Content="Button 6" Width="75" />

                        <Button Content="Button 7" Width="75" />

                    </StackPanel>

                </ScrollViewer>

            </layoutToolkit:AccordionItem>

            <layoutToolkit:AccordionItem Header="Calendar">

                <ScrollViewer VerticalScrollBarVisibility="Auto">

                    <StackPanel Orientation="Vertical" HorizontalAlignment="Stretch">

                        <Button Content="Button 1" Width="75" />

                        <Button Content="Button 2" Width="75" />

                        <Button Content="Button 3" Width="75" />

                        <Button Content="Button 4" Width="75" />

                        <Button Content="Button 5" Width="75" />

                        <Button Content="Button 6" Width="75" />

                        <Button Content="Button 7" Width="75" />

                    </StackPanel>

                </ScrollViewer>

            </layoutToolkit:AccordionItem>

            <layoutToolkit:AccordionItem Header="Contacts">

                <ScrollViewer VerticalScrollBarVisibility="Auto">

                    <StackPanel Orientation="Vertical" HorizontalAlignment="Stretch">

                        <Button Content="Button 1" Width="75" />

                        <Button Content="Button 2" Width="75" />

                        <Button Content="Button 3" Width="75" />

                        <Button Content="Button 4" Width="75" />

                        <Button Content="Button 5" Width="75" />

                        <Button Content="Button 6" Width="75" />

                        <Button Content="Button 7" Width="75" />

                    </StackPanel>

                </ScrollViewer>

            </layoutToolkit:AccordionItem>

            <layoutToolkit:AccordionItem Header="Tasks">

                <ScrollViewer VerticalScrollBarVisibility="Auto">

                    <StackPanel Orientation="Vertical" HorizontalAlignment="Stretch">

                        <Button Content="Button 1" Width="75" />

                        <Button Content="Button 2" Width="75" />

                        <Button Content="Button 3" Width="75" />

                        <Button Content="Button 4" Width="75" />

                        <Button Content="Button 5" Width="75" />

                        <Button Content="Button 6" Width="75" />

                        <Button Content="Button 7" Width="75" />

                    </StackPanel>

                </ScrollViewer>

            </layoutToolkit:AccordionItem>

        </layoutToolkit:Accordion>

    </Grid>

</Window>

 

 Now, the contents portion of the AccordionItem displays a scrollbar whenever needed as shown below.

image

The blue background is an unfortunately bug in the WPF Toolkit as discussed here.

Friday, March 2, 2012

Augmented Reality and GIS

Over the past few years we have seen two important trends, the consumerization of GIS technology and the proliferation of affordable smart phones. These trends converge to provide geographically-enabled applications for mobile devices in the consumer market. Consumers can get shopping, weather or routing information with respect to their current location and more importantly share that information with other devices.

Application developers have access to device peripherals like a digital compass, accelerometer, assisted GPS and camera. Developers can use these peripherals to transform a mobile phone into a spatially enabled (or “geographically-aware”) sensor. Whether photographing oil spill damage or recording your mountain bike trail, the smart phone is essentially a real-time GIS data capture device.

Augmented reality (AR) is just one technique that can leveraged by GIS developers on mobile devices. AR involves the overlaying of graphics on real-time georeferenced video feeds. App developers like LAYAR use AR to reveal the locations of nearby restaurants and hotels but AR can and should do a lot more. Smart phones could be used to view subterranean infrastructure such as electrical transmission lines or water reticulation pipes. AR could be used by firemen to visualize the three dimensional route in and around buildings. The applications are endless.

To conclude, the practical usefulness of AR can only be achieved with the application of real-time spatial analysis. What if there was as AR app that could highlight diseased grass or display routes to family members in a crowded stadiums? GIS can “add value” to augmented reality.