Setting Opacity for a grid through binding does not seem to work

Question

I have a grid whose opacity is set through the binding as below

Grid

x:Name="completedGrid"Opacity="{BindingGridOpacity,Converter={StaticResourcePercentConverter}}"

But the opacity does not seem to work when it is set through the binding property GridOpacity

I even tried to use the converter as in my example coding above, but it still does not seem to work.

Any Ideas?

Thanks

Answer 1

Do you have any messages in the output window?

Your code should actually work. The following viewmodel and XAML work nice:

public class MainPageViewModel
{
    public MainPageViewModel()
    {
        this.GridOpacity = .5;
    }
    public Double GridOpacity { get; set; }
}

<Page.DataContext>
    <local:MainPageViewModel />
</Page.DataContext>

<Grid Background="White">
    <Grid Margin="80"
            Background="Red"
            Opacity="{Binding GridOpacity}" />
</Grid>

Answer 2

No I don't see any information in output window. It works through the story board though.

The way I have application works like this. I have two grid layouts that are initially set as follows

Grid 1 - Visibile, and opacity = 100%, Grid 1's opacity is controlled by binding

Grid 2 - Collapsed and opacity = 0% . This is the grid also uses the binding for setting up these values. But the binding for opacity is still 100% even though it is set to 0.0 decimal value. Luckily Visibility = collapsed through binding helps not to show this grid.

At one stage - Grid 1 to become 20% opacity but still visible and Grid 2 to become Visible and opacity with 100%. This is where I see the Grid 1 opacity does not change to 20%.

However I also have a storyboard that does the same with the two grids at another stage. That works fine where I see the Grid 1 appears with 20% opacity.

Basically I create an Illusion where main window (grid1) goes faded in the background and grid2 appears in foreground as if it is a popup over the main window (grid 1).

Thanks

Answer 3

Does the ViewModel that contains the GridOpacity property correctly implement INotifyPropertyChanged? If not, your grid controls will indeed not react to the changes.

Answer 4

Yes it does, because I have other properties for other controls in the grid that uses the same view model. In fact the visibility property of the grid that is bound to view model property works good.

It is strange.

One thing I have to mention here is that DataContext for Grid 2 is defined within the Grid as follows

<Grid  ......>

    Data COntext is defined here

</Grid>

The Datacontext for Grid 1 is same what you have in your example except it is in Resources.

I will post the sample code once I go home.

Answer 5

The following example also works nicely. Here's a ViewModel class with two numeric properties that host the opacities for two grids:

public class MainPageViewModel : INotifyPropertyChanged
{
    private double blueOpacity;
    private double redOpacity = 1;

    public event PropertyChangedEventHandler PropertyChanged;

    public double BlueOpacity
    {
        get { return blueOpacity; }
        set
        {
            blueOpacity = value;
            OnPropertyChanged("BlueOpacity");
        }
    }

    public double RedOpacity
    {
        get { return redOpacity; }
        set
        {
            redOpacity = value;
            OnPropertyChanged("RedOpacity");
        }
    }

    private void OnPropertyChanged(string propertyName)
    {
        if (this.PropertyChanged != null)
        {
            this.PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
        }
    }
}

This is the structure of the View, it has two grids covering each other, and a slider to change the opacity levels:

<Page.DataContext>
    <local:MainPageViewModel />
</Page.DataContext>

<Grid>
    <Grid x:Name="RedGrid"
            Background="Red"
            Opacity="{Binding RedOpacity}" />
    <Grid x:Name="BlueGrid"
            Background="Blue"
            Opacity="{Binding BlueOpacity}" />
    <Slider ValueChanged="Slider_ValueChanged" />
</Grid>

Here's the event handler for the slider move (not really MVVM, but that's not an issue here):

private void Slider_ValueChanged(object sender, RangeBaseValueChangedEventArgs e)
{
    MainPageViewModel vm = this.DataContext as MainPageViewModel;
    vm.BlueOpacity = (e.NewValue) / 100;
    vm.RedOpacity = (100 - e.NewValue) / 100;
}

Hope this helps!

Answer 6

Hi Diederik:

Sorry, I did not post my code. but I will compare mine with yours and post my code tonight.

Thanks again

Answer 7

Here is the data context definition  that is also used by first Grid 1. Grid 1's opacity is controlled by binding property MainGridOpacity

<common:LayoutAwarePage.DataContext>
        <Model:Summary/>
</common:LayoutAwarePage.DataContext>

Here is how the Grid's opacity property is set. I also tried using converter which changes to percent value

<Grid x:Name="mainGrid" Background="#FF2E708A" Opacity="{Binding MainGridOpacity, Converter={StaticResource PercentConverter}}">

Here is how my Second Grid's Opacity and Visibility is set  using the binding

<Grid x:Name="completedGrid" Opacity="{Binding CompletedGame.GridOpacity, Converter={StaticResource PercentConverter}}" Visibility="{Binding CompletedGame.GridVisible, Converter={StaticResource VisibilityConvertor}}"   >

The CompletedGame is a class referenced in Summary class defined as datacontext.

Here is the code for the property MainGridOpacity

public decimal MainGridOpacity
        {
            get
            {
                return _mainGridOpacity;
            }
            set
            {
                AssignAndRaisePropertyChanged<decimal>("MainGridOpacity", ref _mainGridOpacity, value);
            }
        }

So it looks like I'm using the same concept that you were showing, but still it does not seem to work for me.

Answer 8

There must be something wrong with the converter then. Can you post its code? Does it return a double between 0 and 1?

Answer 9

Does the difference between Double and decimal make difference for Opacity?

Mine is decimal and yours is Double

Please note that I started using the converter only when without converter that was returning values between 0 and 1 was not working. Converter return a decimal value between 0 and 100. Just like the way we see in property window in the designer for opacity.

 public class PercentConverter : IValueConverter
    {
        public object Convert(object value, Type TargetType, object parameter, string language)
        {
            decimal returnValue;
            if (value != null)
            {
                decimal thisValue = (decimal)value;
                returnValue = thisValue * 100;
            }
            else
            {
                returnValue = 0;
            }
            return returnValue;
        }
        public object ConvertBack(object value, Type targetType, object parameter, string language)
        {
            decimal returnValue = 0;
            if (value != null)
            {
                decimal thisValue = (decimal)value;
                returnValue = thisValue / 100;
            }

            return returnValue;
        }
    }