WPF - Best way of responding to changes in a ViewModel at Page/Window level

Question

I'm developing an XBAP and i have a simple requirement.

The DataContext of the whole main page is set to an instance of my UserViewModel. The UserViewModel has a DependencyProperty called AuthenticationState which is an enum with values like 'Authenticated','NotAutheticated' and 'AuthenticationFailed'.

Now, i need to respond to any change in this value by hiding/displaying various elements on the page.

What (and where) is the best way of doing that?

Answer 1

The best way would be to use a DataTrigger. So something like this:

<Window.Triggers>
    <DataTrigger Binding="{Binding AuthenticationState}" Value="NotAuthenticated">
     <Setter TargetName="nameOfControl" Property="Visibility" Value="Collapsed" />
    </DataTrigger>
    ...
    <TextBox x:Name="nameOfControl" />
</Window.Triggers>

As long as you UserViewModel object is in the DataContext of the Window then this should work!

Answer 2

As you mentioned you can't use a DataTrigger directly on a control. A work around would be to use a style on each Control that needs to be hidden.

<Grid>
    <Rectangle Fill="Red" />
    <Grid.Style>
     <Style TargetType="Grid">
      <Style.Triggers>
       <DataTrigger Binding="{Binding Test}" Value="true">
        <Setter Property="Visibility" Value="Collapsed" />
       </DataTrigger>
      </Style.Triggers>
     </Style>
    </Grid.Style>
</Grid>

Answer 3

A preferable method would be to use a Converter called "AuthenticationStateToVisibilityConverter" that is used in binding the control's Visibility property to the data context's AuthenticationState property.

Answer 4

Actually, the best way to do this is to expose the appropriate properties from your view model. This makes your logic more centralized and easier to test. Also, it performs better than converters. It is, after all, a view model. Therefore, it should model the view. If the view needs a property to tell it when to hide / show a panel, add such a property to your view model.

HTH, Kent

Answer 5

Managed to sort it using styles. It's a pain but it works!

The full source is below.

<Grid x:Name="contentGrid" Grid.Row="1">
        <!--login-->
        <controls:LoginControl>
            <controls:LoginControl.Style>
                <Style>
                    <Setter Property="Control.Opacity" Value="0"/>
                    <Setter Property="Control.IsHitTestVisible" Value="False"/>
                    <Style.Triggers>
                        <DataTrigger Binding="{Binding Source={StaticResource UserViewModel},Path=UserAuthenticationState}"
                                     Value="{x:Static model:AuthenticationState.NotAuthenticated}">
                            <Setter Property="Control.IsHitTestVisible" Value="True"/>
                            <DataTrigger.EnterActions>
                                <BeginStoryboard>
                                    <Storyboard>
                                        <DoubleAnimation To="1" Duration="0:0:2"
                                                         Storyboard.TargetProperty="Opacity"></DoubleAnimation>
                                    </Storyboard>
                                </BeginStoryboard>
                            </DataTrigger.EnterActions>
                            <DataTrigger.ExitActions>
                                <BeginStoryboard>
                                    <Storyboard>
                                        <DoubleAnimation To="0" Duration="0:0:2"
                                                         Storyboard.TargetProperty="Opacity"></DoubleAnimation>
                                    </Storyboard>
                                </BeginStoryboard>
                            </DataTrigger.ExitActions>
                        </DataTrigger>
                    </Style.Triggers>
                </Style>
            </controls:LoginControl.Style>
        </controls:LoginControl>    

        <!--slider-->
        <slider:PageSlider>
            <Button>1</Button>
            <Button>2</Button>
            <Button>3</Button>
            <slider:PageSlider.Style>
                <Style>
                    <Setter Property="Control.Opacity" Value="0"/>
                    <Setter Property="Control.IsHitTestVisible" Value="False"/>
                    <Style.Triggers>
                        <DataTrigger Binding="{Binding Source={StaticResource UserViewModel},Path=UserAuthenticationState}"
                                     Value="{x:Static model:AuthenticationState.Authenticated}">
                            <Setter Property="Control.IsHitTestVisible" Value="True"/>
                            <DataTrigger.EnterActions>
                                <BeginStoryboard>
                                    <Storyboard>
                                        <DoubleAnimation To="1" Duration="0:0:2"
                                                         Storyboard.TargetProperty="Opacity"></DoubleAnimation>
                                    </Storyboard>
                                </BeginStoryboard>
                            </DataTrigger.EnterActions>
                            <DataTrigger.ExitActions>
                                <BeginStoryboard>
                                    <Storyboard>
                                        <DoubleAnimation To="0" Duration="0:0:2"
                                                         Storyboard.TargetProperty="Opacity"></DoubleAnimation>
                                    </Storyboard>
                                </BeginStoryboard>
                            </DataTrigger.ExitActions>
                        </DataTrigger>
                    </Style.Triggers>
                </Style>
            </slider:PageSlider.Style>
        </slider:PageSlider>
    </Grid>