Why the Dependency Property can no be use in usercontrol? - wpf

Question

I want to make a brand new button, so that I create a usercontrol inherits Button to do this.
Here is the XAML:
<Button x:Class="Uploader.PropertyButtonControl"
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:Uploader"
mc:Ignorable="d"
xmlns:s="clr-namespace:Svg2Xaml;assembly=Svg2Xaml"
d:DesignHeight="450" d:DesignWidth="800">
<Button.Template>
<ControlTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="auto"></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="0.6*"></RowDefinition>
<RowDefinition Height="0.4*"></RowDefinition>
</Grid.RowDefinitions>
<Border Width="{Binding Path=ActualHeight,RelativeSource={RelativeSource Self}}" Grid.RowSpan="2" Background="{Binding IconBackground,Mode=TwoWay}">
<s:SvgShape Source="{Binding IconSource,Mode=TwoWay}"></s:SvgShape>
</Border>
<TextBlock Grid.Column="1" Text="{Binding ButtonTitle,Mode=TwoWay}"></TextBlock>
<TextBlock Grid.Column="1" Grid.Row="1" Foreground="#575757" Text="{Binding ButtonContent,Mode=TwoWay}"></TextBlock>
<Border Grid.ColumnSpan="2" Grid.RowSpan="2" BorderBrush="#cecece" BorderThickness="1" Visibility="Collapsed" Name="Bo"></Border>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="true">
<Setter TargetName="Bo" Property="Visibility" Value="Visible"></Setter>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Button.Template>
</Button>
And here is code-behind:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
namespace Uploader
{
/// <summary>
/// Interaction logic for PropertyButtonControl.xaml
/// </summary>
public partial class PropertyButtonControl : Button
{
public PropertyButtonControl()
{
InitializeComponent();
}
public SolidColorBrush IconBackground
{
get { return (SolidColorBrush)GetValue(IconBackgroundProperty); }
set { SetValue(IconBackgroundProperty, value); }
}
// Using a DependencyProperty as the backing store for IconBackground. This enables animation, styling, binding, etc...
public static readonly DependencyProperty IconBackgroundProperty =
DependencyProperty.Register("IconBackground", typeof(SolidColorBrush), typeof(PropertyButtonControl),null);
public ImageSource IconSource
{
get { return (ImageSource)GetValue(IconSourceProperty); }
set { SetValue(IconSourceProperty, value); }
}
// Using a DependencyProperty as the backing store for IconSource. This enables animation, styling, binding, etc...
public static readonly DependencyProperty IconSourceProperty =
DependencyProperty.Register("IconSource", typeof(ImageSource), typeof(PropertyButtonControl), null);
public string ButtonTitle
{
get { return (string)GetValue(ButtonTitleProperty); }
set { SetValue(ButtonTitleProperty, value); }
}
// Using a DependencyProperty as the backing store for ButtonTitle. This enables animation, styling, binding, etc...
public static readonly DependencyProperty ButtonTitleProperty =
DependencyProperty.Register("ButtonTitle", typeof(string), typeof(PropertyButtonControl), null);
public string ButtonContent
{
get { return (string)GetValue(ButtonContentProperty); }
set { SetValue(ButtonContentProperty, value); }
}
// Using a DependencyProperty as the backing store for ButtonContent. This enables animation, styling, binding, etc...
public static readonly DependencyProperty ButtonContentProperty =
DependencyProperty.Register("ButtonContent", typeof(string), typeof(PropertyButtonControl), null);
}
}
If I used it in a page as:
<local:PropertyButtonControl IconBackground="Red" ButtonTitle="123" ButtonContent="456"></local:PropertyButtonControl>
After the program ran ,the content do not showed and color not changed? It seems is the binding problem.
But what's wrong with this? Thank you.

Answer 1

Your problem is the UserControl which is not adapted for a brand new button.
You should rather use a CustomControl. Read this if you want more details.
Here is how we do:
Create a new class inheriting from the Button control in a separate file PropertyButtonControl.cs:
public class PropertyButtonControl : Button
{
//No need for Constructor and InitializeComponent
public SolidColorBrush IconBackground[...]
public static readonly DependencyProperty IconBackgroundProperty =
DependencyProperty.Register("IconBackground", typeof(SolidColorBrush), typeof(PropertyButtonControl), null);
public ImageSource IconSource[...]
public static readonly DependencyProperty IconSourceProperty =
DependencyProperty.Register("IconSource", typeof(ImageSource), typeof(PropertyButtonControl), null);
public string ButtonTitle[...]
public static readonly DependencyProperty ButtonTitleProperty =
DependencyProperty.Register("ButtonTitle", typeof(string), typeof(PropertyButtonControl), null);
public string ButtonContent[...]
public static readonly DependencyProperty ButtonContentProperty =
DependencyProperty.Register("ButtonContent", typeof(string), typeof(PropertyButtonControl), null);
}
Create a ResourceDictionary containing the XAML template in a separate file PropertyButtonControl.xaml:
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:view="clr-namespace:StackTest.View">
<Style TargetType="{x:Type view:PropertyButtonControl }">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="auto"/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="0.6*"/>
<RowDefinition Height="0.4*"/>
</Grid.RowDefinitions>
<Border Width="{Binding Path=ActualHeight, RelativeSource={RelativeSource Self}}"
Grid.RowSpan="2"
Background="{Binding Path=IconBackground, RelativeSource={RelativeSource AncestorType=view:PropertyButtonControl}}">
</Border>
<TextBlock Grid.Column="1"
Text="{Binding Path=ButtonTitle, RelativeSource={RelativeSource AncestorType=view:PropertyButtonControl}}"/>
<TextBlock Grid.Column="1"
Grid.Row="1"
Foreground="#575757"
Text="{Binding Path=ButtonContent, RelativeSource={RelativeSource AncestorType=view:PropertyButtonControl}}"/>
<Border Grid.ColumnSpan="2"
Grid.RowSpan="2"
BorderBrush="#cecece"
BorderThickness="1"
Visibility="Collapsed"
Name="Bo"/>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="true">
<Setter TargetName="Bo" Property="Visibility" Value="Visible"></Setter>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ResourceDictionary>
Add this resource dictionary to your App.XAML resources:
<Application.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="View/PropertyButtonControl.xaml"/>
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Application.Resources>
Enjoy your control:
<local:PropertyButtonControl IconBackground="Blue" ButtonTitle="123" ButtonContent="456"/>
I put all my files in a folder named View. You must adapt it to your own structure.