Make a single method work for multiple WPF elements

Question

I've made a click event/method that alters the opacity and IsEnabled properties of a textbox.

private void EditButton(object sender, RoutedEventArgs e)
{
   religionTB.IsEnabled = true;

   DoubleAnimation fade = new 
   DoubleAnimation(1,TimeSpan.FromSeconds(0.2));
   religionTB.BeginAnimation(OpacityProperty, fade);
}

In my WPF project, there are multiple textboxes, I'd like to apply this method to all these textboxes without having to list all of them in the method. How would I go by this?

How do you call your `EditButton` method? Change it signature to `void EditButton(Button button)`? — mm8, Jun 17 '19 at 12:28

BionicCode · Answer 1 · 2019-06-17T05:37:29.650

You can achieve this by using a Style. To do so, go to the context of your event handler (Control or Window) and add a DependencyProperty, to flag the enabled mode and bind a ToggleButton (the edit button) to it that sets this property to enable/ disable the controls and to trigger a fade in and fade out animation:

In your control:

public static readonly DependencyProperty IsEditEnabledProperty = DependencyProperty.Register(
  "IsEditEnabled",
  typeof(bool),
  typeof(MainWindow),
  new PropertyMetadata(default(bool)));

public bool IsEditEnabled { get { return (bool) GetValue(MainWindow.IsEditEnabledProperty); } set { SetValue(MainWindow.IsEditEnabledProperty, value); } }

In your XAML add the TextBox style and link a ToggleButton to IsEditEnabled:

<Window.Resources>
  <Style x:Key="OpacityStyle" TargetType="TextBox">
    <Setter Property="Opacity" Value="0" />
    <Setter Property="IsEnabled" 
            Value="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType=Window}, Path=IsEditEnabled}" />

    <Style.Triggers>
      <DataTrigger Binding="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType=Window}, Path=IsEditEnabled}"
                   Value="True">

        <! Fade in animation -->
        <DataTrigger.EnterActions>
          <BeginStoryboard>
            <Storyboard>
              <DoubleAnimation Storyboard.TargetProperty="Opacity"
                                   BeginTime="0:0:0"
                                   From="0"
                                   To="1"
                                   Duration="0:0:0.2" />
            </Storyboard>
          </BeginStoryboard>
        </DataTrigger.EnterActions>

        <! Fade out animation -->
        <DataTrigger.ExitActions>
          <BeginStoryboard>
            <Storyboard>
              <DoubleAnimation Storyboard.TargetProperty="Opacity"
                                   BeginTime="0:0:0"
                                   From="1"
                                   To="0"
                                   Duration="0:0:0.2" />
            </Storyboard>
          </BeginStoryboard>
        </DataTrigger.ExitActions>        
      </DataTrigger>
    </Style.Triggers>
  </Style>
</Window.Resources>

<Grid>
  <StackPanel>
    <ToggleButton x:Name="EditButton" IsChecked="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType=Window}, Path=IsEditEnabled, Mode=TwoWay}" />
    <TextBox x:Name="AnimatedTextBox" Style="{StaticResource TextBoxAnimationStyle}" >
    <TextBox x:Name="AnotherAnimatedTextBox" Style="{StaticResource TextBoxAnimationStyle}" >
    <TextBox x:Name="NonanimatedTextBox" >
  </StackPanel>
</Grid>

If you make the Style implicit by removing the x:Key attribute, it will apply to all TextBox elements within the scope

Curious why dependency property is used rather than an ordinary property? — blearyeye, Jun 17 '19 at 22:18
With this, how would I apply it to different element types like combobox, text block, etc... — Draxalot2, Jun 18 '19 at 22:43
@Draxalot2 All you need to do is to change the `TargetType` of the `Style` from `TextBox` to `UIElement`. Now you can apply it to any desired element. — BionicCode, Jun 19 '19 at 06:23
@blearyeye A dependency property is needed to be able to bind to it. Since the Binding is a `TwoWay` binding (here it must be `OneWayToSource` at least), this property is a binding target. [And the target property must be a dependency property](https://learn.microsoft.com/en-us/dotnet/framework/wpf/data/data-binding-overview#basic-data-binding-concepts). — BionicCode, Jun 19 '19 at 06:28

Make a single method work for multiple WPF elements

1 Answers1