WPFは：私たちは簡単に次のコードのようにコントロールテンプレートを使用してアイコンボタンを作ることができます私のアイコンボタン

Question

のための最善の方法を与える：

<Style x:Key="IconButton" TargetType="{x:Type Button}"> 
    <Setter Property="Template"> 
     <Setter.Value> 
      <ControlTemplate> 
       <Grid> 
        <Image x:Name="Background" Source="/UOC;component/TOOLBAR_BUTTON_NORMAL.png"/> 
        <Image Source="/UOC;component/ICON_SLICER.gif" Width="20" Height="20" Margin="0,-10,0,0"/> 
        <TextBlock Foreground="White" FontSize="9" Text="{TemplateBinding Button.Content}" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="0,15,0,0"/> 
       </Grid> 
       <ControlTemplate.Triggers> 
        <Trigger Property="Button.IsMouseOver" Value="True"> 
         <Setter Property="Source" TargetName="Background" Value="/UOC;component/TOOLBAR_BUTTON_OVER.png"/> 
         <Setter Property="Cursor" Value="Hand"/> 
        </Trigger> 
        <Trigger Property="Button.IsPressed" Value="True"> 
         <Setter Property="Source" TargetName="Background" Value="/UOC;component/TOOLBAR_BUTTON_CLICK.png"/> 
        </Trigger> 
       </ControlTemplate.Triggers> 
      </ControlTemplate> 
     </Setter.Value> 
    </Setter> 
</Style> 

しかし、私は、それは実際に生産的な方法ではないと思います。なぜなら私はアイコンボタンのそれぞれにいくつかのスタイルを作ることができないからです。 （例：App内の3つのボタン： 'open'ボタン、 'close'ボタン、 'navigate'ボタンはアイコンセットが異なりますが、 'IconButton_Close'、 'IconButton_Open'、 'IconButton_Nav'それはあまりにも愚かです。）

UserControlが答えかもしれません。しかし、私はそれが賢明な方法ではないと思う。 UserControlを作成すると、Buttonコントロールのラッパーになります。それは正しい方法ではありません。

アイコンボタンのための最善の方法を教えてください。

ありがとうございました。

Answer 1

これを行うための正しい方法はそうのように、カスタムボタンのクラスを定義するには、次のようになります。

public class MyButton : Button { 

    static MyButton() { 
     DefaultStyleKeyProperty.OverrideMetadata(typeof(MyButton), new FrameworkPropertyMetadata(typeof(MyButton))); 
    } 

