WPF MVVM: Top panel to block all controls

Question

My main window view:

<Window.Resources>
       <BooleanToVisibilityConverter x:Key="BoolToVisibility"/>
</Window.Resources>

<Grid x:Name="TopGrid">
    <Rectangle x:Name="TopPanel" Grid.ZIndex="3" 
               Fill="LightBlue"  Opacity="0.3" 
               Visibility="{Binding IsContentBlocked, Mode=TwoWay, Converter={StaticResource BoolToVisibility}}" />
    <Grid Name="main"  DataContext="{StaticResource mainViewModel}">

        <Grid.RowDefinitions>
            <RowDefinition Height="auto"></RowDefinition>
            <RowDefinition Height="auto"></RowDefinition>
            <RowDefinition></RowDefinition>
            <RowDefinition Height="auto"></RowDefinition>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="1.2*"></ColumnDefinition>
            <ColumnDefinition Width="*"></ColumnDefinition>
        </Grid.ColumnDefinitions>

        <!-- Here my controls: stackpanel, buttons, groupboxes, etc. -->
   </Grid>
</Grid>

View model:

    private bool isContentBlocked = false;        

    public bool IsContentBlocked
    {
        get
        {
            return this.isContentBlocked;
        }

        set
        {
            if (this.isContentBlocked == value)
            {
                return;
            }

            this.isContentBlocked = value;
            OnPropertyChanged("IsContentBlocked");
        }
    }

Initially when I launch WPF app, top panel should be hidden so all content shoudl be enabled, user should be able to play with them but for some reason, the top panel is not being hidden, it is shown, so all content cannot be accessed. I use a rectangle to make content to figure as blocked.

What am I doing wrong?

My view model is implementing INotifyPropertyChanged correctly.

This `DataContext="{StaticResource mainViewModel}"` suggests that you don't have your viewmodel available upper the tree, so your `Rectangle.Visibility` has nothing to bind to. You should check "output" window during debugging to see binding failures. — Evk, Oct 09 '17 at 15:37
One thing jumps out: you should not be using a `TwoWay` binding mode on `Visibility`. — Mike Strobel, Oct 09 '17 at 15:39
@Evk thanks for the suggestion. I had to move up the datacontext to the outer grid. now works. — Willy, Oct 09 '17 at 15:52

score -1 · Accepted Answer · answered Oct 09 '17 at 15:42

Provided that your IsContentBlocked property is defined in mainViewModel, you should set the DataContext of the TopGrid to this one

<Grid x:Name="TopGrid" DataContext="{StaticResource mainViewModel}">
    <Rectangle x:Name="TopPanel" Grid.ZIndex="3" 
               Fill="LightBlue"  Opacity="0.3" 
               Visibility="{Binding IsContentBlocked, Converter={StaticResource BoolToVisibility}}" />
    <Grid Name="main">
        <Grid.RowDefinitions>
            <RowDefinition Height="auto"></RowDefinition>
            <RowDefinition Height="auto"></RowDefinition>
            <RowDefinition></RowDefinition>
            <RowDefinition Height="auto"></RowDefinition>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="1.2*"></ColumnDefinition>
            <ColumnDefinition Width="*"></ColumnDefinition>
        </Grid.ColumnDefinitions>

        <!-- Here my controls: stackpanel, buttons, groupboxes, etc. -->
    </Grid>
</Grid>

yes, moving datacontext to outer grid is working. Thx. – Willy Oct 09 '17 at 15:52 — Willy, Oct 09 '17 at 15:52

WPF MVVM: Top panel to block all controls

1 Answers1