How To Disable AppBarButton

Topics: Actions & Coroutines, Conventions, Getting Started
Oct 2, 2011 at 10:02 PM
Edited Oct 2, 2011 at 10:04 PM

I'm using a CM AppBarButton and aren't able to disable it.

I tried naming the button AddButton and created a property called CanAddButton but this does not work.

I Added an IsEnabled binding but this threw am XmlParseException on set.

What is the recommended way to do this?

Cheers

Steve

Oct 2, 2011 at 10:28 PM
Edited Oct 2, 2011 at 10:31 PM

CanAddButton is a property but you have to set it to true or false based on something in your app... For me I use the selected index to enable/disable a button and depending on the index it will toggle one of my appbarbuttons to disabled... So if I am index 1 then my sync button is enabled

public bool CanAddButton {

   get { return SelectedPivotIndex == 1;}

}

then in my SelectedPivotIndex property I do a notification of the change..

public in SelectedPivotIndex{
  get{ return _selectedPivotIndex;}
  set{
         _selectedPivotIndex = value;
         NotifyOfPropertyChange(() => SelectedPivotIndex);
         NotifyOfPropertyChange(() => CanAddButton);
   }
}

the ending premise is that you have to throw a notification of the change so the CanAddButton logic kicks in...  Because the appbar isn't a silverlight control but a native (no dependency properties) one you can't bind to it, hence cm and other frameworks have derived their own implementation of buttons/menus to be able to enable/disable and bind, by exposing dependency properties in accordance to the interfaces for the buttons/menus.

Oct 2, 2011 at 11:05 PM

I do it in a similar way. I have a CanAddButton property, I pass a bool parameter to the view that updates CanAddButton and I call NotifyOfPropertyChange() in the view OnActivate.

The main question is how do you bind the view property to the button IsEnabled?

I have tried using convention by naming the button AddButton - didn't work.

I have tried binding directly to the property - I get an XmlParseException.

How did you get the binding to work?

Cheers

Steve

Oct 3, 2011 at 4:14 AM

<cm:AppBarButton Message="ShowSync" Text="sync" IconUri ="/Resources/Images/appbar.sync.rest.png" />

You can't directly bind IsEnabled as I explained earlier, it's not a dependency enabled control therefore you can't bind it directly.  So when CM was created it has an implementation of the Buttons/Menus that are derived from the packaged buttons/menus so as to mimic them via code but with added dependency properties so as to be able to setup button / menu usage the CM way.  So, as long as the Message property is populated with a method name, CM will locate the name and match the signature in the ViewModel. 

So I have a method in my ViewModel callsed ShowSync, it's a public void method.

I also have a public bool property named CanShowSync{}  it is based on the PivotIndex as explained above.  When appropriate I call NotifyOfPropertyChange(()=>CanShowSync), CanShowSync is checked to see if its true/false, this thru EventTrigger in System.Windows.Interactivity (CM hides EventTrigger, insolates us) will enable/disable the button for you.

And to check what is the file structure you are currently using for your project, you might be experiencing issues related to ViewModel to View matching.

Oct 3, 2011 at 7:16 PM

Hi

Got it working now. Thanks for your help.

I was trying to treat it like a normal button by naming it AddJob and expecting it to find CanAddJob.

As I figured out from your example above you don't use an x:Name here but the Message points to the guard.

e.g.

<cal:AppBarButton
    IconUri="/Images/add.png"
    Text="add job"
    Message="AddJob" />

public void AddJob() {}
public bool CanAddJob { getset; }

Cheers

Steve


Oct 3, 2011 at 10:05 PM

no problem... glad you got it working.