c# - xaml 按钮模板和按钮上方的按钮

Question

我在尝试创建按钮集合时遇到了一个问题。

我有一个用 wpf 制作的按钮，当我部署到我的应用程序时，我希望能够在实例化时分配图像。

刚才按钮文本 block 绑定(bind)到 {Binding Content}，我可以添加顶部按钮和图像占位符。

我想不通的是如何将点击事件处理程序分配给顶部的两个按钮，当我单击顶部按钮时也是如此。

主按钮点击事件触发，我已经尝试更改 Canvas.ZIndex 但它不起作用。

我已经包含了一个非常粗略的图像，说明了我要实现的目标，我可以单独创建所有按钮，但这不是重点，我想要一个模板，它可以让我在不同的东西上使用。

它只是我需要的控件模板还是我需要开发一个全新的usercontrol。

<ControlTemplate x:Key="ButtonTemplate" TargetType="{x:Type Button}">
        <Border x:Name="border" BorderThickness="2" CornerRadius="10" Width="200" Height="130" Background="#FF5581A6" RenderTransformOrigin="0.5,0.5">

            <StackPanel>
                <StackPanel Orientation="Horizontal" HorizontalAlignment="Right" Margin="0,5,5,0">
                    <Button Canvas.ZIndex="10">
                        <StackPanel Orientation="Horizontal">
                            <Rectangle  Width="15" Height="15">
                                <Rectangle.Fill>
                                    <ImageBrush ImageSource="Resources/Icons/appbar.information.circle.png"/>
                                </Rectangle.Fill>

                            </Rectangle>
                        </StackPanel>
                    </Button>

                    <Button x:Name="ClosePlugin" Canvas.ZIndex="10" Margin="5,0,0,0">
                        <StackPanel Orientation="Horizontal">
                            <Rectangle Width="15" Height="15">
                                <Rectangle.Fill>
                                    <ImageBrush ImageSource="Resources/Icons/appbar.close.png"/>
                                </Rectangle.Fill>

                            </Rectangle>

                        </StackPanel>
                    </Button>
                </StackPanel>
                <Image x:Name="MainImage" Height="60" Width="80" Margin="0,-5,0,0" Source="{Binding}" Stretch="Fill"/>
                <TextBlock FontFamily="Segoe UI" FontWeight="Thin" Margin="0,-5,0,0" FontSize="22" Foreground="White" HorizontalAlignment="Center" VerticalAlignment="Center" x:Name="PluginNameTextBlock" Text="{Binding Content}"/>

            </StackPanel>
        </Border>
    </ControlTemplate>

Answer 1

在我的应用程序中，我使用了这个解决方案。

我在类 ButtonBehavior 中定义了附加属性 ImgSource:

using System.Windows;
using System.Windows.Controls.Primitives;
using System.Windows.Media;

namespace WpfStackOverflowSample
{
    public static class ButtonBehavior
    {
        private static readonly DependencyProperty ImgSourceProperty = DependencyProperty.RegisterAttached(
            "ImgSource", 
            typeof (ImageSource), 
            typeof (ButtonBehavior), 
            new PropertyMetadata(default(ImageSource)));

        public static void SetImgSource(ButtonBase button, ImageSource value)
        {
            button.SetValue(ImgSourceProperty, value);
        }

        public static ImageSource GetImgSource(ButtonBase button)
        {
            return (ImageSource)button.GetValue(ImgSourceProperty);
        }

    }
}

然后我为“ImageButtons”定义了 ContentTemplate，最后当我想使用这种按钮时，我只是将附加属性 ImgSource 设置为 ContentTemplate 的应用样式

<Window x:Class="WpfStackOverflowSample.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="clr-namespace:WpfStackOverflowSample"
        Title="MainWindow" Height="480" Width="640">
    <Window.Resources>

        <Style TargetType="{x:Type ButtonBase}">
            <Setter Property="Margin" Value="0,5" />
            <Setter Property="MinWidth" Value="100" />
            <Setter Property="HorizontalAlignment" Value="Center" />
        </Style>

        <Style x:Key="ImgButtonStyle" TargetType="{x:Type ButtonBase}" BasedOn="{StaticResource {x:Type ButtonBase}}">
            <Setter Property="local:ButtonBehavior.ImgSource" Value="/Images/unknown.png" />
            <Setter Property="Padding" Value="2" />
            <Setter Property="ContentTemplate">
                <Setter.Value>
                    <DataTemplate>
                        <StackPanel Orientation="Horizontal">
                            <Image 
                                x:Name="img"
                                Source="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type Button}}, Path=(local:ButtonBehavior.ImgSource)}"
                                Stretch="UniformToFill"
                                Width="16" Height="16"
                                Margin="0,0,5,0" />
                            <TextBlock 
                                x:Name="txt"
                                Text="{Binding}"
                                VerticalAlignment="Center" />
                        </StackPanel>
                        <DataTemplate.Triggers>
                            <Trigger Property="IsEnabled" Value="False">
                                <Setter TargetName="img" Property="Opacity" Value="0.3" />
                                <Setter TargetName="txt" Property="Foreground" Value="#ADADAD"></Setter>
                            </Trigger>
                        </DataTemplate.Triggers>
                    </DataTemplate>
                </Setter.Value>
            </Setter>
        </Style>

        <Style TargetType="{x:Type Button}" BasedOn="{StaticResource {x:Type ButtonBase}}" />

    </Window.Resources>


    <StackPanel Orientation="Vertical" VerticalAlignment="Center">

        <Button local:ButtonBehavior.ImgSource="/Images/encrypt.png"
                Style="{StaticResource ImgButtonStyle}"
                Content="Encrypt" />

        <Button local:ButtonBehavior.ImgSource="/Images/decrypt.png"
                Style="{StaticResource ImgButtonStyle}"
                Content="Decrypt"
                IsEnabled="False" />

        <Button Style="{StaticResource ImgButtonStyle}"
                Content="No image" />

        <Button Content="Classic" />

        <Button Content="Classic" 
                IsEnabled="False" />

    </StackPanel>

</Window>