0

我正在为一个自定义按钮编写我的第一个 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# 功能位。

4

2 回答 2

2

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

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>
于 2013-09-26T19:48:50.740 回答
0

除了 Omribitan ：

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); }
        }
   }

xml：

 <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>
于 2013-09-26T20:05:21.613 回答