第２７回 OnOff（トグル）できる画像付きボタンを作る

その前に、気がついたら前回作ったBindingGroupのところが動かなくなってしまいました。
今回うまくいかなくていろいろいぢったので、それがいけないのか、
前回のコードの時点でまずかったのか未調査です。
今回のコードでは元に戻しています（→Cancelボタンで抜けてもタイムラインへの変更は反映される）
修正したらまた記事載せます。
すみません。すみません。

今回は、お気に入り機能に対応します。
お気に入りボタンは、お気に入りにしていないときは☆、
お気に入りにしたら★の画像が表示されるボタンにします。
このボタンを押すことでON、OFFを切り替えます。

まず、画像のソースをSkinsフォルダのxamlに追加します。

 <BitmapImage x:Key="FavoriteImage" UriSource="icons/16x16/star_full.png"/>
 <BitmapImage x:Key="FavoriteEmptyImage" UriSource="icons/16x16/star_empty.png"/>

次に、新しくボタン用のクラスを作ります。
これは以前作った画像表示ボタンImageButtonの派生クラスとして作ります。

 /// <summary>
 /// On,Offの状態を保持して、状態にあわせた画像を保持するクラス
 /// </summary>
 class ToggleImageButton : ImageButton {
  private bool _isOn = false;
  private BitmapImage _alternativeImage;

  /// <summary>
  /// コンストラクタ
  /// </summary>
  /// <param name="description">ボタンの機能の簡潔な説明</param>
  /// <param name="command">ボタン押下時のコマンド</param>
  /// <param name="_onImage">Onの画像。Imageプロパティで取得する</param>
  /// <param name="_offImage">Offの画像。AlternativeImageプロパティで取得する</param>
  public ToggleImageButton(string description, ICommand command, BitmapImage _onImage, BitmapImage _offImage)
   : base(description, command, _onImage) {
   _alternativeImage = _offImage;
  }

  /// <summary>
  /// Offの時の画像
  /// </summary>
  public BitmapImage AlternativeImage {
   get { return _alternativeImage; }
  }

  public bool IsOn {
   get {
    return _isOn;
   }
   set {
    if (_isOn != value) {
     _isOn = value;
     OnPropertyChanged("IsOn");
    }
   }
  }
 }

簡単ですね。OnOffの状態と、Offの時の画像を持たせただけです。
このクラス自体はそこまで能動的に動きません。
あとIsOnの変更を伝えるために、もとのImageButtonクラスをViewModelBaseから派生させました。
（OnPropertyChangedを使うため）

TimelineItemViewModelにコマンドを持たせて、
FavoriteのAPIを叩く部分はModelに置きました。
これまでどおりのやり方でAPIを叩くだけなので、特に説明はしません。
実際のAPIのやりとりはFavoritesMethodクラスあたりを観てください。

あとはTimelineViewにDataTemplateを置きます。
通常時のImageをStyleのsetterで指定して、
IsOnがFalseの時のImageをTriggerの中のSetterで指定しています。

  <DataTemplate DataType="{x:Type util:ToggleImageButton}">
   <Button Command="{Binding Path=Command}" ToolTip="{Binding Path=Description}"
     Background="Transparent" BorderBrush="Transparent">
    <Image Width="16" Height="16">
     <Image.Style>
      <Style TargetType="{x:Type Image}">
       <Setter Property="Source" Value="{Binding Path=Image}"/>
       <Style.Triggers>
        <DataTrigger Binding="{Binding Path=IsOn}" Value="False">
         <Setter Property="Source" Value="{Binding Path=AlternativeImage}"/>
        </DataTrigger>
       </Style.Triggers>
      </Style>
     </Image.Style>
    </Image>
   </Button>
  </DataTemplate>

今回のソースコード
http://wtwitter.codeplex.com/SourceControl/changeset/view/43483