如何在Style(UWP)中绑定DependencyProperty?

时间:2017-08-19 14:54:01

标签: xaml uwp

我想制作一个自定义的用户控件,它实际上只是一个图像按钮 这是我的项目:
enter image description here


这是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);


    }
}

以下是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>

这是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>


问题是我无法看到我在我的ImageButton中设置的BackgroundImage 我怀疑在ImageButton.xaml中绑定BackgroundImage是否有问题。
我用Google搜索了一下,发现了类似How to bind to attached property in UWP?的东西 我试着说:

{Binding Path=(local:ImageButton.BackgroundImage), RelativeSource={RelativeSource Self}}

但是没有用了。
我的计划有什么问题?你能帮助我吗?

1 个答案:

答案 0 :(得分:1)

您不必将Button扩展为仅显示图像作为其背景。您可以像这样直接使用ImageBrush

<Button>
    <Button.Background>
        <ImageBrush ImageSource="Assets/Wide310x150Logo.png" />
    </Button.Background>
</Button>

更新

使用其他依赖项属性扩展现有控件可以简化为以下步骤。

1。右键单击您的项目,然后转到添加&gt; 新项目...... 。在弹出窗口中,选择模板化控件并为其指定     名称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. 将基类更改为Button,并将自己的依赖项属性添加到类中。

    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。提供自己的风格并将其放在Generic.xaml内。请注意     需要使用TemplateBinding来传递您的值     绑定目标的依赖属性。

        <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>

那就是它。现在,您可以像下面那样使用它

<my:ImageButton Height="100" Width="100" BackgroundImage="Assets/Wide310x150Logo.png" />