将元素添加到 XAML 模板

本文关键字：XAML 模板 添加 元素 | 更新日期: 2023-09-27 18:33:07

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

将元素添加到 XAML 模板

使用图标源的属性实现按钮

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>

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

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>
相关文章：