Button background color is not set in wpf application when a conditional property is set via code

0
votes

I have got a button in one of my usercontrols whose background needs to be changed based on a property set. no matter what the value of Property is set (true or false), background color is never changed. I even noticed during debugging that value of property is set to true but the trigger is not fired to set the background color.

<UserControl
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
x:Class="WpfApplication1.SubToolbar"
x:Name="SubToolBar" Width="Auto" Height="Auto" HorizontalAlignment="Stretch" DataContext="{Binding RelativeSource={RelativeSource Self}}"
>

<UserControl.Resources>
    <Style x:Key="MyFocusVisual">
        <Setter Property="Control.Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type Control}">
                    <Grid Margin="8">
                        <Ellipse  Name="r1" Stroke="Black" StrokeDashArray="2 2" StrokeThickness="1"/>
                        <Border Name="border"  Width="{TemplateBinding ActualWidth}" Height="{TemplateBinding ActualHeight}" BorderThickness="1" CornerRadius="2"/>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
    <Style x:Key="CircleButton" TargetType="Button">

        <Setter Property="Background" Value="{ Binding Path= Background12,   RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=UserControl}, Mode=OneWay}"/>


        <Style.Triggers>

            <DataTrigger Binding="{Binding RiskHighLowMedium }"  Value="True">
                <Setter Property="Background" Value="{ Binding Path= Background12,   RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=UserControl}, Mode=OneWay}"/>
            </DataTrigger>

        </Style.Triggers>

    </Style>
</UserControl.Resources>


 <Border Background="#FFD4BFAE" CornerRadius="5" >
<Grid x:Name="LayoutRoot" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">

        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="60"/>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="50"/>
        </Grid.ColumnDefinitions>

        <TextBox  Grid.Column="0"  Padding="5" Text="{Binding  Path=ID}"/>
        <TextBox  Grid.Column="1" Margin="2,0,0,0" Padding="5" Text="{Binding  Path=Name}"/>

        <Button Name="highLowRisk" Padding="5" Grid.Column="2" Width="30" Height="30" Style="{StaticResource CircleButton}" Margin="5,5,5,5" />







    </Grid>
 </Border>

I am setting the style template like this in the xaml file.

but nothing seems to change the background color.

the code below is 

/// <summary>
/// Interaction logic for SubToolbar.xaml
/// </summary>
public partial class SubToolbar : UserControl, INotifyPropertyChanged
{
    /// <summary>
    /// default ctor
    /// </summary>
    public SubToolbar()
    {
        DataContext = this;
        InitializeComponent();
    }


    /// <summary>
    /// setting whethere 
    /// risk is high or low
    /// </summary>
    /// <param name="_riskhighLow"></param>
    public void SetRiskHighLow(bool _riskhighLow)
    {
        _riskHighLowMedium = _riskhighLow;
        this.OnPropertyChanged("RiskHighLowMedium");
        this.OnPropertyChanged("Background12");

    }

    /// <summary>
    /// RiskHighLowMedium
    /// </summary>

    private bool _riskHighLowMedium;

    /// <summary>
    /// property to set risk high
    /// low and medium
    /// </summary>
    public bool RiskHighLowMedium
    {
        get { return _riskHighLowMedium; }
        set
        {
                _riskHighLowMedium = value;

                this.OnPropertyChanged("RiskHighLowMedium");
                this.OnPropertyChanged("Background12");

        }
    }



    /// <summary>
    /// background property
    /// to set button background
    /// color
    /// </summary>
    public Brush Background12
    {
        get
        {
            return RiskHighLowMedium ? Brushes.Red : Brushes.Blue;

        }
    }

    #region INotifyPropertyChanged Members

    public event PropertyChangedEventHandler PropertyChanged;

    protected virtual void OnPropertyChanged(string propertyName)
    {

        if (this.PropertyChanged != null)
            this.PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
    }

    #endregion // INotifyPropertyChanged Members




}
2
c#wpfxamluser-controls
I think you might need some converter. More info: msdn.microsoft.com/en-us/library/… – Tafari
Where the properties are? Are they on the UserControl or on the ViewModel? – galenus
This is a Property set on a certain condition whether the condition is true or false. these properties are on usercontrol. – Shakti saxena
First, your code works as expected for me. Second, where from update of the property is performed? Third, you better use DependencyProperty for all of your properties on the control. – galenus

2 Answers

2
votes

You dont need DataTrigger here as you are not changing anything it its setter. You will have to Raise PropertyChanged for Background also with RiskHighLowMedium

        public bool RiskHighLowMedium
        {
            get { return _riskHighLowMedium; }
            set
            {
                    _riskHighLowMedium = value;
                    this.OnPropertyChanged("RiskHighLowMedium");
                    this.OnPropertyChanged("Background12");
            }
        }

and in xaml

     <Button Name="highLowRisk" Padding="5" Grid.Column="2" Width="30" Height="30" Background={Binding Background12} Margin="5,5,5,5" />
0
votes

Hope this helps !!!

  public partial class MainWindow : Window
{
    private ExampleViewModel m_ViewModel;
    public MainWindow()
    {
        InitializeComponent();
        m_ViewModel = new ExampleViewModel();
        this.DataContext = m_ViewModel;
    }

    private void btn_Click(object sender, RoutedEventArgs e)
    {
        m_ViewModel.RiskHighLowMedium = true;
    }
}

public class ExampleViewModel : INotifyPropertyChanged
{
    private bool _riskHighLowMedium = false;
    public ExampleViewModel()
    {

    }

    public bool RiskHighLowMedium
    {
        get 
        { 
            return _riskHighLowMedium; 
        }
        set
        {
            _riskHighLowMedium = value;
            OnPropertyChanged("RiskHighLowMedium");
        }
    }

    public Brush Background
    {
        get
        {
            return RiskHighLowMedium ? Brushes.Red : Brushes.Blue;
        }
    }

    public event PropertyChangedEventHandler PropertyChanged;
    protected void OnPropertyChanged(string propertyName)
    {
        if (this.PropertyChanged != null)
        {
            PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
        }
    }
}

 <Style x:Key="CircleButtonStyle" TargetType="Button">
        <Setter Property="Background" Value="{Binding Path=Background, Mode=OneWay}"/>
        <Style.Triggers>
            <DataTrigger Binding="{Binding RiskHighLowMedium}"  Value="True">
                <Setter Property="Background" Value="{ Binding Path= Background, Mode=OneWay}"/>
            </DataTrigger>
        </Style.Triggers>
    </Style>

  <Grid>
    <Button Name="btn" Height="40" Width="180" Content="Hello" Style="{StaticResource CircleButtonStyle}" Click="btn_Click"></Button>
</Grid>