How can I binding DependencyProperty in Style(UWP)? - xaml

Question

I wanna make a custom usercontrol which actually just a image button.
Here is my project:
Here is code of ImageButton.cs:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Media;
using Windows.UI.Xaml.Controls;
namespace App1.UC
{
class ImageButton:Button
{
public ImageSource BackgroundImage
{
get { return (ImageSource)GetValue(BackgroundImageProperty); }
set { SetValue(BackgroundImageProperty, value); }
}
// Using a DependencyProperty as the backing store for MyProperty. This enables animation, styling, binding, etc...
public static readonly DependencyProperty BackgroundImageProperty =
DependencyProperty.Register("BackgroundImage", typeof(ImageSource), typeof(ImageButton), null);
}
}
Here is code of ImageButton.xaml:
<ResourceDictionary
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:App1.UC">
<Style TargetType="local:ImageButton">
<Style.Setters>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<Grid>
<Border Background="{Binding local:BackgroundImage}"></Border>
<Border Background="Blue"></Border>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style.Setters>
</Style>
</ResourceDictionary>
And here is code of MainPage.xaml:
<Page xmlns:my="using:App1.UC"
x:Class="App1.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:App1"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Page.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="/UC/ImageButton.xaml"/>
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Page.Resources>
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<my:ImageButton Height="100" Width="100" BackgroundImage="Assets/Wide310x150Logo.png" />
</Grid>
</Page>
The problem is I can't see the BackgroundImage which I set in my:ImageButton.
I doubted if is something wrong with binding the BackgroundImage in ImageButton.xaml.
I googled about it and found something like How to bind to attached property in UWP?
I tried as it said:
{Binding Path=(local:ImageButton.BackgroundImage), RelativeSource={RelativeSource Self}}
But no use again.
What's wrong with my programme?Would you please help me ?

Answer 1

You don't have to extend the Button just for displaying an image as its background. You can use ImageBrush directly like this
<Button>
<Button.Background>
<ImageBrush ImageSource="Assets/Wide310x150Logo.png" />
</Button.Background>
</Button>
Update
Extending an existing control with additional dependency properties can be simplified to the following steps.
1. Right click on your project, then go Add > New Item.... In the popup, select Templated Control and give it a
name ImageButton.cs.
[![enter image description here][1]][1]
Visual Studio will now automatically generate a new folder called
`Themes` with a `ResourceDictionary` file named `Generic.xaml`,
which is where the default style of your `ImageButton` goes.
[![enter image description here][2]][2]
Visual Studio will also generate an `ImageButton` class with the
following code.
public sealed class ImageButton : Control
{
public ImageButton()
{
this.DefaultStyleKey = typeof(ImageButton);
}
}
2. Change the base class to Button and add your own dependency property to the class.
public sealed class ImageButton : Button
public ImageSource BackgroundImage
{
get { return (ImageSource)GetValue(BackgroundImageProperty); }
set { SetValue(BackgroundImageProperty, value); }
}
// Using a DependencyProperty as the backing store for MyProperty. This enables animation, styling, binding, etc...
public static readonly DependencyProperty BackgroundImageProperty =
DependencyProperty.Register("BackgroundImage", typeof(ImageSource), typeof(ImageButton), null);
3. Provide your own style and put it inside Generic.xaml. Note you
will need to use TemplateBinding to pass values from your
dependency properties to the binding targets.
<Style TargetType="local:ImageButton">
<Style.Setters>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="local:ImageButton">
<Grid>
<Image Stretch="UniformToFill" Source="{TemplateBinding BackgroundImage}"></Border>
...
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style.Setters>
</Style>
That's it. Now, you can use it like below
<my:ImageButton Height="100" Width="100" BackgroundImage="Assets/Wide310x150Logo.png" />