binding value to template property

Question

I have a serious problem on binding value to property.

This is my source code.

public partial class MainPage : Page,Autodesk.Revit.UI.IDockablePaneProvider
{
    ....
    public System.Windows.Media.Brush BCol { get; set; }
    .....
}

<ListBox Style = "{DynamicResource ListBoxStyle}">
     ...
</ListBox>

<Style x:Key="ListBoxStyle" TargetType="{x:Type ListBox}">
   <Setter Property="Template">
     <Setter.Value>
         <ControlTemplate TargetType="{x:Type ListBox}">
              <Grid Background="{Binding  BCol}">
                   ...
              </Grid>
         </ControlTemplate>
     </Setter.Value>
   </Setter>
</Style>

I want to bind BCol to grid background but it doesn't work. How should I do?

Answer 1

Depending on where BCol is set, you might need to implement INotifyPropertyChanged interface. You also need to make sure that you are binding to the view model that is assigned to your DataContext.

You can also create a DependencyProperty. I have posted both solutions below. DependencyProperty one is probably the solution that you want.

INotifyPropertyChanged solution:

XAML

<Page x:Class="WpfTest.MainPage"
      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:WpfTest"
      mc:Ignorable="d" 
      d:DesignHeight="300" d:DesignWidth="300"
      Title="MainPage">

    <Grid>
        <Grid.Resources>
            <Style x:Key="ListBoxStyle" TargetType="{x:Type ListBox}">
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="{x:Type ListBox}">
                            <Grid Background="{Binding  BCol}">
                            </Grid>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        </Grid.Resources>
        <ListBox Style = "{DynamicResource ListBoxStyle}">
        </ListBox>
    </Grid>
</Page>

Code behind:

using System.ComponentModel;
using System.Windows.Controls;
using System.Windows.Media;

namespace WpfTest
{
    /// <summary>
    /// Interaction logic for MainPage.xaml
    /// </summary>
    public partial class MainPage : Page, INotifyPropertyChanged
    {
        private Brush bCol;

        public System.Windows.Media.Brush BCol
        {
            get { return bCol; }
            set
            {
                bCol = value; 
                RaisePropertyChanged("BCol");
            }
        }

        public MainPage()
        {
            InitializeComponent();
            DataContext = this; //This is a hack, you should really create a separate view model
            BCol=new SolidColorBrush(Colors.Blue);

        }

        public event PropertyChangedEventHandler PropertyChanged= delegate { };

        void RaisePropertyChanged(string name)
        {
            PropertyChanged(this,new PropertyChangedEventArgs(name));
        }

    }
}

DependencyProperty solution

XAML

<Page x:Class="WpfTest.MainPage"
      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:WpfTest"
      mc:Ignorable="d" 
      d:DesignHeight="300" d:DesignWidth="300"
      Title="MainPage">
    <Grid>
        <Grid.Resources>
            <Style x:Key="ListBoxStyle" TargetType="{x:Type ListBox}">
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="{x:Type ListBox}">
                            <Grid Background="{Binding RelativeSource={RelativeSource Mode=FindAncestor, 
                                AncestorType={x:Type local:MainPage}}, Path=BCol}">
                            </Grid>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        </Grid.Resources>
        <ListBox Style = "{DynamicResource ListBoxStyle}">
        </ListBox>
    </Grid>
</Page>

Code behind

using System.Windows;
using System.Windows.Controls;
using System.Windows.Media;

namespace WpfTest
{
    /// <summary>
    /// Interaction logic for MainPage.xaml
    /// </summary>
    public partial class MainPage : Page
    {
        private Brush bCol;

        public static DependencyProperty BColProperty =DependencyProperty.Register("BCol", typeof(Brush),typeof(MainPage));
    public Brush BCol
    {
        get { return (Brush)this.GetValue(BColProperty); }
        set { this.SetValue(BColProperty, value); }
    }

    public MainPage()
        {
            InitializeComponent();
            BCol=new SolidColorBrush(Colors.Blue);

        }
    }
}

Hope this helps.

Answer 2

您需要将其与所有xmlns一起添加到xaml的顶部

DataContext="{Binding RelativeSource={RelativeSource Self}}"