One of the nice features in WordPress is that I can see what users search for on my blog. One of the searches last week was “xaml enable button after listpanel currentitemchanged”. In this case I think I know what the reader wanted to do so this post is about how to control IsEnabled on a button depending on the current item changed event.

I know how to do this in 10.0.0 and later. I might know how to do it before that but it would involve a converter and I’m not sure if we do have an object to bool converter (in 9.1.2).

In 10.0.0 we added support for a generic property setter using the mashup event framework. The example can be found in the Designer under Help -> Common -> Property Setter.

In my example I’ll add a M3 List, set up the start-up event and add a button that can be used to open another mashup or another program using a bookmark. But the button should not be enabled unless there is a CurrentItem selected in the list, probably becuase you want to get a value from the list and pass it on to whatever program or Url you would like to open.

The M3List panel exposes a CurrentItem property so I might be able to use that with a converter but I’ll show you how to to it with mashups events since that is easier to understand and will work in other scenarios with other mashup controls that has the CurrentItemChanged Event.

The result looks like this:

This is the xaml for the list and the button with the button being disabled until an item is selected in the list.

<Grid xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:ui="clr-namespace:Mango.UI.Controls;assembly=Mango.UI" xmlns:mashup="clr-namespace:Mango.UI.Services.Mashup;assembly=Mango.UI" xmlns:m3="clr-namespace:MForms.Mashup;assembly=MForms">
  <Grid.Resources>
  </Grid.Resources>

  <Grid.ColumnDefinitions>
    <ColumnDefinition Width="*" />
  </Grid.ColumnDefinitions>
  <Grid.RowDefinitions>
    <RowDefinition Height="*" />
    <RowDefinition Height="Auto" />
    <RowDefinition Height="Auto" />
    <RowDefinition Height="Auto" />
  </Grid.RowDefinitions>
  <m3:ListPanel Name="Customers" Margin="8">
    <m3:ListPanel.Events>
      <mashup:Events>
        <mashup:Event SourceEventName="Startup">
          <mashup:Parameter TargetKey="OKCONO" />
          <mashup:Parameter TargetKey="OKCUNO" />
        </mashup:Event>
        <mashup:Event SourceName="Customers" SourceEventName="CurrentItemChanged" Target="{mashup:SetProperty ElementName=MyButton, Path=IsEnabled}">
          <mashup:Parameter TargetKey="Value" Value="True" />
        </mashup:Event>
        </mashup:Events>
    </m3:ListPanel.Events>
    <m3:ListPanel.Bookmark>
      <m3:Bookmark Program="CRS610" Table="OCUSMA" KeyNames="OKCONO,OKCUNO" />
    </m3:ListPanel.Bookmark>
  </m3:ListPanel>
  <Button Grid.Row="1" Margin="8" Name="MyButton" IsEnabled="False" Width="150">Open Another Program</Button>
  <Button Grid.Row="2" Margin="8" Name="RefreshButton" Content="Refresh List">
    <Button.CommandParameter>
      <mashup:Events>
        <mashup:Event TargetName="Customers" SourceEventName="Click" TargetEventName="List" />
      </mashup:Events>
    </Button.CommandParameter>
  </Button>
  <ui:StatusBar Name="StatusBar" Grid.Row="3" Grid.Column="0" />
</Grid>

To start with the button is disabled. I use the property setter below to set the property (IsEnabled) to True on CurrentItemChanged.

<mashup:Event SourceName="Customers" SourceEventName="CurrentItemChanged" Target="{mashup:SetProperty ElementName=MyButton, Path=IsEnabled}">
   <mashup:Parameter TargetKey="Value" Value="True" />
</mashup:Event>

This works fine it the lists only loads once but if it is reloaded the row will get unselected which means that we need to set the “IsEnabled” to false as well. You can verify this by testing the XAML and pressing the refresh list. The Button will still be enabled and this is not what we want.

The solution is to use the Running event of the list. Before the data is loaded it will always go though the Running state.
We add another event like this:

<mashup:Event SourceName="Customers" SourceEventName="Running" Target="{mashup:SetProperty ElementName=MyButton, Path=IsEnabled}">
  <mashup:Parameter TargetKey="Value" Value="False" />
</mashup:Event>

What the event framkework will do is that when the Running event occurrs it will take the MyButtonElement and set the property IsEnabled to False.

Easy when you know the syntax? Now you can apply this to all kinds of properties!

Here is the final XAML with all events, except what will actually happen when you press the button :-). You can use the LinkUri on the Click event to launch anything you want.

<Grid xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:ui="clr-namespace:Mango.UI.Controls;assembly=Mango.UI" xmlns:mashup="clr-namespace:Mango.UI.Services.Mashup;assembly=Mango.UI" xmlns:m3="clr-namespace:MForms.Mashup;assembly=MForms">
  <Grid.Resources>
  </Grid.Resources>

  <Grid.ColumnDefinitions>
    <ColumnDefinition Width="*" />
  </Grid.ColumnDefinitions>
  <Grid.RowDefinitions>
    <RowDefinition Height="*" />
    <RowDefinition Height="Auto" />
    <RowDefinition Height="Auto" />
    <RowDefinition Height="Auto" />
  </Grid.RowDefinitions>
  <m3:ListPanel Name="Customers" Margin="8">
    <m3:ListPanel.Events>
      <mashup:Events>
        <mashup:Event SourceEventName="Startup">
          <mashup:Parameter TargetKey="OKCONO" />
          <mashup:Parameter TargetKey="OKCUNO" />
        </mashup:Event>
        <mashup:Event SourceName="Customers" SourceEventName="CurrentItemChanged" Target="{mashup:SetProperty ElementName=MyButton, Path=IsEnabled}">
          <mashup:Parameter TargetKey="Value" Value="True" />
        </mashup:Event>
        <mashup:Event SourceName="Customers" SourceEventName="Running" Target="{mashup:SetProperty ElementName=MyButton, Path=IsEnabled}">
          <mashup:Parameter TargetKey="Value" Value="False" />
        </mashup:Event>
      </mashup:Events>
    </m3:ListPanel.Events>
    <m3:ListPanel.Bookmark>
      <m3:Bookmark Program="CRS610" Table="OCUSMA" KeyNames="OKCONO,OKCUNO" />
    </m3:ListPanel.Bookmark>
  </m3:ListPanel>
  <Button Grid.Row="1" Margin="8" Name="MyButton" IsEnabled="False" Width="150">Open Another Program</Button>
  <Button Grid.Row="2" Margin="8" Name="RefreshButton" Content="Refresh List">
    <Button.CommandParameter>
      <mashup:Events>
        <mashup:Event TargetName="Customers" SourceEventName="Click" TargetEventName="List" />
      </mashup:Events>
    </Button.CommandParameter>
  </Button>
  <ui:StatusBar Name="StatusBar" Grid.Row="3" Grid.Column="0" />
</Grid>