次のクラスと DependencyProperty を使用して、スタイルがボタンの画像を設定できるようにしています。
public static class ImageButton
{
public static readonly DependencyProperty ImageProperty =
DependencyProperty.RegisterAttached("Image", typeof(ImageSource), typeof(ImageButton),
new FrameworkPropertyMetadata((ImageSource)null));
public static ImageSource GetImage(DependencyObject obj)
{
return (ImageSource)obj.GetValue(ImageProperty);
}
public static void SetImage(DependencyObject obj, ImageSource value)
{
obj.SetValue(ImageProperty, value);
}
}
次のスタイルを (ImageButton.xaml で) 定義しました。
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:vcontrols="clr-namespace:Vialis.Led.LedControl5.Controls">
<ControlTemplate x:Key="ImageButtonTemplate" TargetType="Button">
<Image Source="{Binding Path=(vcontrols:ImageButton.Image),
RelativeSource={RelativeSource FindAncestor,
AncestorType={x:Type Button}}}"
Width="{TemplateBinding Width}"
Height="{TemplateBinding Height}"
Stretch="Fill"
RenderTransformOrigin="0.5, 0.5">
<Image.Resources>
<Storyboard x:Key="ShrinkStoryboard">
<DoubleAnimation Storyboard.TargetName="ImageScale"
Storyboard.TargetProperty="(ScaleTransform.ScaleX)"
To="0.8"
Duration="0:0:0.15"
AutoReverse="False"/>
<DoubleAnimation Storyboard.TargetName="ImageScale"
Storyboard.TargetProperty="(ScaleTransform.ScaleY)"
To="0.8"
Duration="0:0:0.15"
AutoReverse="False"/>
</Storyboard>
<Storyboard x:Key="GrowStoryboard">
<DoubleAnimation Storyboard.TargetName="ImageScale"
Storyboard.TargetProperty="(ScaleTransform.ScaleX)"
To="1.0"
Duration="0:0:0.15"
AutoReverse="False"/>
<DoubleAnimation Storyboard.TargetName="ImageScale"
Storyboard.TargetProperty="(ScaleTransform.ScaleY)"
To="1.0"
Duration="0:0:0.15"
AutoReverse="False"/>
</Storyboard>
</Image.Resources>
<Image.RenderTransform>
<ScaleTransform x:Name="ImageScale" ScaleX="1" ScaleY="1" CenterX="1" CenterY="1"/>
</Image.RenderTransform>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Pressed" Storyboard="{StaticResource ShrinkStoryboard}"/>
<VisualState x:Name="MouseOver" Storyboard="{StaticResource GrowStoryboard}"/>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
</Image>
</ControlTemplate>
<Style x:Key="ImageButtonStyle" TargetType="Button">
<Setter Property="Opacity" Value="0.5"/>
<Setter Property="Template" Value="{StaticResource ImageButtonTemplate}"/>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Opacity" Value="1"/>
</Trigger>
</Style.Triggers>
</Style>
</ResourceDictionary>
そして最後にそれを使用するために、私は次のようなものを持っています:
<Button Width="32"
Height="32"
Style="{StaticResource ImageButtonStyle}"
vcontrols:ImageButton.Image="/Images/someimage.png"/>
アプリケーションをコンパイルして実行すると、すべて正常に動作します。ボタンは画像を取得し、スタイルで定義されたアニメーションを使用します。
ただし、設計時に、Visual Studio はそれを視覚化できないように見え、XAML エディターはボタン定義全体の下に波線を表示します。
エラー情報には次のように記載されています。
プレフィックス 'vcontrols' は名前空間にマップされません。
スタイルでの vcontrol の使用について言及しています。そこで名前を変更すると、エラーも変更されるため、ボタンを使用している Window/UserControl で選択された名前とは関係ありません。
これは何が原因で、設計時にも機能するように修正する方法はありますか?