Archive

Archive for December, 2009

Terrible UX people are creating in Silverlight just because they can

December 9, 2009 1 comment

After reading some really ridiculous posts of people doing stuff with Silverlight that you really shouldn’t do, I thought I’d make a post of my own, showing how you can display progress bars inside drop down lists that are nodes on a treeview that auto-expand on mouseover just like I tweeted about. I think doing this is a terrible idea, but since every other day I see a blog posting on how to do something in Silverlight that makes for a very bad user experience, I thought I would contribute an example of my own. I hope you enjoy.

I wish I could upload my Silverlight control to WordPress so you could see it running live. Maybe I’ll find someplace else to host it. In the meantime, you can probably imagine how atrocious this looks, but maybe you’re also amazed by how easy it is and how clean the markup can be when making something that looks and behaves so terribly.

Too add to the fun, the source code in this blog post is spilling over the margins.

<usercontrol xmlns:toolkit="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls" x:class="TerribleUX.MainPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:ignorable="d" d:designheight="300" d:designwidth="400">
    <usercontrol.resources>
        <style targettype="ProgressBar" x:key="pbStyle">
            <Setter Property="Minimum" Value="0" ></Setter>
            <Setter Property="Maximum" Value="100" ></Setter>
            <Setter Property="Height" Value="30" ></Setter>
            <Setter Property="Width" Value="125" ></Setter>
            <Setter Property="Minimum" Value="0" ></Setter>
        </style>
        <style targettype="ComboBox" x:key="cbStyle">
            <Setter Property="Height" Value="30" ></Setter>
            <Setter Property="Width" Value="130" ></Setter>
        </style>
        <datatemplate x:key="tvDataTemplate">
            <combobox mouseenter="ComboBox_MouseEnter" style="{StaticResource cbStyle}">
                <comboboxitem>
                    <progressbar value="25" style="{StaticResource pbStyle}"></progressbar>
                </comboboxitem>
                <comboboxitem>
                    <progressbar value="65" style="{StaticResource pbStyle}"></progressbar>
                </comboboxitem>
                <comboboxitem>
                    <progressbar value="35" style="{StaticResource pbStyle}"></progressbar>
                </comboboxitem>
            </combobox>
        </datatemplate>
    </usercontrol.resources>
    <grid x:name="LayoutRoot" background="White">
        <toolkit:treeview>
            <toolkit:treeviewitem mouseenter="TreeViewItem_MouseEnter" headertemplate="{StaticResource tvDataTemplate}">
                <toolkit:treeviewitem mouseenter="TreeViewItem_MouseEnter" headertemplate="{StaticResource tvDataTemplate}">
                <toolkit:treeviewitem mouseenter="TreeViewItem_MouseEnter" headertemplate="{StaticResource tvDataTemplate}">
                <toolkit:treeviewitem mouseenter="TreeViewItem_MouseEnter" headertemplate="{StaticResource tvDataTemplate}">
                    <toolkit:treeviewitem mouseenter="TreeViewItem_MouseEnter" headertemplate="{StaticResource tvDataTemplate}">
                    <toolkit:treeviewitem mouseenter="TreeViewItem_MouseEnter" headertemplate="{StaticResource tvDataTemplate}">
                </toolkit:treeviewitem>
            </toolkit:treeviewitem>
            <toolkit:treeviewitem mouseenter="TreeViewItem_MouseEnter" headertemplate="{StaticResource tvDataTemplate}">
                <toolkit:treeviewitem mouseenter="TreeViewItem_MouseEnter" headertemplate="{StaticResource tvDataTemplate}">
            </toolkit:treeviewitem>
            <toolkit:treeviewitem mouseenter="TreeViewItem_MouseEnter" headertemplate="{StaticResource tvDataTemplate}">
                <toolkit:treeviewitem mouseenter="TreeViewItem_MouseEnter" headertemplate="{StaticResource tvDataTemplate}">
                <toolkit:treeviewitem mouseenter="TreeViewItem_MouseEnter" headertemplate="{StaticResource tvDataTemplate}">
                <toolkit:treeviewitem mouseenter="TreeViewItem_MouseEnter" headertemplate="{StaticResource tvDataTemplate}">
            </toolkit:treeviewitem>
        </toolkit:treeviewitem></toolkit:treeviewitem></toolkit:treeviewitem></toolkit:treeviewitem></toolkit:treeviewitem></toolkit:treeviewitem></toolkit:treeviewitem></toolkit:treeviewitem></toolkit:treeview>
    </grid>
</usercontrol>

And here are the event handlers:

private void ComboBox_MouseEnter(object sender, MouseEventArgs e)
{
    ComboBox cb = sender as ComboBox;
    if(cb != null)
        cb.IsDropDownOpen = true;
}

private void TreeViewItem_MouseEnter(object sender, MouseEventArgs e)
{
    TreeViewItem tvi = sender as TreeViewItem;
    if (tvi != null)
        tvi.IsExpanded = true;
}
Categories: Uncategorized