XAML按钮模板 [英] XAML button template

问题描述

我有这样的代码，现在我想问的是，我可以重用此代码为不同的按钮设置不同的图片但使用相同的模板，并在资源中以某种方式添加更多的picutes，并让按钮选择基于图片一些按钮ID。



我尝试过：

< Window.Resources> 
<！ - 图像资源 - > 
< BitmapImage x：Key =DefaultImage
 UriSource =/ WPF_LogIn_Terminal; component / Images / Loginbtn.png/> 
< BitmapImage x：Key =OnClickImage
 UriSource =/ WPF_LogIn_Terminal; component / Images / Loginbtn_clicked.png/> 
<！ - 按钮样式 - > 
< ControlTemplate x：Key =ButtonTemplate
 TargetType =Button> 
<网格宽度=95
高度=32
背景=透明> 
< Image Name =defaultImage
 Source ={StaticResource DefaultImage}
 Stretch =Uniform
 Visibility =Visible/> 
< Image Name =clickedImage
 Source ={StaticResource OnClickImage}
 Stretch =Uniform
 Visibility =Collapsed/> 
< Label x：Name =ContentLabel
 Content ={Binding Content，RelativeSource = {RelativeSource AncestorType = Button}}
 Foreground ={Binding Foreground，RelativeSource = {RelativeSource AncestorType = Button}}
 Horizo​​ntalAlignment =Center
 VerticalAlignment =Center
 FontSize ={Binding FontSize，RelativeSource = {RelativeSource AncestorType = Button}}/> 
 
< / Grid> 
< ControlTemplate.Triggers> 
< Trigger Property =IsPressed
 Value =true> 
< Setter TargetName =ContentLabel
 Property =Foreground
 Value =White/> 
< Setter TargetName =defaultImage
 Property =Visibility
 Value =Collapsed/> 
< Setter TargetName =clickedImage
 Property =Visibility
 Value =Visible/> 
< / Trigger> 
< /ControlTemplate.Triggers> 
< / ControlTemplate> 
 
< /Window.Resources> 

解决方案

< blockquote>



是的，有可能，你需要的是自定义控制。在此自定义控件中，您可以为图像路径创建依赖项属性，而不是在模板中使用它。



我建议您查看这些如何文章关于如何创建自定义控件：

MSDN：试一试：创建自定义WPF控制

WPF教程：如何创建WPF自定义控件

这是一个快速的自定义控件（未经过测试）。

 使用系统。视窗; 
 使用 System.Windows.Controls; 
 使用 System.Windows.Media.Imaging; 
 
 命名空间 WpfFlyoutMock3.Control 
 {
  public   class  ImageButton：Button 
 {
  static  ImageButton（）
 { 
 DefaultStyleKeyProperty.OverrideMetadata（ typeof （BitmapImage），
  new  FrameworkPropertyMetadata（ typeof运算（BitmapImage的）））; 
} 
 
   #region属性
  
  public   static   readonly  DependencyProperty PathDataProperty = DependencyProperty.Register 
（
  图像，
  typeof （BitmapImage），
  typeof （ImageButton），
  new  PropertyMetadata （ null ）
）; 
 
  public  BitmapImage Image 
 {
  get  {  return （BitmapImage）GetValue（PathDataProperty）; } 
  set  {SetValue（PathDataProperty， value ）; } 
} 
 
   #endregion 
 } 
} 

I have code like that, now what i wanna to ask is, can i reuse this code to set different picture for different button but to use same template, and in resources somehow to add more picutes, and let button choose picture based on some button ID.

What I have tried:

<Window.Resources>
        <!--Image Resources-->
        <BitmapImage x:Key="DefaultImage"
                     UriSource="/WPF_LogIn_Terminal;component/Images/Loginbtn.png" />
        <BitmapImage x:Key="OnClickImage"
                     UriSource="/WPF_LogIn_Terminal;component/Images/Loginbtn_clicked.png" />
 <!-- Button Style-->
        <ControlTemplate x:Key="ButtonTemplate"
                         TargetType="Button">
            <Grid Width="95"
                  Height="32"
                  Background="Transparent">
                <Image Name="defaultImage"
                       Source="{StaticResource DefaultImage}"
                       Stretch="Uniform"
                       Visibility="Visible" />
                <Image Name="clickedImage"
                       Source="{StaticResource OnClickImage}"
                       Stretch="Uniform"
                       Visibility="Collapsed" />
                <Label x:Name="ContentLabel"
                       Content="{Binding Content,RelativeSource={RelativeSource AncestorType=Button}}"
                       Foreground="{Binding Foreground,RelativeSource={RelativeSource AncestorType=Button}}"
                       HorizontalAlignment="Center"
                       VerticalAlignment="Center"
                       FontSize="{Binding FontSize,RelativeSource={RelativeSource AncestorType=Button}}" />

            </Grid>
            <ControlTemplate.Triggers>
                <Trigger Property="IsPressed"
                         Value="true">
                    <Setter TargetName="ContentLabel"
                            Property="Foreground"
                            Value="White" />
                    <Setter TargetName="defaultImage"
                            Property="Visibility"
                            Value="Collapsed" />
                    <Setter TargetName="clickedImage"
                            Property="Visibility"
                            Value="Visible" />
                </Trigger>
            </ControlTemplate.Triggers>
        </ControlTemplate>

    </Window.Resources>

解决方案

Hi,

yes, it is possible, what you need is custom control. In this custom control, you can create dependency property for the image path and than use it in your template.

I recommend you to look at these "how to" articles about how to create custom controls:
MSDN: Try it: Create a custom WPF control
WPF tutorial: How to Create a WPF Custom Control

Here is a quick custom control (not tested).

using System.Windows;
using System.Windows.Controls;
using System.Windows.Media.Imaging;

namespace WpfFlyoutMock3.Control
{
    public class ImageButton : Button
    {
        static ImageButton()
        {
            DefaultStyleKeyProperty.OverrideMetadata(typeof(BitmapImage), 
                new FrameworkPropertyMetadata(typeof(BitmapImage)));
        }

        #region Properties

        public static readonly DependencyProperty PathDataProperty = DependencyProperty.Register
            (
                "Image",
                typeof(BitmapImage),
                typeof(ImageButton),
                new PropertyMetadata(null)
            );

        public BitmapImage Image
        {
            get { return (BitmapImage)GetValue(PathDataProperty); }
            set { SetValue(PathDataProperty, value); }
        }

        #endregion
    }
}

这篇关于XAML按钮模板的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！