Windows Phone ControlTemplate＆Converter：アセンブリ内のイメージリソースからBitmapImageをロードする際の問題

Question

これは基本的に私のprevious質問に対するフォローアップです。 私はテンプレートを使ってこの作業をすることができましたが、私はそれを少し一般的なものにしたいので、全面的にコードを繰り返す必要はありません。

作業バージョン（ハードコード）

<UserControl.Resources> 
     <ControlTemplate x:Key="TrebleCheckboxImageTemplate" TargetType="CheckBox"> 
      <Image x:Name="imgTreble" MinWidth="100" Source="Images/treble_checked.png"> 
       <VisualStateManager.VisualStateGroups> 
        <VisualStateGroup x:Name="CheckStates"> 
         <VisualState x:Name="Checked"> 
          <Storyboard> 
            <ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="imgTreble" Storyboard.TargetProperty="(Image.Source)"> 
             <DiscreteObjectKeyFrame KeyTime="00:00:00"> 
               <DiscreteObjectKeyFrame.Value> 
                 <BitmapImage UriSource="Images/treble_checked.png" /> 
               </DiscreteObjectKeyFrame.Value> 
             </DiscreteObjectKeyFrame> 
            </ObjectAnimationUsingKeyFrames> 
           </Storyboard> 
         </VisualState> 
         <VisualState x:Name="Unchecked"> 
          <Storyboard> 
           <ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="imgTreble" Storyboard.TargetProperty="(Image.Source)"> 
            <DiscreteObjectKeyFrame KeyTime="00:00:00"> 
              <DiscreteObjectKeyFrame.Value> 
                <BitmapImage UriSource="Images/treble_unchecked.png" /> 
              </DiscreteObjectKeyFrame.Value> 
            </DiscreteObjectKeyFrame> 
            </ObjectAnimationUsingKeyFrames> 
          </Storyboard>       
         </VisualState> 
         <VisualState x:Name="Indeterminate"/> 
        </VisualStateGroup> 
       </VisualStateManager.VisualStateGroups> 
      </Image> 

     </ControlTemplate> 
    </UserControl.Resources> 


<StackPanel x:Name="LayoutRoot" Background="{StaticResource PhoneForegroundBrush}" Orientation="Horizontal"> 
     <CheckBox Height="72" HorizontalAlignment="Left" Background="White" VerticalAlignment="Top" Template="{StaticResource TrebleCheckboxImageTemplate}" Margin="0,0,10,0" > 
      <Custom:Interaction.Triggers> 
       <Custom:EventTrigger EventName="Click"> 
        <GalaSoft_MvvmLight_Command:EventToCommand CommandParameter="{Binding RelativeSource={RelativeSource Self}, Path=IsChecked}" Command="{Binding TreblePressedCommand}"/> 
       </Custom:EventTrigger> 
      </Custom:Interaction.Triggers> 
     </CheckBox> 

    </StackPanel> 

もちろん、画像パスはハードコードされています。だから、私はそれを一般的なものにしたかったので、チェックボックスをインスタンス化して、イメージであることを伝え、テンプレートはすべて同じものにすることができました。

IがImageCheckboxコントロールクラスを作成した：

