Question

我正在为自定义按钮编写我的第一个XAML模板（请好一点），我试图让设置更常见（按钮图标）。

目前我的模板如下：

<ControlTemplate TargetType="Button" x:Key="tButton">
    <Grid>
        <Border x:Name="Background" CornerRadius="2" BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="{TemplateBinding BorderBrush}">
            <Grid Background="{TemplateBinding Background}">
                <Rectangle x:Name="BackgroundGradient" >
                </Rectangle>
            </Grid>
        </Border>
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="auto" />
            </Grid.ColumnDefinitions>

            <!-- icon image -->
            <Image Grid.Column="0" />

            <ContentPresenter
                            Grid.Column="1"
                            x:Name="contentPresenter"
                            Content="{TemplateBinding Content}"
                            ContentTemplate="{TemplateBinding ContentTemplate}"
                            VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                            HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                            Margin="{TemplateBinding Padding}" />
        </Grid>
        <Rectangle x:Name="DisabledVisualElement" RadiusX="3" RadiusY="3" Fill="#FFFFFFFF" Opacity="0" IsHitTestVisible="false" />
        <Rectangle x:Name="FocusVisualElement"    RadiusX="2" RadiusY="2" Margin="1" Stroke="#FF6DBDD1" StrokeThickness="1" Opacity="0" IsHitTestVisible="false" />
    </Grid>
</ControlTemplate>

所以我设置了文本和图像，文本部分甚至可以工作，但我真正喜欢的（并且不知道该怎么做）是将图标传递给按钮。

我试图弄清楚如何在按钮上获得一个可以在样式中设置的自定义属性（对于URI），但是这一切都在我的头上（这里有很多东西，当结合学习这整个模板的事情）。这甚至是一种有效的方法吗？也许某种方式我可以让模板选取它在按钮内容中找到的任何图像并按指示使用它？

基本上，是否可以通过标准化的方式让我的所有按钮都有一个图标选项？这比让每个按钮都有图像的混乱解决方案要好得多和一个文本块，每个都需要自己的上下文敏感样式。

最后，我（不幸的是）只能访问XAML。我可以做任何我想要的东西，但这是对现有面板的重新设计，而且我无法访问C＃功能位。

Answer 1

实施一个带有图标来源属性的按钮

public class IconButton : Button
{
    public static readonly DependencyProperty IconSourceProperty =
        DependencyProperty.Register("IconSource", typeof(string), typeof(IconButton), new PropertyMetadata(default(string)));

    public string IconSource
    {
        get { return (string)GetValue(IconSourceProperty); }
        set { SetValue(IconSourceProperty, value); }
    }
}

调整模板以适合该按钮，并将图像源绑定到自定义属性

<ControlTemplate TargetType="{x:Type local:IconButton}" x:Key="tbutton">
<Grid>
    <Border x:Name="Background" CornerRadius="2" BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="{TemplateBinding BorderBrush}">
        <Grid Background="{TemplateBinding Background}">
            <Rectangle x:Name="BackgroundGradient" >
            </Rectangle>
        </Grid>
    </Border>
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="auto" />
        </Grid.ColumnDefinitions>

        <!-- icon image -->
        <Image Grid.Column="0" Source="{TemplateBinding IconSource}"/>

        <ContentPresenter
                        Grid.Column="1"
                        x:Name="contentPresenter"
                        Content="{TemplateBinding Content}"
                        ContentTemplate="{TemplateBinding ContentTemplate}"
                        VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                        HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                        Margin="{TemplateBinding Padding}" />
    </Grid>
    <Rectangle x:Name="DisabledVisualElement" RadiusX="3" RadiusY="3" Fill="#FFFFFFFF" Opacity="0" IsHitTestVisible="false" />
    <Rectangle x:Name="FocusVisualElement"    RadiusX="2" RadiusY="2" Margin="1" Stroke="#FF6DBDD1" StrokeThickness="1" Opacity="0" IsHitTestVisible="false" />
</Grid>

简单使用

<local:IconButton IconSource="Resources\1.jpg" Template="{StaticResource tbutton}"></local:IconButton>

Answer 2

除了Omri Bitan：

CS：

  public class IconButton : Button
  {
       public static readonly DependencyProperty ImageSourceProperty =
        DependencyProperty.Register("ImageSource", typeof(string), typeof(IconButton), new PropertyMetadata(null));

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

xaml：

 <ControlTemplate TargetType="Button" x:Key="tButton">    
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition  />
        </Grid.ColumnDefinitions>

        <!-- icon image -->
        <Image x:Name=img ImageSource="{TemplateBinding ImageSource}" />

        <ContentPresenter Grid.Column="1" /> 
   </Grid>

   <ControlTemplate.Triggers>
        <Trigger Property="ImageSource" Value="{x:Null}">
            <Setter TargetName=img Property=Visibility Value=Collapesd/>
        </Trigger>
   </ControlTemplate.Triggers>  
</ControlTemplate>

将元素添加到XAML模板

2 个答案: