Xaml button templates and button above button
I am trying to create a problem with creating a set of buttons.
I have a button made in wpf and when I deploy my application I want to be able to assign an image when instantiated.
The button textblock is now anchored to {Binding Content}
and I can add the top buttons and image placeholder.
What I can't figure out is how to assign click event handlers to the top two buttons also when I click the top buttons.
There was a major button click error, I tried to change Canvas.ZIndex
but didn't work.
I have included a very rough image of what I am trying to achieve, I could create all the buttons separately, but that is not the case, I want one template to allow me to use different things.
It's just a control pattern that I need, or I need a completely new one 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>
source to share
I use this solution in my applications.
I have defined attached ImgSource property in ButtonBehavior class:
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);
}
}
}
Then I define a ContentTemplate for the "ImageButtons" and finally when I want to use buttons like this I just set the app-styled ImgSource attached property using the 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>
source to share