none
Define xaml style to get rid gradient effect

    Question

  • I have a button; and I want to add a background color to the button via ViewModel. There is a method working in xaml or code behind. But I tried to use binding in ViewModel and failed.

    So how to get rid gradient effect in the xaml style?

    Monday, April 10, 2017 8:38 PM

All replies


  • Hi HZ.USA,

    >> I want to add a background color to the button via ViewModel

    You can try to define a style for the button. Then, use the following code to change the style Dynamically in ViewModel. You can refer the following two ways.

    XAML:

     <Style x:Key="Buttonstyle" TargetType="{x:Type Button}" BasedOn="{StaticResource {x:Type Button}}">
                <Setter Property="Foreground" Value="Red"/>
                <Setter Property="Background" Value="Silver"/>
                <Setter Property="Height" Value="23"/>
            </Style>
    
                    ControlTemplate btControlTemplate = (ControlTemplate)Application.Current.FindResource(newvalue);
                    button.Template = btControlTemplate;

    Code:

        Style style = new Style(typeof(Button));
                style.Setters.Add(new Setter(Button.ForegroundProperty, Brushes.Red));
                button5.Style = style;
    

    Best Regards,

    Yohann Lu



    MSDN Community Support<br/> Please remember to click &quot;Mark as Answer&quot; the responses that resolved your issue, and to click &quot;Unmark as Answer&quot; if not. This can be beneficial to other community members reading this thread. If you have any compliments or complaints to MSDN Support, feel free to contact <a href="mailto:MSDNFSF@microsoft.com">MSDNFSF@microsoft.com</a>.

    Wednesday, April 12, 2017 11:04 AM
  • I don't think your code is working. I want to use ViewModel instead of code behind. In ViewModel, we can't touch controls. But you access button5 in the code. So I have to use Binding property. I know the idea but I haven't been successfully.
    Wednesday, April 12, 2017 1:38 PM

  • Hi HZ.USA,

    You can try to use Attached property to implement it. The following code for your reference.

            <Button x:Name="buttons" local:ToothHeightDOclass.ToothHeight="{Binding }"   HorizontalAlignment="Left" Height="35"/>
    
    
        public class ToothHeightDOclass : DependencyObject
        {
            public static double GetToothHeight(DependencyObject obj)
            {
                return (double)obj.GetValue(ToothHeightProperty);
            }
    
            public static void SetToothHeight(DependencyObject obj, double value)
            {
                obj.SetValue(ToothHeightProperty, value);
            }
    
            public static readonly DependencyProperty ToothHeightProperty =
             DependencyProperty.RegisterAttached(
                 "ToothHeight",
                 typeof(double),
                 typeof(ToothHeightDOclass),
                 new PropertyMetadata(0.0, FinalValueChanged));
    
            private static void FinalValueChanged(DependencyObject obj, DependencyPropertyChangedEventArgs e)
            {
                
                double newvalue = (double)e.NewValue;
                Button button5 = obj as Button;
                Style style = new Style(typeof(Button));
                style.Setters.Add(new Setter(Button.ForegroundProperty, Brushes.Red));
                button5.Style = style;
            }
        }

    If I have any misunderstanding, you can include all necessary code snippets for anyone else to be able to reproduce your issue from scratch along with a detailed description about the results including any exception messages or you can upload your demo to OneDrive(Including your test material). We can download it and debugging. This will help us quickly analyze your problem.
    Share OneDrive files and folders:
    https://support.office.com/en-us/article/Share-OneDrive-files-and-folders-9fcc2f7d-de0c-4cec-93b0-a82024800c07


    Best Regards,

    Yohann Lu



    MSDN Community Support<br/> Please remember to click &quot;Mark as Answer&quot; the responses that resolved your issue, and to click &quot;Unmark as Answer&quot; if not. This can be beneficial to other community members reading this thread. If you have any compliments or complaints to MSDN Support, feel free to contact <a href="mailto:MSDNFSF@microsoft.com">MSDNFSF@microsoft.com</a>.

    Thursday, April 13, 2017 1:31 AM
  • I have the property already. I just want to bind it.

    <Button x:Name="buttonInfo"  Content="Info" CommandParameter="Info"  Click="Button_Click" Foreground="{Binding ForegroundColor}" Margin="0,2,0,0" FontWeight="Bold"/>
    
    ViewModel.ForegroundColor = new SolidColorBrush(Colors.Red);
    
            public Brush ForegroundColor
            {
                get
                {
                    if (this.foregroundColor == null)
                    {
                        this.foregroundColor = DefaultBrush;
                    }
                    return this.foregroundColor;
                }
                set
                {
                    if ((object.ReferenceEquals(this.foregroundColor, value) != true))
                    {
                        this.foregroundColor = value;
                        this.OnPropertyChanged("ForegroundColor");
                    }
                }
            }
    Thanks for help.

    Thursday, April 13, 2017 12:13 PM

  • Hi HZ.USA,

    >>I have the property already. I just want to bind it.

    I found you have implemented the OnPropertyChanged for your ForegroundColor property. So, when you change the value, the Button Foreground Color will change. You can add UpdateSourceTrigger=PropertyChanged in your Button.

          <Button x:Name="buttonInfo"  Content="Info" CommandParameter="Info"  Click="Button_Click" Foreground="{Binding ForegroundColor,Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}" Margin="0,2,0,0" FontWeight="Bold"/>


    Also, I suggest you try using the attached properties. This is a choice.

    Attached Properties Overview:
    https://msdn.microsoft.com/en-us/library/ms749011(v=vs.110).aspx

    Best Regards,

    Yohann Lu



    MSDN Community Support<br/> Please remember to click &quot;Mark as Answer&quot; the responses that resolved your issue, and to click &quot;Unmark as Answer&quot; if not. This can be beneficial to other community members reading this thread. If you have any compliments or complaints to MSDN Support, feel free to contact <a href="mailto:MSDNFSF@microsoft.com">MSDNFSF@microsoft.com</a>.

    Tuesday, April 18, 2017 3:00 AM
  • You may misunderstand my question. Using your code still has gradient effect as the button default style override the pure color even you use VireModel binding.

    I am not asking how to use ViewModel binding. Although I need it; the issue how to combine using ViewModel binding method and setting the correct button style to get rid of gradient effect.

    Tuesday, April 18, 2017 12:01 PM

  • Hi HZ.USA,

    >>the issue how to combine using ViewModel binding method and setting the correct button style to get rid of gradient effect.

    I have the following questions:

    Where the gradient effect of the button is defined?

    Have you used a third party MVVM framework?

    Also, you can try a Template Selector to decide which ViewTemplate will be used based on a variable in the ViewModel. The following article for your reference.

    Silverlight DataTemplateSelector:
    https://www.codeproject.com/Articles/92439/Silverlight-DataTemplateSelector

    At last, If I have any misunderstanding, please upload your demo to OneDrive(Including your test material). We can download it and debugging. This will help us quickly analyze your problem.
    Share OneDrive files and folders:
    https://support.office.com/en-us/article/Share-OneDrive-files-and-folders-9fcc2f7d-de0c-4cec-93b0-a82024800c07


    Best Regards,

    Yohann Lu


    MSDN Community Support<br/> Please remember to click &quot;Mark as Answer&quot; the responses that resolved your issue, and to click &quot;Unmark as Answer&quot; if not. This can be beneficial to other community members reading this thread. If you have any compliments or complaints to MSDN Support, feel free to contact <a href="mailto:MSDNFSF@microsoft.com">MSDNFSF@microsoft.com</a>.

    Thursday, April 20, 2017 10:28 AM
  • It has nothing to do with the third party. It is the default style in Silverlight, see link.

    Thursday, April 20, 2017 4:10 PM

  • Hi HZ.USA,

    As far as I know, you can try to define your own button style to get rid gradient effect. The following code for your reference.

       <UserControl.Resources>
            <Style TargetType="Button" x:Key="InformButton2"  >
                <Setter Property="Foreground" Value="Black"/>
                <Setter Property="FontStyle" Value="Normal"/>
                <Setter Property="FontFamily" Value="Arial"/>
                <Setter Property="FontWeight" Value="SemiBold"/>
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="Button">
                            <Grid>
                                <VisualStateManager.VisualStateGroups>
                                    <VisualStateGroup x:Name="CommomStates">
    
                                        <VisualState x:Name="Normal"/>
                                        <VisualState x:Name="MouseOver">
                                            <Storyboard>
                                                <ColorAnimation Duration="0" To="LightGray" Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)" Storyboard.TargetName="rectangle"/>
                                            </Storyboard>
                                        </VisualState>
                                        <VisualState x:Name="Pressed">
                                            <Storyboard>
                                                <ColorAnimation Duration="0" To="LightGray" Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)" Storyboard.TargetName="rectangle"/>
                                            </Storyboard>
                                        </VisualState>
                                        <VisualState x:Name="Disabled" >
                                            <Storyboard>
                                                <ColorAnimation Duration="0" To="LightGray" Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)" Storyboard.TargetName="rectangle"/>
                                            </Storyboard>
                                        </VisualState>
                                    </VisualStateGroup>
                                </VisualStateManager.VisualStateGroups>
                                <Rectangle x:Name="rectangle" Fill="#FFF4F4F4" StrokeThickness="1" Stroke="Black"/>
                                <ContentPresenter VerticalAlignment="Center" HorizontalAlignment="Center"/>
                            </Grid>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        </UserControl.Resources>
    
           <Button Name="SomeButton" Content="TEST change" Margin="45,85,85,0" Height="25"
                VerticalAlignment="Top" Foreground="Black" Style="{StaticResource InformButton2}">
            </Button>
    
    


    Best Regards,

    Yohann Lu


    MSDN Community Support<br/> Please remember to click &quot;Mark as Answer&quot; the responses that resolved your issue, and to click &quot;Unmark as Answer&quot; if not. This can be beneficial to other community members reading this thread. If you have any compliments or complaints to MSDN Support, feel free to contact <a href="mailto:MSDNFSF@microsoft.com">MSDNFSF@microsoft.com</a>.

    Friday, April 21, 2017 10:05 AM
  • It is better than before. However, I want to use ViewModel to change background rather than foreground.

    I have some code but not working well.

    <Button Name="SomeButton" Content="TEST change" Margin="45,85,85,0" Height="25"
                VerticalAlignment="Top" Background="{Binding ButtonBackground}" Style="{StaticResource InformButton2}">
            </Button>

    Then in ViewModel, I have

     public Brush ButtonBackground
            {
                get
                {
                    if (this.buttonBackground == null)
                    {
                        this.buttonBackground = BusinessLogic.DefaultBrush;
                    }
                    return this.buttonBackground;
                }
                set
                {
                    if ((object.ReferenceEquals(this.buttonBackground, value) != true))
                    {
                        this.buttonBackground = value;
                        this.OnPropertyChanged("ButtonBackground");
                    }
                }
            }
    Then ButtonBackground is given and changed at the running time.

    If (x==1) ButtonBackground = new SolidColorBrush(Colors.Yellow);

    else ButtonBackground = new SolidColorBrush(Colors.Green);

    In this case, the button's content may not show correctly. It shows the project name.


    • Edited by HZ.USA Friday, April 21, 2017 2:52 PM add
    Friday, April 21, 2017 2:32 PM