XAML按钮模板和按钮叠加问题

Question

我在创建一个按钮集合时遇到了问题。我在wpf中创建了一个按钮，当我部署到我的应用程序时，希望能够在实例化时分配图像。

现在，按钮的textblock绑定到{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>

- user1791240

---

你能否发布你的XAML按钮控件代码？为什么不直接创建一个包含 3 个按钮的用户控件，并在代码后台处理点击事件呢？那将是最快的方式（也许不是最优雅的 XAML 版本，但它可以工作）。 - Jon

请发布您的XAML，以便我们分析和解决它。 - csharpwinphonexaml

你不需要疯狂的z-index技巧，也不需要新的用户控件，你的图像可以通过几种方式传递到现有的纯内容上方，没有问题。按照这些人建议的那样发布你的xaml，我们会帮你解决问题。 - Chris W.

好的，我已经添加了一些XAML来帮助，我剥离了可视状态的内容，只保留了最基本的部分。我在按钮上放置了两个按钮和一个图像，并需要为它们分配单击事件。此外，我有多个对象具有不同的图像，这些按钮将链接到这些图像，因此我需要在图像容器中显示对象的图像。 - user1791240

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>

- Ondrej