Question

I have a WPF page. Page has some content, but the last child component of page’s root layout is a user control that I have created. It looks like this:

<UserControl DataContext=UserControlViewModel>
  <UserControl.Resources>
    <BooleanToVisibilityConverter x:Key="visibilityConverter" />
  </UserControl.Resources>
  <Grid 
      Name="grid" 
      Visibility="{Binding IsOn, Converter={StaticResource visibilityConverter}}">
    <!-- Border to dim everything behind my user control -->
    <Border Background="#000000" Opacity="0.4" />
    <!-- The following border is red and holds the content -->
    <Border 
        Width="{Binding ElementName=txt, Path=ActualWidth}" 
        Height="{Binding ElementName=txt, Path=ActualHeight}" 
        Margin="{Binding ElementName=txt, Path=Margin}" 
        HorizontalAlignment="{Binding ElementName=txt, Path=HorizontalAlignment}" 
        VerticalAlignment="{Binding ElementName=txt, Path=VerticalAlignment}" 
        Background="Red">
      <TextBlock 
          Name="txt"
          Width="200" 
          Height="100" 
          Margin="20" 
          HorizontalAlignment="Center" 
          VerticalAlignment="Center" 
          Text="This is my super awesome message!" />
    </Border>
  </Grid>
</UserControl>

By default, the IsOn property of the UserControlViewModel object is set to false, i.e. the user control is not visible. I have implemented some logic that changes this property to true and then the user control is displayed in front of all other components which are dimmed. This works well.

Now, I want to create a fade effect animation which would dim the components that are behind the user control once it becomes visible. Next, I want to make my red border that holds the content to fade in from the left hand side, so moving + fade.

Let’s start with the fade effect first. I wrote this style to the Border that is supposed to do the dimming of background components:

<UserControl DataContext=UserControlViewModel>
  <UserControl.Resources>
    <BooleanToVisibilityConverter x:Key="visibilityConverter" />
  </UserControl.Resources>
  <Grid 
      Name="grid"
      Visibility="{Binding IsOn, Converter={StaticResource visibilityConverter}}">
    <!-- Border to dim everything behind my user control -->
    <Border Background="#000000" Opacity="0.4">
      <!-- The following style is new code -->
      <Border.Style>
        <Style TargetType="Border">
          <Style.Triggers>
            <Trigger Property="{Binding ElementName=grid, Visibility}" Value="Visible">
              <Trigger.EnterActions>
                <BeginStoryboard>
                  <Storyboard>
                    <DoubleAnimation 
                        Storyboard.TargetProperty="Opacity" 
                        From="0.0" 
                        To="0.4" 
                        Duration="0:0:1" />
                  </Storyboard>
                </BeginStoryboard>
              </Trigger.EnterActions>
            </Trigger>
          </Style.Triggers>
        </Style>
      </Border.Style>
    </Border>
    ...

But there’s the problem: I cannot set the binding on the trigger Property, because it is not a dependency property. I need a way to tell my trigger to fire once the grid has got the Visibility property set to Visible. Please help and thank you!

Second problem is, I don’t know how to do the moving of the red border, so I need help around some scale transformations as well, I guess… Thanks once again!

Answer 1

try replacing the following line:

Original:

<Trigger Property="{Binding ElementName=grid, Visibility}" Value="Visible">

Replacement:

<DataTrigger Binding={Binding Visibility, ElementName=grid} Value="Visibile">