xaml按钮模板和按钮在按钮上

Question

我在尝试创建一系列按钮时遇到了问题。

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

现在按钮文本块已绑定到{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>