WPF Changing dependency property of custom control in XAML doesnt update XAML preview

Question

Here is code of my custom control (it will be something like my own panel). And here I have textblock, property Text of this TextBlock is binded to dependency property which was declared in code-behind of this control

Custom Panel - ExtensibleViewPanel.xaml

<UserControl x:Class="OrderTrackingSystem.Presentation.CustomControls.ExtensibleViewPanel"
             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:OrderTrackingSystem.Presentation.CustomControls"
             mc:Ignorable="d" 
             xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
             d:DesignHeight="950" d:DesignWidth="160">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition MaxHeight="100" MinHeight="100"/>
            <RowDefinition/>
        </Grid.RowDefinitions>
        <!-- Header for each View -->
        <Border Grid.Row="0"
                Background="DeepPink">
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition/>
                    <ColumnDefinition/>
                    <ColumnDefinition/>
                </Grid.ColumnDefinitions>
                <TextBlock VerticalAlignment="Center"
                       HorizontalAlignment="Center"
                       FontSize="17"
                       Grid.Column="1"
                       Foreground="Black"
                       Text="{Binding Caption}"/>
                <Button
                    Grid.Column="2"
                    Style="{StaticResource MaterialDesignFloatingActionMiniAccentButton}"
                    HorizontalAlignment="Right"
                    VerticalAlignment="Bottom"
                    Margin="5"
                    Height="20"
                    Width="20">
                    <materialDesign:PackIcon Kind="ChevronRight" />
                </Button>
            </Grid>
        </Border>
        <!-- ContentPresenter for User content -->
        <ContentPresenter Grid.Row="1" Content="{Binding ViewContent}"/>
    </Grid>
</UserControl>

Code-behind - ExtensibleViewPanel.xaml.cs

public partial class ExtensibleViewPanel : UserControl, INotifyPropertyChanged
    {
        #region Dependency properties

        /* DP to set panel header name */
        public string Caption
        {
            get { return (string)GetValue(CaptionProperty); }
            set
            {
                SetValue(CaptionProperty, value);
                PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(nameof(Caption)));
            }
        }

        public static readonly DependencyProperty CaptionProperty =
            DependencyProperty.Register("Caption",
                typeof(string),
                typeof(ExtensibleViewPanel),
                new FrameworkPropertyMetadata(default(string), FrameworkPropertyMetadataOptions.BindsTwoWayByDefault | FrameworkPropertyMetadataOptions.AffectsRender));


        /* DP to set panel content */
        public object ViewContent
        {
            get { return (object)GetValue(ViewContentProperty); }
            set { SetValue(ViewContentProperty, value); }
        }


        public static readonly DependencyProperty ViewContentProperty =
            DependencyProperty.Register("ViewContent", 
                typeof(object), 
                typeof(ExtensibleViewPanel), 
                new FrameworkPropertyMetadata(default(object), FrameworkPropertyMetadataOptions.BindsTwoWayByDefault | FrameworkPropertyMetadataOptions.AffectsRender));



        public event PropertyChangedEventHandler PropertyChanged;

        #endregion

        public ExtensibleViewPanel()
        {
            InitializeComponent();
            DataContext = this;
        }
    }

As you can see i set DataContent of MyControl to it's code-behind. And then the main problem:

I Add my control to XAML

<ctrls:ExtensibleViewPanel Grid.Column="0" 
                                   Grid.RowSpan="4"
                                   Caption="XXL"
                                   Grid.Row="0">
</ctrls:ExtensibleViewPanel>

I dont run program, only set Caption dependency property to "XXL" and view of my control doesnt change (XAML preview), i want the same effect as when you add textblock and set property Text it into xaml designer, xaml designer of textblock show this text immediately

When i start my program, my properties working good, and i see my Caption in opened program, but i want to understand how to update xaml preview after changing dependency property*

As a note, you do not need to implement INotifyPropertyChanged for dependency properties. They already have their own change notification mechanism. Besides that, a control should not set its own DataContext, because that breaks the standard DataContext-based Bindings of its properties. In the control's XAML, bind to its own properties by RelativeSource Bindings, like `Text="{Binding Caption, RelativeSource={RelativeSource AncestorType=UserControl}}"`. — Clemens, May 04 '22 at 17:17
@Clemens thank you my friend, that was a right solution, you are the best :) — m1zl-s, May 04 '22 at 17:56

WPF Changing dependency property of custom control in XAML doesnt update XAML preview

0 Answers0