添付プロパティ付きControlTemplateを作成

Question

私は本質的に、画像の背景と境界線を持つボタンを作成しようとしています。私はこれらのタイプのボタンのいくつかを用意し、ImageTourceを再利用して変更できるようにControlTemplateを定義したいと考えています。ここまで私がこれまで持っていたことはありますが、何らかの理由でTemplateBindingが機能していないようです。ボタンには背景画像が設定されていません。

テンプレート：

<ControlTemplate x:Name="SkillIconTemplate" TargetType="Button"> 
     <Border CornerRadius="10" BorderThickness="2" Margin="5"> 
      <VisualStateManager.VisualStateGroups> 
       <VisualStateGroup x:Name="CommonStates"> 
        <VisualStateGroup.Transitions> 
         <VisualTransition To="MouseOver" GeneratedDuration="0:0:0.1"/> 
         <VisualTransition To="Pressed" GeneratedDuration="0:0:0.1"/> 
        </VisualStateGroup.Transitions> 
        <VisualState x:Name="Normal" /> 
        <VisualState x:Name="MouseOver"> 
         <Storyboard> 
          <ColorAnimation Storyboard.TargetName="BorderBrush" 
                Storyboard.TargetProperty="Color" 
                To="Yellow" /> 
         </Storyboard> 
        </VisualState> 
        <VisualState x:Name="Pressed"> 
         <Storyboard> 
          <ColorAnimation Storyboard.TargetName="BorderBrush" 
                Storyboard.TargetProperty="Color" 
                To="Black"/> 
         </Storyboard> 
        </VisualState> 
       </VisualStateGroup> 
      </VisualStateManager.VisualStateGroups> 
      <Border.BorderBrush> 
       <SolidColorBrush x:Name="BorderBrush" Color="White"/> 
      </Border.BorderBrush> 
      <Border.Background> 
       <ImageBrush ImageSource="{TemplateBinding local:SkillIcon.IconImageSource}"/> 
      </Border.Background> 
     </Border> 
    </ControlTemplate> 

ボタン：

<Button x:Name="skillIcon0" Width="75" Height="75" ClickMode="Press" local:SkillIcon.IconImageSource="ms-appx:/data/images/icons/skill_icon_0.png" Template="{StaticResource SkillIconTemplate}"/> 
    <Button x:Name="skillIcon1" Width="75" Height="75" ClickMode="Press" local:SkillIcon.IconImageSource="ms-appx:/data/images/icons/skill_icon_1.png" Template="{StaticResource SkillIconTemplate}"/> 
    … 

施設コード：コードに

public abstract class SkillIcon : DependencyObject 
{ 
    public static readonly DependencyProperty IconImageSourceProperty = DependencyProperty.RegisterAttached(
     "IconImageSource", 
     typeof(ImageSource), 
     typeof(SkillIcon), 
     new PropertyMetadata(GetIconImage(0)) 
     ); 

    public static ImageSource GetIconImageSource(DependencyObject obj) 
    { 
     return (ImageSource)obj.GetValue(IconImageSourceProperty); 
    } 

    public static void SetIconImageSource(DependencyObject obj, ImageSource value) 
    { 
     obj.SetValue(IconImageSourceProperty, value); 
    } 

    /// <summary> 
    /// Gets the image source for the button 
    /// </summary> 
    public static ImageSource GetIconImage(int index) 
    { 
     Uri source = new Uri(string.Format("ms-appx:/data/images/icons/skill_icon_{0}.png", index), UriKind.RelativeOrAbsolute); 
     return new BitmapImage() { UriSource = source }; 
    } 
} 

使用：

 SkillIcon.SetIconImageSource(skillIcon0, SkillIcon.GetIconImage(0)); 

Answer 1

ボタンの背景をボーダーの背景にバインドしました。

<ControlTemplate x:Name="SkillIconTemplate" TargetType="Button"> 
     <Border CornerRadius="10" BorderThickness="2" Margin="5" Background="{TemplateBinding Background}"> 
      <VisualStateManager.VisualStateGroups> 
       <VisualStateGroup x:Name="CommonStates"> 
        <VisualStateGroup.Transitions> 
         <VisualTransition To="MouseOver" GeneratedDuration="0:0:0.05"/> 
         <VisualTransition To="Pressed" GeneratedDuration="0:0:0.05"/> 
        </VisualStateGroup.Transitions> 
        <VisualState x:Name="Normal" /> 
        <VisualState x:Name="MouseOver"> 
         <Storyboard> 
          <ColorAnimation Storyboard.TargetName="BorderBrush" 
                Storyboard.TargetProperty="Color" 
                To="Yellow" /> 
         </Storyboard> 
        </VisualState> 
        <VisualState x:Name="Pressed"> 
         <Storyboard> 
          <ColorAnimation Storyboard.TargetName="BorderBrush" 
                Storyboard.TargetProperty="Color" 
                To="Black"/> 
         </Storyboard> 
        </VisualState> 
       </VisualStateGroup> 
      </VisualStateManager.VisualStateGroups> 
      <Border.BorderBrush> 
       <SolidColorBrush x:Name="BorderBrush" Color="White"/> 
      </Border.BorderBrush> 
     </Border> 
    </ControlTemplate>