Usercontrol - notify property change from ViewModel

Question

I'm trying to implement custom Border, which binds to bool property in ViewModel, and whenever this property changes I want to do some animation with Border.

ViewModel property has OnPropertyChanged interface, It looks like this:

public bool Enable_control
{
   get { return _enable_ctl; }
   set { _enable_ctl = value; OnPropertyChanged(); }
}
private bool _enable_ctl;

This is how I bind custom Border in xaml:

<cust_border:Border_slide ShowSlide={Binding Enable_control}"/>

And this is my custom border control code:

public class Border_slide : Border
{
    public Border_slide()
    {
    }
 
     public bool ShowSlide
     {
        get { return (bool)GetValue(ShowSlideProperty); }
        set { SetValue(ShowSlideProperty, value);}
     }
    
      public static readonly DependencyProperty ShowSlideProperty =
      DependencyProperty.Register("ShowSlide", typeof(bool), typeof(Border_slide), new 
      FrameworkPropertyMetadata(true, new PropertyChangedCallback(ShowSlideChanged)));
           
      private static void ShowSlideChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
      {
           //I would like to do animation of control when property of ViewModel changes - presumably here,
           //but PropertyChangedCallback gets triggered only once - not on every Enable_control change!
      }
}

So, question is: how do you properly update UserControl's dependency property from Viewmodel property change, in order to do something with UserControl next?

ShowSlideChanged is called whenever ShowSlide changes its value, i.e. whenever Enable_control changes its value. What exactly are you struggling with? Please provide a detailed explanation of what precisely should happen in the control when the property changes. — Clemens
@Clemens, not in my case and I don't know why. If I set a breakpoint in ShowSlideChanged, it stops there only when property in Viewmodel is changed once. E.g. my Enable, control has true value on start, when It get's false value I do get notified. But nothing happens when Enable_control get's true value back. — Lucy82
@Clemens, and all I want to do is a margin animation of a border - from left to right, and backwards when property changes. I can get it to work in one direction, but not backwards, because SlideChanged doesn't update anymore. My code for animation is there also. — Lucy82
From what you are showing here, we can't tell. Looks all ok. Maybe you are setting the ShowSlide property somewhere else, which would overwrite the Binding. Just a guess. — Clemens

james.lee james.lee · Accepted Answer · 2021-01-12T00:38:47

There was a time when I did something similar to yours.

In my case, I hope it will help since I solved it this way. But it can be different from what you think, so please let me know if there's anything I missed!

And I have uploaded my sample source code to GitHub.

Here sample sourcecode. https://github.com/ncoresoftsource/stackoverflowsample/tree/main/src/answers/dependency-border-animation

ViewModel

public class MainViewModel : ObservableObject
{
    private bool _enable_ctl;
    public bool Enable_control
    {
        get { return _enable_ctl; }
        set { _enable_ctl = value; OnPropertyChanged(); }
    }
}

MainWindow

I used Label instead of Border. Because Border cannot use ControlTemplate, it can be constrained to use and expand animation.

<CheckBox Content="Switch" IsChecked="{Binding Enable_control}"/>
<Label Style="{StaticResource SLIDER}"/>

App.xaml

<Style TargetType="Label" x:Key="SLIDER">
    <Setter Property="Background" Value="Transparent"/>
    <Setter Property="BorderBrush" Value="#AAAAAA"/>
    <Setter Property="BorderThickness" Value="1"/>
    <Setter Property="Width" Value="100"/>
    <Setter Property="Height" Value="100"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Label">
                <Border x:Name="border" Background="{TemplateBinding Background}"
                        BorderThickness="{TemplateBinding BorderThickness}"
                        BorderBrush="{TemplateBinding BorderBrush}"
                        Opacity="0">
                    <ContentPresenter/>
                </Border>
                <ControlTemplate.Triggers>
                    <DataTrigger Binding="{Binding Enable_control}" Value="True">
                        <DataTrigger.EnterActions>
                            <BeginStoryboard>
                                <Storyboard>
                                    <DoubleAnimation From="0" To="1" Duration="00:00:0.5" 
                                                     Storyboard.TargetName="border" 
                                                     Storyboard.TargetProperty="Opacity"/>
                                </Storyboard>
                            </BeginStoryboard>
                        </DataTrigger.EnterActions>
                        <DataTrigger.ExitActions>
                            <BeginStoryboard>
                                <Storyboard>
                                    <DoubleAnimation From="1" To="0" Duration="00:00:0.5" 
                                                     Storyboard.TargetName="border" 
                                                     Storyboard.TargetProperty="Opacity"/>
                                </Storyboard>
                            </BeginStoryboard>
                        </DataTrigger.ExitActions>
                    </DataTrigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Usercontrol - notify property change from ViewModel

2 Answers

ViewModel

MainWindow

App.xaml