A MenuKiller Sample Application

by Christoph Menge in Software

Well, when you start with Physics, many people will tell you “It’s really not as hard as you might think; yet, you will need a very high level of frustration tolerance.”

I believe I do have the latter, but this control drove me nuts. So I stripped out all complexity I could, hacked a few things and now I have a running, though not very beatiful solution.

Check it out here (no sources, too ugly… but soon)
ZIP File – Copy Deployment (1 MB)
RAR File – Copy Deployment (1 MB)
EXE File – ClickOnce Deployment (0,5 MB)

Even in this simple app, some questions arise:

  • When the “add to” branch is opened, can we still click on properties (which have low opacity now)? This becomes even more interesting with many expandable items on the same level…
  • When closing the root button, shall the whole tree collapse, or behave as it does now?
  • If a MenuKillerItem has a Command and children, do we execute the command, or just expand it? (This is, however, going to change anyway).

The XAML used

<Window x:Class="MenuKillerApp.Window3"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:mk="clr-namespace:MenuKiller;assembly=MenuKiller"
  Title="Menu Killer" Height="640" Width="640">
  <Window.CommandBindings>
    <CommandBinding Command="ApplicationCommands.Close"
    CanExecute="AlwaysCanExecute"
    Executed="ApplicationCommandsClose" />
  </Window.CommandBindings>
  <Grid>
    <Grid.ColumnDefinitions>
      <ColumnDefinition />
      <ColumnDefinition Width="200"/>
    </Grid.ColumnDefinitions>

    <mk:MenuKiller  Margin="2,2,2,2" x:Name="MKRoot"
                          HoverToolTip="Default Value">
      <mk:MenuKillerItem RootToolTip="User">
        <mk:MenuKillerItem.Header>
          <Grid>
            <Image Width="256"
            Source="/MenuKillerApp;component/Resources/Icons/User.png"/>
          </Grid>
        </mk:MenuKillerItem.Header>

        <mk:MenuKillerItem RootToolTip="Properties"
        	      Command="ApplicationCommands.Close">
          <mk:MenuKillerItem.Header>
            <Image Width="128"
             Source="/MenuKillerApp;component/Resources/Images/Properties.png"/>
          </mk:MenuKillerItem.Header>
        </mk:MenuKillerItem>

        <mk:MenuKillerItem  RootToolTip="Add To"
        	      Command="ApplicationCommands.Close">
          <mk:MenuKillerItem.Header>
            <Image Width="128"
             Source="/MenuKillerApp;component/Resources/Images/Symbol-Add.png"/>
          </mk:MenuKillerItem.Header>

          <mk:MenuKillerItem RootToolTip="Group"
        	      Command="ApplicationCommands.Close">
            <mk:MenuKillerItem.Header>
              <Image Width="64"
               Source="/MenuKillerApp;component/Resources/Images/Group.png"/>
            </mk:MenuKillerItem.Header>
          </mk:MenuKillerItem>

          <mk:MenuKillerItem RootToolTip="Secure Group"
        	      Command="ApplicationCommands.Close">
            <mk:MenuKillerItem.Header>
              <Image Width="64"
               Source="/MenuKillerApp;component/Resources/Images/SecureGroup.png"/>
            </mk:MenuKillerItem.Header>
          </mk:MenuKillerItem>

          <mk:MenuKillerItem RootToolTip="Network"
        	      Command="ApplicationCommands.Close">
            <mk:MenuKillerItem.Header>
              <Image Width="64" Source="/MenuKillerApp;component/Resources/Images/Network.png"/>
            </mk:MenuKillerItem.Header>
          </mk:MenuKillerItem>
        </mk:MenuKillerItem>

        <mk:MenuKillerItem RootToolTip="Delete"
        	      Command="ApplicationCommands.Close">
          <mk:MenuKillerItem.Header>
            <Image Width="128"
            Source="/MenuKillerApp;component/Resources/Images/Symbol-Delete.png"/>
          </mk:MenuKillerItem.Header>
        </mk:MenuKillerItem>
      </mk:MenuKillerItem>
    </mk:MenuKiller>

    <TextBox Text="{Binding Path=HoverToolTip, ElementName=MKRoot, Mode=OneWay}"
    				 Width="128" HorizontalAlignment="Left"
             TextAlignment="Center" VerticalAlignment="Top"
             Height="20px" BorderThickness="0px" IsHitTestVisible="False"
             Background="Transparent" Margin="64, 192, 0,0"/>

    <GridSplitter Grid.Column="1" VerticalAlignment="Stretch"
                  HorizontalAlignment="Left"/>

    <ScrollViewer Grid.Column="1">
      <TextBox HorizontalAlignment="Stretch" VerticalAlignment="Stretch"
      			Background="CornflowerBlue" Name="BigTextBox" AcceptsReturn="True"
      			IsReadOnly="True" ScrollViewer.HorizontalScrollBarVisibility="Disabled"
      			ScrollViewer.VerticalScrollBarVisibility="Auto"/>
    </ScrollViewer>
  </Grid>
</Window>

There are a number of oddities in the XAML:

  • The TextBox used for the tool tip is not in the MenuKillerItem. The reason is simply the Opacity… From within the code, I cannot make any assumptions about the Content of the MenuKillerItem.Header. The other option: introducing PART_ToolTipBox. That, however, severely limits the control user’s options.
  • The MenuKillerItems have their own Command and implement ICommandSource. I will probably change that, since the toggle is now encapsulated in a custom command.
  • The ApplicationCommands.Close is heavily abused…

Have fun

Post to Twitter Post to Delicious Post to Digg Post to Facebook

Related posts:

  1. The MenuKiller Control – Differentiated UX
  2. A MenuKiller Control – Draft
  3. Applying ItemContainerStyle Recursively
  4. LESS Grid CSS for Fluid Width Grids

Tags: , , ,

← Previous

Next →

Leave a Comment