    public static readonly DependencyProperty ImageSourceProperty = DependencyProperty.Register("ImageSource", typeof(ImageSource), 
     typeof(MyButton), new FrameworkPropertyMetadata(null); 

    public ImageSource ImageSource { 
     get { return (ImageSource)GetValue(ImageSourceProperty); } 
     set { SetValue(ImageSourceProperty, value); } 
    } 

    public static readonly DependencyProperty ImageSourceHoverProperty = DependencyProperty.Register("ImageSourceHover", typeof(ImageSource), 
     typeof(MyButton), new FrameworkPropertyMetadata(null); 

    public ImageSource ImageSourceHover { 
     get { return (ImageSource)GetValue(ImageSourceHoverProperty); } 
     set { SetValue(ImageSourceHoverProperty, value); } 
    } 

    public static readonly DependencyProperty ImageSourcePressedProperty = DependencyProperty.Register("ImageSourcePressed", typeof(ImageSource), 
     typeof(MyButton), new FrameworkPropertyMetadata(null); 

    public ImageSource ImageSourcePressed { 
     get { return (ImageSource)GetValue(ImageSourcePressedProperty); } 
     set { SetValue(ImageSourcePressedProperty, value); } 
    } 

} 

そして、そのようにデフォルトのスタイルを定義します。

<Style x:Key="{x:Type local:MyButton}" TargetType="{x:Type local:MyButton}"> 
    <Setter Property="Template"> 
     <Setter.Value> 
      <ControlTemplate TargetType="{x:Type local:MyButton}"> 
       <Grid> 
        <Image x:Name="Background" Source="{TemplateBinding ImageSource}" /> 
        <Image Source="/UOC;component/ICON_SLICER.gif" Width="20" Height="20" Margin="0,-10,0,0"/> 
        <TextBlock Foreground="White" FontSize="9" Text="{TemplateBinding Button.Content}" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="0,15,0,0"/> 
       </Grid> 
       <ControlTemplate.Triggers> 
        <Trigger Property="Button.IsMouseOver" Value="True"> 
         <Setter Property="Source" TargetName="Background" Value="{TemplateBinding ImageSourceHover}"/> 
         <Setter Property="Cursor" Value="Hand"/> 
        </Trigger> 
        <Trigger Property="Button.IsPressed" Value="True"> 
         <Setter Property="Source" TargetName="Background" Value="{TemplateBinding ImageSourcePressed}"/> 
        </Trigger> 
       </ControlTemplate.Triggers> 
      </ControlTemplate> 
     </Setter.Value> 
    </Setter> 
</Style> 

あなたは次のように使用しますso：

<local:MyButton ImageSource="/UOC;component/TOOLBAR_BUTTON_NORMAL.png" 
    ImageSourceHover="/UOC;component/TOOLBAR_BUTTON_OVER.png" 
    ImageSourcePressed="/UOC;component/TOOLBAR_BUTTON_CLICK.png" /> 

Answer 2

TemplatePart属性を使用してカスタムコントロールを使用して、これと似たようなことをしました。パネルにアイコンとテキストが表示されます。アイコンがエラーアイコンまたは失敗アイコンの場合は、テキストが赤色に変わります。実際には拡張子のないイメージファイル名だけである "Type"という依存関係プロパティがあります。ここにコードがありますが、ソースを設定してテンプレートにカスタマイズしておくことができるカスタムボタンにこれを適用することができます。

[TemplatePart(Name = "PART_Image", Type = typeof(Image))] 
public class IconPanel : ContentControl 
{ 
    static IconPanel() 
    { 
     DefaultStyleKeyProperty.OverrideMetadata(typeof(IconPanel), new FrameworkPropertyMetadata(typeof(IconPanel))); 
} 


public string Type 
{ 
    get { return (string)GetValue(TypeProperty); } 
    set { SetValue(TypeProperty, value); } 
} 

public static readonly DependencyProperty TypeProperty = 
    DependencyProperty.Register("Type", typeof(string), typeof(IconPanel), 
    new UIPropertyMetadata("warning", TypeChangedCallback)); 

static void TypeChangedCallback(DependencyObject obj, DependencyPropertyChangedEventArgs args) 
{ 
    IconPanel panel = obj as IconPanel; 
    panel.UpdateImage(); 
} 

void UpdateImage() 
{ 
    Image img = GetTemplateChild("PART_Image") as Image; 
    if (img == null) return; 
    string ImagePath = String.Format("pack://application:,,,/Resources/{0}.png", this.Type); 
    Uri uri = new Uri(ImagePath, UriKind.RelativeOrAbsolute); 
    BitmapImage bmp = new BitmapImage(uri); 
    img.Source = bmp; 
    if (String.Compare(Type, "error", true) == 0 || 
     String.Compare(Type, "fail", true) == 0) 
    { 
     this.Foreground = new SolidColorBrush(Color.FromRgb(0xFF, 0x00, 0x00)); 
    } 
} 

public override void OnApplyTemplate() 
{ 
    UpdateImage(); 
    base.OnApplyTemplate(); 
    } 
} 

XAML：

<Style TargetType="{x:Type local:IconPanel}"> 
     <Setter Property="Template"> 
      <Setter.Value> 
       <ControlTemplate TargetType="{x:Type local:IconPanel}"> 
        <Border Background="{TemplateBinding Background}" 
          BorderBrush="{TemplateBinding BorderBrush}" 
          BorderThickness="{TemplateBinding BorderThickness}" 
          Padding="7"> 
         <Grid Background="{TemplateBinding Background}"> 
          <Grid.ColumnDefinitions> 
           <ColumnDefinition Width="Auto"/> 
           <ColumnDefinition Width="*"/> 
          </Grid.ColumnDefinitions> 
           <Image 
            x:Name="PART_Image" 
            Margin="0,0,5,5" 
            VerticalAlignment="Top" 
            HorizontalAlignment="Left" 
            Width="16" 
            Height="16" /> 
          <ContentPresenter Grid.Column="1"/> 
         </Grid> 
        </Border> 
       </ControlTemplate> 
      </Setter.Value> 
     </Setter> 
    </Style>