public class ImageCheckbox : CheckBox 
    { 

     /// <summary> 
     /// The <see cref="CheckedImagePath" /> dependency property's name. 
     /// </summary> 
     public const string CheckedImagePathPropertyName = "CheckedImagePath"; 

     /// <summary> 
     /// Gets or sets the value of the <see cref="CheckedImagePath" /> 
     /// property. This is a dependency property. 
     /// </summary> 
     public string CheckedImagePath 
     { 
      get 
      { 
       return (string)GetValue(CheckedImagePathProperty); 
      } 
      set 
      { 
       SetValue(CheckedImagePathProperty, value); 
      } 
     } 

     /// <summary> 
     /// Identifies the <see cref="CheckedImagePath" /> dependency property. 
     /// </summary> 
     public static readonly DependencyProperty CheckedImagePathProperty = DependencyProperty.Register(
      CheckedImagePathPropertyName, 
      typeof(string), 
      typeof(ImageCheckbox), 
      new PropertyMetadata(null)); 


     /// <summary> 
     /// The <see cref="UnCheckedImagePath" /> dependency property's name. 
     /// </summary> 
     public const string UnCheckedImagePathPropertyName = "UnCheckedImagePath"; 

     /// <summary> 
     /// Gets or sets the value of the <see cref="UnCheckedImagePath" /> 
     /// property. This is a dependency property. 
     /// </summary> 
     public string UnCheckedImagePath 
     { 
      get 
      { 
       return (string)GetValue(UnCheckedImagePathProperty); 
      } 
      set 
      { 
       SetValue(UnCheckedImagePathProperty, value); 
      } 
     } 

     /// <summary> 
     /// Identifies the <see cref="UnCheckedImagePath" /> dependency property. 
     /// </summary> 
     public static readonly DependencyProperty UnCheckedImagePathProperty = DependencyProperty.Register(
      UnCheckedImagePathPropertyName, 
      typeof(string), 
      typeof(ImageCheckbox), 
      new PropertyMetadata(null)); 


    } 

（私は文字列がイメージソースのURIであると変換しなければならない問題に遭遇したので）私は

public class StringToImageConverter : IValueConverter 
    { 
     public object Convert(object value, Type targetType, object parameter, CultureInfo culture) 
     { 
      if (value == null) 
      { 
       return null; 
      } 

      if (!UriParser.IsKnownScheme("pack")) 
      { 
       UriParser.Register(new GenericUriParser 
        (GenericUriParserOptions.GenericAuthority), "pack", -1); 
      } 

      if (value is string) 
      { 
       var image = new BitmapImage(); 
       image.UriSource = new Uri(String.Format(@"pack://application:,,/Images/{0}", value as string)); 
       //image.UriSource = new Uri(String.Format(@"pack://application:,,,/Adagio.Presentation;component/Images/{0}", value as string),UriKind.Absolute); 
       image.ImageFailed += new EventHandler<System.Windows.ExceptionRoutedEventArgs>(image_ImageFailed); 
       image.ImageOpened += new EventHandler<System.Windows.RoutedEventArgs>(image_ImageOpened); 
       return image; 
      } 

      if (value is Uri) 
      { 
       var bi = new BitmapImage {UriSource = (Uri) value}; 
       return bi; 
      } 
      return null; 
     } 

     void image_ImageOpened(object sender, System.Windows.RoutedEventArgs e) 
     { 
      throw new NotImplementedException(); 
     } 

     void image_ImageFailed(object sender, System.Windows.ExceptionRoutedEventArgs e) 
     { 
      throw new NotImplementedException(); 
     } 

     public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture) 
     { 
      throw new NotImplementedException(); 
     } 
    } 

をコンバータを作成あなたは、その後 ...それらのどれも動作しない、コンバータは異なる組み合わせの何千もの試みがなされていることを新しいXAMLを見ることができます

：

<ControlTemplate x:Key="CheckboxImageTemplate" TargetType="Controls:ImageCheckbox"> 
      <Image x:Name="imgForTemplate" MinWidth="100" Source="{Binding RelativeSource={RelativeSource TemplatedParent},Path=CheckedImagePath, Converter={StaticResource stringToImageConverter}}"> 
       <!-- 
       <VisualStateManager.VisualStateGroups> 
        <VisualStateGroup x:Name="CheckStates"> 
         <VisualState x:Name="Checked"> 
          <Storyboard> 
           <ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="imgForTemplate" Storyboard.TargetProperty="(Image.Source)"> 
            <DiscreteObjectKeyFrame KeyTime="00:00:00"> 
             <DiscreteObjectKeyFrame.Value> 
              <BitmapImage UriSource="{Binding RelativeSource={RelativeSource TemplatedParent},Path=CheckedImagePath, Converter={StaticResource stringToImageConverter}}" /> 
             </DiscreteObjectKeyFrame.Value> 
            </DiscreteObjectKeyFrame> 
           </ObjectAnimationUsingKeyFrames> 
          </Storyboard> 
         </VisualState> 
         <VisualState x:Name="Unchecked"> 
          <Storyboard> 
           <ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="imgForTemplate" Storyboard.TargetProperty="(Image.Source)"> 
            <DiscreteObjectKeyFrame KeyTime="00:00:00"> 
             <DiscreteObjectKeyFrame.Value> 
              <BitmapImage UriSource="{Binding RelativeSource={RelativeSource TemplatedParent},Path=UnCheckedImagePath, Converter={StaticResource stringToImageConverter}}" /> 
             </DiscreteObjectKeyFrame.Value> 
            </DiscreteObjectKeyFrame> 
           </ObjectAnimationUsingKeyFrames> 
          </Storyboard> 
         </VisualState> 
         <VisualState x:Name="Indeterminate"/> 
        </VisualStateGroup> 
       </VisualStateManager.VisualStateGroups>--> 
      </Image> 

     </ControlTemplate> 

<StackPanel x:Name="LayoutRoot" Background="{StaticResource PhoneForegroundBrush}" Orientation="Horizontal"> 
     <Controls:ImageCheckbox CheckedImagePath="treble_checked.png" UnCheckedImagePath="treble_unchecked.png" Height="72" HorizontalAlignment="Left" VerticalAlignment="Top" Template="{StaticResource CheckboxImageTemplate}" Margin="0,0,10,0" > 
      <Custom:Interaction.Triggers> 
       <Custom:EventTrigger EventName="Click"> 
        <GalaSoft_MvvmLight_Command:EventToCommand CommandParameter="{Binding RelativeSource={RelativeSource Self}, Path=IsChecked}" Command="{Binding TreblePressedCommand}"/> 
       </Custom:EventTrigger> 
      </Custom:Interaction.Triggers> 
     </Controls:ImageCheckbox> 

    </StackPanel> 

私は最初にすべての作業をしようとしましたが、ロードする画像の最初のSourceプロパティを取得していないようです。コメントされた部分（VisualStateManagerの状態）はどちらも動作しませんが、私は同じ問題でなければならないと思います。この場合、UriSourceがUri型であるためBitmapImageの代わりにUriを返すコンバータが必要ですソースはImageタイプです。 イメージを読み込めない（常にimage_imageFailedイベントに入る）コンバータでエラーが発生しています。アセンブリの中でイメージをリソースとして設定しました...どうしたのですか？これは私を夢中にさせている!!

[EDIT]：私が示唆したようにやってみました、そしてウリに依存関係プロパティを変更しましたが、私は

<Controls:ImageCheckbox CheckedImagePath="Images/treble_checked.png" UnCheckedImagePath="Images/treble_unchecked.png" Height="72" HorizontalAlignment="Left" VerticalAlignment="Top" Template="{StaticResource CheckboxImageTemplate}" Margin="0,0,10,0" > 

とテンプレートのvisualSTATEの中で言えば、それは を動作させることはできませんしました。

<BitmapImage UriSource="{Binding Path=UnCheckedImagePath, RelativeSource={RelativeSource TemplatedParent}}" /> 

xamlが無効でエラーが発生することがわかります。私はこのようなTemplateBindingのを使用する場合：

<BitmapImage UriSource="{TemplateBinding UnCheckedImagePath}" /> 

（空白で表示されます）、それは文句はありませんが、イメージはロードされません。私は私が近づいていると思うが、それでも...

を解決策を見つけていない[EDIT 2]：最後の試み...

用法：しようとして

<StackPanel x:Name="LayoutRoot" Background="{StaticResource PhoneForegroundBrush}" Orientation="Horizontal"> 
     <Controls:ImageCheckbox Style="{StaticResource TheImageCheckboxStyle}" CheckedImagePath="Images/treble_checked.png" UnCheckedImagePath="Images/treble_unchecked.png" Height="72" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="0,0,10,0" > 
      <Custom:Interaction.Triggers> 
       <Custom:EventTrigger EventName="Click"> 
        <GalaSoft_MvvmLight_Command:EventToCommand CommandParameter="{Binding RelativeSource={RelativeSource Self}, Path=IsChecked}" Command="{Binding TreblePressedCommand}"/> 
       </Custom:EventTrigger> 
      </Custom:Interaction.Triggers> 
     </Controls:ImageCheckbox> 

    </StackPanel> 

スタイル（されて貼り付けたものをコピーして、私が考えたもの取り除く不要な部分は）

<UserControl.Resources> 

     <Style x:Key="TheImageCheckboxStyle" TargetType="Controls:ImageCheckbox"> 
      <Setter Property="Template"> 
       <Setter.Value> 
        <ControlTemplate TargetType="CheckBox"> 
         <Grid Background="Transparent"> 
          <VisualStateManager.VisualStateGroups>         
           <VisualStateGroup x:Name="CheckStates"> 
            <VisualState x:Name="Checked"> 
             <Storyboard> 
              <ObjectAnimationUsingKeyFrames Storyboard.TargetName="CheckMark" 
                      Storyboard.TargetProperty="Visibility"> 
               <DiscreteObjectKeyFrame KeyTime="0"> 
                <DiscreteObjectKeyFrame.Value> 
                 <Visibility>Visible</Visibility> 
                </DiscreteObjectKeyFrame.Value> 
               </DiscreteObjectKeyFrame> 
              </ObjectAnimationUsingKeyFrames> 
              <ObjectAnimationUsingKeyFrames Storyboard.TargetName="CheckMark" 
                      Storyboard.TargetProperty="Source"> 
               <!-- Magic! --> 
               <DiscreteObjectKeyFrame KeyTime="0" 
                     Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=CheckedImagePath}" /> 
              </ObjectAnimationUsingKeyFrames> 
             </Storyboard> 
            </VisualState> 
            <VisualState x:Name="Unchecked"> 
             <Storyboard> 
              <ObjectAnimationUsingKeyFrames Storyboard.TargetName="CheckMark" 
                      Storyboard.TargetProperty="Visibility"> 
               <DiscreteObjectKeyFrame KeyTime="0"> 
                <DiscreteObjectKeyFrame.Value> 
                 <Visibility>Visible</Visibility> 
                </DiscreteObjectKeyFrame.Value> 
               </DiscreteObjectKeyFrame> 
              </ObjectAnimationUsingKeyFrames> 
              <ObjectAnimationUsingKeyFrames Storyboard.TargetName="CheckMark" 
                      Storyboard.TargetProperty="Source"> 
               <!-- Magic! --> 
               <DiscreteObjectKeyFrame KeyTime="0" 
                     Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=UnCheckedImagePath}" /> 
              </ObjectAnimationUsingKeyFrames> 
             </Storyboard> 
            </VisualState> 
           </VisualStateGroup> 
          </VisualStateManager.VisualStateGroups> 
          <Grid Margin="{StaticResource PhoneTouchTargetLargeOverhang}"> 
           <Grid.ColumnDefinitions> 
            <ColumnDefinition Width="32" /> 
            <ColumnDefinition Width="*" /> 
           </Grid.ColumnDefinitions> 
           <Border x:Name="CheckBackground" 
             Width="32" 
             Height="32" 
             HorizontalAlignment="Left" 
             VerticalAlignment="Center" 
             Background="{TemplateBinding Background}" 
             BorderBrush="{TemplateBinding Background}" 
             BorderThickness="{StaticResource PhoneBorderThickness}" 
             IsHitTestVisible="False" /> 
           <Rectangle x:Name="IndeterminateMark" 
              Grid.Row="0" 
              Width="16" 
              Height="16" 
              HorizontalAlignment="Center" 
              VerticalAlignment="Center" 
              Fill="{StaticResource PhoneRadioCheckBoxCheckBrush}" 
              IsHitTestVisible="False" 
              Visibility="Collapsed" /> 
           <!-- Magic! Default to UnCheckedImagePath --> 
           <Image x:Name="CheckMark" 
             Width="24" 
             Height="18" 
             HorizontalAlignment="Center" 
             VerticalAlignment="Center" 
             IsHitTestVisible="False" 
             Source="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=UnCheckedImagePath}" 
             Stretch="Fill" 
             Visibility="Collapsed" /> 
           <ContentControl x:Name="ContentContainer" 
               Grid.Column="1" 
               Margin="12,0,0,0" 
               Content="{TemplateBinding Content}" 
               ContentTemplate="{TemplateBinding ContentTemplate}" 
               Foreground="{TemplateBinding Foreground}" 
               HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" 
               Padding="{TemplateBinding Padding}" 
               VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}" /> 
          </Grid> 
         </Grid> 
        </ControlTemplate> 
       </Setter.Value> 
      </Setter> 

     </Style> 

Answer 1

あなたがウリにCheckedImagePathの種類を変更すると考えられ、ちょうどのBitmapImageを作成するのではなく、それに直接結合することがありますか？

私が見ているように、あなたのコードは単純なバインディングを大幅にオーバーコンプリートしています。

編集：ここだ私は（実施例）それを行うだろうか

使用例

<local:ImageCheckBox HorizontalAlignment="Left" 
        VerticalAlignment="Top" 
        CheckedImagePath="CheckedImage.png" 
        Content="CheckBox" 
        UnCheckedImagePath="UnCheckedImage.png" /> 

C＃

public partial class ImageCheckBox // NameSpace: MyControls 
{ 
    public ImageCheckBox() 
    { 
     InitializeComponent(); 
    } 

    public const string CheckedImagePathPropertyName = "CheckedImagePath"; 

    public Uri CheckedImagePath 
    { 
     get 
     { 
      return (Uri)GetValue(CheckedImagePathProperty); 
     } 
     set 
     { 
      SetValue(CheckedImagePathProperty, value); 
     } 
    } 

    public static readonly DependencyProperty CheckedImagePathProperty = 
     DependencyProperty.Register(CheckedImagePathPropertyName, 
      typeof(Uri), typeof(ImageCheckBox), new PropertyMetadata(null)); 

    public const string UnCheckedImagePathPropertyName = "UnCheckedImagePath"; 

    public Uri UnCheckedImagePath 
    { 
     get 
     { 
      return (Uri)GetValue(UnCheckedImagePathProperty); 
     } 
     set 
     { 
      SetValue(UnCheckedImagePathProperty, value); 
     } 
    } 

    public static readonly DependencyProperty UnCheckedImagePathProperty = 
     DependencyProperty.Register(UnCheckedImagePathPropertyName, 
      typeof(Uri), typeof(ImageCheckBox), new PropertyMetadata(null)); 
} 

XAML（マジック」を探してください！関連する部品については

<CheckBox x:Class="MyControls.ImageCheckBox" 
      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:l="clr-namespace:WindowsPhoneApplication1" 
      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
      d:DesignHeight="480" 
      d:DesignWidth="480" 
      mc:Ignorable="d"> 
    <CheckBox.Resources> 
     <Style x:Key="PhoneButtonBase" 
       TargetType="ButtonBase"> 
      <Setter Property="Background" Value="Transparent" /> 
      <Setter Property="BorderBrush" Value="{StaticResource PhoneForegroundBrush}" /> 
      <Setter Property="Foreground" Value="{StaticResource PhoneForegroundBrush}" /> 
      <Setter Property="BorderThickness" Value="{StaticResource PhoneBorderThickness}" /> 
      <Setter Property="FontFamily" Value="{StaticResource PhoneFontFamilySemiBold}" /> 
      <Setter Property="FontSize" Value="{StaticResource PhoneFontSizeMediumLarge}" /> 
      <Setter Property="Padding" Value="10,3,10,5" /> 
      <Setter Property="Template"> 
       <Setter.Value> 
        <ControlTemplate TargetType="ButtonBase"> 
         <Grid Background="Transparent"> 
          <VisualStateManager.VisualStateGroups> 
           <VisualStateGroup x:Name="CommonStates"> 
            <VisualState x:Name="Normal" /> 
            <VisualState x:Name="MouseOver" /> 
            <VisualState x:Name="Pressed"> 
             <Storyboard> 
              <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentContainer" 
                      Storyboard.TargetProperty="Foreground"> 
               <DiscreteObjectKeyFrame KeyTime="0" 
                     Value="{StaticResource PhoneBackgroundBrush}" /> 
              </ObjectAnimationUsingKeyFrames> 
              <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ButtonBackground" 
                      Storyboard.TargetProperty="Background"> 
               <DiscreteObjectKeyFrame KeyTime="0" 
                     Value="{StaticResource PhoneForegroundBrush}" /> 
              </ObjectAnimationUsingKeyFrames> 
              <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ButtonBackground" 
                      Storyboard.TargetProperty="BorderBrush"> 
               <DiscreteObjectKeyFrame KeyTime="0" 
                     Value="{StaticResource PhoneForegroundBrush}" /> 
              </ObjectAnimationUsingKeyFrames> 
             </Storyboard> 
            </VisualState> 
            <VisualState x:Name="Disabled"> 
             <Storyboard> 
              <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentContainer" 
                      Storyboard.TargetProperty="Foreground"> 
               <DiscreteObjectKeyFrame KeyTime="0" 
                     Value="{StaticResource PhoneDisabledBrush}" /> 
              </ObjectAnimationUsingKeyFrames> 
              <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ButtonBackground" 
                      Storyboard.TargetProperty="BorderBrush"> 
               <DiscreteObjectKeyFrame KeyTime="0" 
                     Value="{StaticResource PhoneDisabledBrush}" /> 
              </ObjectAnimationUsingKeyFrames> 
              <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ButtonBackground" 
                      Storyboard.TargetProperty="Background"> 
               <DiscreteObjectKeyFrame KeyTime="0" 
                     Value="Transparent" /> 
              </ObjectAnimationUsingKeyFrames> 
             </Storyboard> 
            </VisualState> 
           </VisualStateGroup> 
          </VisualStateManager.VisualStateGroups> 
          <Border x:Name="ButtonBackground" 
            Margin="{StaticResource PhoneTouchTargetOverhang}" 
            Background="{TemplateBinding Background}" 
            BorderBrush="{TemplateBinding BorderBrush}" 
            BorderThickness="{TemplateBinding BorderThickness}" 
            CornerRadius="0"> 
           <ContentControl x:Name="ContentContainer" 
               Content="{TemplateBinding Content}" 
               ContentTemplate="{TemplateBinding ContentTemplate}" 
               Foreground="{TemplateBinding Foreground}" 
               HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" 
               Padding="{TemplateBinding Padding}" 
               VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}" /> 
          </Border> 
         </Grid> 
        </ControlTemplate> 
       </Setter.Value> 
      </Setter> 
     </Style> 
     <Style x:Key="PhoneRadioButtonCheckBoxBase" 
       BasedOn="{StaticResource PhoneButtonBase}" 
       TargetType="ToggleButton"> 
      <Setter Property="Background" Value="{StaticResource PhoneRadioCheckBoxBrush}" /> 
      <Setter Property="BorderBrush" Value="{StaticResource PhoneRadioCheckBoxBrush}" /> 
      <Setter Property="FontSize" Value="{StaticResource PhoneFontSizeMedium}" /> 
      <Setter Property="FontFamily" Value="{StaticResource PhoneFontFamilyNormal}" /> 
      <Setter Property="HorizontalContentAlignment" Value="Left" /> 
      <Setter Property="VerticalContentAlignment" Value="Center" /> 
      <Setter Property="Padding" Value="0" /> 
     </Style> 
    </CheckBox.Resources> 
    <CheckBox.Style> 
     <Style BasedOn="{StaticResource PhoneRadioButtonCheckBoxBase}" 
       TargetType="l:ImageCheckBox"> 
      <Setter Property="Template"> 
       <Setter.Value> 
        <ControlTemplate TargetType="CheckBox"> 
         <Grid Background="Transparent"> 
          <VisualStateManager.VisualStateGroups> 
           <VisualStateGroup x:Name="CommonStates"> 
            <VisualState x:Name="Normal" /> 
            <VisualState x:Name="MouseOver" /> 
            <VisualState x:Name="Pressed"> 
             <Storyboard> 
              <ObjectAnimationUsingKeyFrames Storyboard.TargetName="CheckBackground" 
                      Storyboard.TargetProperty="Background"> 
               <DiscreteObjectKeyFrame KeyTime="0" 
                     Value="{StaticResource PhoneRadioCheckBoxPressedBrush}" /> 
              </ObjectAnimationUsingKeyFrames> 
              <ObjectAnimationUsingKeyFrames Storyboard.TargetName="CheckBackground" 
                      Storyboard.TargetProperty="BorderBrush"> 
               <DiscreteObjectKeyFrame KeyTime="0" 
                     Value="{StaticResource PhoneRadioCheckBoxPressedBorderBrush}" /> 
              </ObjectAnimationUsingKeyFrames> 
              <ObjectAnimationUsingKeyFrames Storyboard.TargetName="CheckMark" 
                      Storyboard.TargetProperty="Fill"> 
               <DiscreteObjectKeyFrame KeyTime="0" 
                     Value="{StaticResource PhoneRadioCheckBoxCheckBrush}" /> 
              </ObjectAnimationUsingKeyFrames> 
              <ObjectAnimationUsingKeyFrames Storyboard.TargetName="IndeterminateMark" 
                      Storyboard.TargetProperty="Fill"> 
               <DiscreteObjectKeyFrame KeyTime="0" 
                     Value="{StaticResource PhoneRadioCheckBoxCheckBrush}" /> 
              </ObjectAnimationUsingKeyFrames> 
             </Storyboard> 
            </VisualState> 
            <VisualState x:Name="Disabled"> 
             <Storyboard> 
              <ObjectAnimationUsingKeyFrames Storyboard.TargetName="CheckBackground" 
                      Storyboard.TargetProperty="Background"> 
               <DiscreteObjectKeyFrame KeyTime="0" 
                     Value="{StaticResource PhoneRadioCheckBoxDisabledBrush}" /> 
              </ObjectAnimationUsingKeyFrames> 
              <ObjectAnimationUsingKeyFrames Storyboard.TargetName="CheckBackground" 
                      Storyboard.TargetProperty="BorderBrush"> 
               <DiscreteObjectKeyFrame KeyTime="0" 
                     Value="{StaticResource PhoneDisabledBrush}" /> 
              </ObjectAnimationUsingKeyFrames> 
              <ObjectAnimationUsingKeyFrames Storyboard.TargetName="CheckMark" 
                      Storyboard.TargetProperty="Fill"> 
               <DiscreteObjectKeyFrame KeyTime="0" 
                     Value="{StaticResource PhoneRadioCheckBoxCheckDisabledBrush}" /> 
              </ObjectAnimationUsingKeyFrames> 
              <ObjectAnimationUsingKeyFrames Storyboard.TargetName="IndeterminateMark" 
                      Storyboard.TargetProperty="Fill"> 
               <DiscreteObjectKeyFrame KeyTime="0" 
                     Value="{StaticResource PhoneRadioCheckBoxCheckDisabledBrush}" /> 
              </ObjectAnimationUsingKeyFrames> 
              <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentContainer" 
                      Storyboard.TargetProperty="Foreground"> 
               <DiscreteObjectKeyFrame KeyTime="0" 
                     Value="{StaticResource PhoneDisabledBrush}" /> 
              </ObjectAnimationUsingKeyFrames> 
             </Storyboard> 
            </VisualState> 
           </VisualStateGroup> 
           <VisualStateGroup x:Name="CheckStates"> 
            <VisualState x:Name="Checked"> 
             <Storyboard> 
              <ObjectAnimationUsingKeyFrames Storyboard.TargetName="CheckMark" 
                      Storyboard.TargetProperty="Visibility"> 
               <DiscreteObjectKeyFrame KeyTime="0"> 
                <DiscreteObjectKeyFrame.Value> 
                 <Visibility>Visible</Visibility> 
                </DiscreteObjectKeyFrame.Value> 
               </DiscreteObjectKeyFrame> 
              </ObjectAnimationUsingKeyFrames> 
              <ObjectAnimationUsingKeyFrames Storyboard.TargetName="CheckMark" 
                      Storyboard.TargetProperty="Source"> 
               <!-- Magic! --> 
               <DiscreteObjectKeyFrame KeyTime="0" 
                     Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=CheckedImagePath}" /> 
              </ObjectAnimationUsingKeyFrames> 
             </Storyboard> 
            </VisualState> 
            <VisualState x:Name="Unchecked"> 
             <Storyboard> 
              <ObjectAnimationUsingKeyFrames Storyboard.TargetName="CheckMark" 
                      Storyboard.TargetProperty="Visibility"> 
               <DiscreteObjectKeyFrame KeyTime="0"> 
                <DiscreteObjectKeyFrame.Value> 
                 <Visibility>Visible</Visibility> 
                </DiscreteObjectKeyFrame.Value> 
               </DiscreteObjectKeyFrame> 
              </ObjectAnimationUsingKeyFrames> 
              <ObjectAnimationUsingKeyFrames Storyboard.TargetName="CheckMark" 
                      Storyboard.TargetProperty="Source"> 
               <!-- Magic! --> 
               <DiscreteObjectKeyFrame KeyTime="0" 
                     Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=UnCheckedImagePath}" /> 
              </ObjectAnimationUsingKeyFrames> 
             </Storyboard> 
            </VisualState> 
            <VisualState x:Name="Indeterminate"> 
             <Storyboard> 
              <ObjectAnimationUsingKeyFrames Storyboard.TargetName="IndeterminateMark" 
                      Storyboard.TargetProperty="Visibility"> 
               <DiscreteObjectKeyFrame KeyTime="0"> 
                <DiscreteObjectKeyFrame.Value> 
                 <Visibility>Visible</Visibility> 
                </DiscreteObjectKeyFrame.Value> 
               </DiscreteObjectKeyFrame> 
              </ObjectAnimationUsingKeyFrames> 
             </Storyboard> 
            </VisualState> 
           </VisualStateGroup> 
          </VisualStateManager.VisualStateGroups> 
          <Grid Margin="{StaticResource PhoneTouchTargetLargeOverhang}"> 
           <Grid.ColumnDefinitions> 
            <ColumnDefinition Width="32" /> 
            <ColumnDefinition Width="*" /> 
           </Grid.ColumnDefinitions> 
           <Border x:Name="CheckBackground" 
             Width="32" 
             Height="32" 
             HorizontalAlignment="Left" 
             VerticalAlignment="Center" 
             Background="{TemplateBinding Background}" 
             BorderBrush="{TemplateBinding Background}" 
             BorderThickness="{StaticResource PhoneBorderThickness}" 
             IsHitTestVisible="False" /> 
           <Rectangle x:Name="IndeterminateMark" 
              Grid.Row="0" 
              Width="16" 
              Height="16" 
              HorizontalAlignment="Center" 
              VerticalAlignment="Center" 
              Fill="{StaticResource PhoneRadioCheckBoxCheckBrush}" 
              IsHitTestVisible="False" 
              Visibility="Collapsed" /> 
           <!-- Magic! Default to UnCheckedImagePath --> 
           <Image x:Name="CheckMark" 
             Width="24" 
             Height="18" 
             HorizontalAlignment="Center" 
             VerticalAlignment="Center" 
             IsHitTestVisible="False" 
             Source="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=UnCheckedImagePath}" 
             Stretch="Fill" 
             Visibility="Collapsed" /> 
           <ContentControl x:Name="ContentContainer" 
               Grid.Column="1" 
               Margin="12,0,0,0" 
               Content="{TemplateBinding Content}" 
               ContentTemplate="{TemplateBinding ContentTemplate}" 
               Foreground="{TemplateBinding Foreground}" 
               HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" 
               Padding="{TemplateBinding Padding}" 
               VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}" /> 
          </Grid> 
         </Grid> 
        </ControlTemplate> 
       </Setter.Value> 
      </Setter> 
     </Style> 
    </CheckBox.Style> 
</CheckBox>