none
binding to properties inside a datatemplate

    Question

  • Hi all

     

    Im creating a user control which will act like a border.  I will be able to specify via properties each side of the borders thickness and color.  I am using a DataTemplate for this because I want to be able to specify where I want the content to go inside the user control.

     

    My problem is I can’t seem to get the properties iv created in code (get;set) to change the thickness or color or the borders iv created in the xaml file.  Iv tried binding to them in the xaml file however they are not getting called.

     

     

    <UserControl x:Class="SpecialBorders._4SidedBorder"
           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" 
           mc:Ignorable="d"
           x:Name="userControl"
           d:DesignHeight="300" d:DesignWidth="300">
      <UserControl.ContentTemplate>
        <DataTemplate>
          <Grid>
            <Grid.RowDefinitions>
              <RowDefinition Height="Auto" />
              <RowDefinition Height="*" />
              <RowDefinition Height="Auto" />
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
              <ColumnDefinition Width="Auto" />
              <ColumnDefinition Width="*" />
              <ColumnDefinition Width="Auto" />
            </Grid.ColumnDefinitions>
    
            <!-- Top Border -->
            <Border Name="BorderTop" Height="{Binding BorderThicknessTop}" Background="{Binding ElementName=BorderTop, Path=BorderColorTop}" Grid.Column="0" Grid.Row="0" Grid.ColumnSpan="2" />
    
            <!-- Right Border -->
            <Border Name="BorderRight" Width="{Binding BorderThicknessRight}" Background="{Binding BorderColorRight}" Grid.Column="2" Grid.Row="0" Grid.RowSpan="3" />
    
            <ContentPresenter Content="{Binding ElementName=userControl,Path=Content}"/>
    
    
            <!-- Left Border -->
            <Border Name="BorderLeft" Width="{Binding BorderThicknessLeft}" Background="{Binding BorderColorTLeft}" Grid.Row="1" Grid.Column="0" Grid.RowSpan="2" />
            <!-- Bottom Border -->
            <Border Name="BorderBottom" Height="{Binding BorderThicknessBottom}" Background="{Binding BorderColorBottom}" Grid.Row="2" Grid.Column="1" />
          </Grid>
        </DataTemplate>
      </UserControl.ContentTemplate>
    
    </UserControl>
    
      public partial class _4SidedBorder : UserControl, INotifyPropertyChanged
      {
        /* private declarations are hear */
    
        public _4SidedBorder()
        {
          InitializeComponent(); 
        }
    
        public Brush BorderBrushColor
        {
          set
          {
            BorderColorTop = BorderTopBackground;
            BorderColorRight = BorderRightBackground;
            BorderColorLeft = BorderLeftBackground;
            BorderColorBottom = BorderBottomBackground;
          }
        }
    
        public Brush BorderColorTop
        {
          get
          {
            return BorderTopBackground;
          }
          set
          {
            BorderTopBackground = value;
            this.RaisePropertyChanged("BorderColorTop");
          }
        }
    
        public Brush BorderColorRight
        {
          get
          {
            return BorderRightBackground;
          }
          set
          {
            BorderRightBackground = value;
            this.RaisePropertyChanged("BorderColorRight");
          }
        }
    
        public Brush BorderColorLeft
        {
          get
          {
            return BorderLeftBackground;
          }
          set
          {
            BorderLeftBackground = value;
            this.RaisePropertyChanged("BorderColorLeft");
          }
        }
    
        public Brush BorderColorBottom
        {
          get
          {
            return BorderBottomBackground;
          }
          set
          {
            BorderBottomBackground = value;
            this.RaisePropertyChanged("BorderColorBottom");
          }
        }
    
        public double borderThickness
        {
          set
          {
            BorderTopThickness = value;
            BorderRightThickness = value;
            BorderLeftThickness = value;
            BorderBottomThickness = value;
          }
        }
    
        public double BorderThicknessTop
        {
          get
          {
            return BorderTopThickness;
          }
          set
          {
            BorderTopThickness = value;
            this.RaisePropertyChanged("BorderThicknessTop");
          }
        }
    
        public double BorderThicknessRight
        {
          get
          {
            return BorderRightThickness;
          }
          set
          {
            BorderRightThickness = value;
            this.RaisePropertyChanged("BorderThicknessRight");
          }
        }
    
        public double BorderThicknessLeft
        {
          get
          {
            return BorderLeftThickness;
          }
          set
          {
            BorderLeftThickness = value;
            this.RaisePropertyChanged("BorderThicknessLeft");
          }
        }
    
        public double BorderThicknessBottom
        {
          get
          {
            return BorderBottomThickness;
          }
          set
          {
            BorderBottomThickness = value;
            this.RaisePropertyChanged("BorderThicknessBottom");
    
          }
        }
    
        public event PropertyChangedEventHandler PropertyChanged;
    
        private void RaisePropertyChanged(string propertyName)
        {
          if (this.PropertyChanged != null)
            this.PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
        }
      }
    
    

    Wednesday, October 06, 2010 2:23 PM

Answers

  • Hi Midnightgizmo,

    The DataContext of this datatemplate is the Content of this usercontrol. Which is not the expected DataContext for your borders.

    You can place all these borders in a ControlTemplate instead of a DataTemplate to achieve what you want.

    For more information about control templating, please refer to http://msdn.microsoft.com/en-us/library/ms745683.aspx#styling_controltemplates.

    Best regards,

    Min


    Please remember to click “Mark as Answer” on the post that helps you, and to click “Unmark as Answer” if a marked post does not actually answer your question. This can be beneficial to other community members reading the thread.
    Friday, October 08, 2010 9:46 AM
    Moderator