Home > Uncategorized > Terrible UX people are creating in Silverlight just because they can

Terrible UX people are creating in Silverlight just because they can

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;
}
Advertisements
Categories: Uncategorized
  1. Tom Winans
    January 15, 2011 at 10:31 pm

    Cutting your teeth in a technology likely means silly things will be done en route to brilliance. Give the technology and the folks a chance …

    As a Silverlight newbie, I can attest to the fact that I have undersold Silverlight’s capabilities … I was trying to be smart about UIs (as smart as a middleware guy can be … ;-)), and have I come to realize what I don’t yet know … the Silverlight guys have done some stellar work … some of it you can see, and a lot of stuff underneath that you don’t see without looking a lot more closely …

    Best,
    Tom

  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: