Шаблон и конвертер Windows Phone: проблема с загрузкой BitmapImage из Image Resource в сборке

Question

Это в основном продолжение моего предыдущего вопроса. Мне удалось заставить эту работу работать с шаблонами, однако я хочу сделать ее немного общей, чтобы мне не приходилось повторять код повсюду

Рабочая версия (жестко закодированная) выглядит так:

    <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>

Конечно, пути изображения жестко закодированы. Итак, я хотел сделать его общим, чтобы вы могли просто установить флажок, сказать ему, что это изображение, и шаблон будет одинаковым для всех.

Я создал класс управления 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) тоже не работает, но я думаю, что это должна быть та же проблема ... в этом случае мне понадобится конвертер для возврата Uri вместо BitmapImage, потому что UriSource имеет тип Uri, и Источник имеет тип изображения. Я получаю ошибки в конвертере, где я не могу загрузить изображения (всегда попадая в событие image_imageFailed). Я установил изображения как ресурсы в сборке ... что я делаю не так ?? это сводит меня с ума !!!!

[РЕДАКТИРОВАТЬ]: я попытался сделать, как предложено, и изменил свойство зависимости на Uri, но я не могу заставить его работать Если я скажу

<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}" />

не жалуется, но изображение не загружается (отображается пустым). Я думаю, что приближаюсь, но все еще не нашел решения ...

[ПРАВКА 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 на Uri и просто привязку непосредственно к нему вместо создания 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>