My reusable Button is basically a single button, of which ControlTemplate consists of a TextBlock and an Image. The Text property of TextBlock binds to a DependencyProperty to be exposed; similarly, the Source property of Image binds to a DependencyProperty. Here is the code for this Button.
<Button x:Class="Core.Resource.UserControlResource.NavigationButton1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:local="clr-namespace:Core.Resource.UserControlResource"
mc:Ignorable="d"
x:Name="myself">
<Button.Style>
<Style TargetType="{x:Type Button}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="63"></ColumnDefinition>
<ColumnDefinition Width="63"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Image Name="IconImage" Height="42" Width="42" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Source="{Binding ElementName=myself, Path=ScreenIcon}" />
<TextBlock Grid.Column="1" Text="{Binding ElementName=myself, Path=ScreenTitle}" FontSize="25" TextWrapping="Wrap" VerticalAlignment="Center"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Button.Style>
where ScreenTitle and ScreenIcon are the aforementioned DependecyProperty.
Now, I want to use this Button in its "parent", a UserControl. The code will be like
<UserControl x:Class="Core.ParentControl"
x:Name="parent"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:usrCtrlResrc="clr-namespace:Core.Resource.UserControlResource;assembly=Core.Resource"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="32"/>
<ColumnDefinition Width="32"/>
<Grid.ColumnDefinitions>
<usrCtrlResrc:NavigationButton1 ScreenTitle="sample Screen Title" ScreenIcon="/Core.Resource;component/MediaResource/pencilEdit.png">
<TextBlock Grid.Column="1" Name="txtBlk" Text="SampleSample"/>
</Grid>
However, in order to add reactions when the Button is clicked (say to change the Grid.ColumnSpan property of TextBlock "txtBlk" to 2), what I want to do else is assign EventTriggers to my reusable Button in the "parent". I initially thought of two ways, but none of them works.
Any other workarounds? Thanks in advance.
I finally resolve this problem by directly override its Triggers. Code is as below.
<usrCtrlResrc:NavigationButton1 ScreenTitle=... ScreenIcon=...>
<usrCtrlResrc:NavigationButton1.Triggers>
<EventTrigger RoutedEvent="usrCtrlResrc:NavigationButton1.Click">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
...
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</usrCtrlResrc:NavigationButton1.Triggers>
</usrCtrlResrc:NavigationButton1>