locked
Changing a button's background color (via code-behind) RRS feed

  • Question

  • Hi,

    I have the following button, and I'd like to change the background color of the button from white to a hex colour code from the code behind.

    <Button x:Name="btnContinue" Click="btnContinue_Click" Margin="318,198,0,0" HorizontalAlignment="Left" VerticalAlignment="Top" IsEnabled="False" Width="149">
                    <Button.Template>
                        <ControlTemplate TargetType="{x:Type Button}">
                            <Border x:Name="outerBorder" Background="#FFF" BorderThickness="4" CornerRadius="20" Width="146" Height="46" Margin="1,0,0,0">
                                <Border.Style>
                                    <Style TargetType="{x:Type Border}">
                                        <Style.Triggers>
                                            <Trigger Property="IsMouseOver" Value="True">
                                                <Setter Property="BorderBrush" Value="#CED58F"/>
                                            </Trigger>
                                        </Style.Triggers>
                                    </Style>
                                </Border.Style>
                                <Border BorderThickness="1" CornerRadius="20">
                                    <Border.Style>
                                        <Style TargetType="{x:Type Border}">
                                            <Style.Triggers>
                                                <DataTrigger Binding="{Binding IsMouseOver, ElementName=outerBorder}" Value="True">
                                                    <Setter Property="BorderBrush" Value="#9EB01C"/>
                                                </DataTrigger>
                                            </Style.Triggers>
                                        </Style>
                                    </Border.Style>
                                    <Grid>
                                        <Grid.ColumnDefinitions>
                                            <ColumnDefinition Width="Auto"/>
                                            <ColumnDefinition Width="Auto"/>
                                        </Grid.ColumnDefinitions>
                                        <TextBlock VerticalAlignment="Center" Grid.Column="1" FontSize="18" FontWeight="Bold" Foreground="#9EB11C" Margin="14 -2 0 0" Text="{TemplateBinding Content}"></TextBlock>
                                    </Grid>
                                </Border>
                            </Border>
                        </ControlTemplate>
                    </Button.Template>
                </Button>

    How would I do this?


    Thanks :)

    Sunday, January 11, 2015 8:14 PM

Answers

  • Hi BudBrain,

    Here is the template you need from code behind, used FrameworkElementFactory class to programmatically create template:

    //Template
    ControlTemplate template = new ControlTemplate(typeof(Button));
    
    //outerBorder
    FrameworkElementFactory borderElement = new FrameworkElementFactory(typeof(Border));
    borderElement.SetValue(Border.NameProperty, "outerBorder");
    borderElement.SetValue(Border.BackgroundProperty, (Brush)(new BrushConverter().ConvertFromString("#FFF")));
    borderElement.SetValue(Border.BorderThicknessProperty, new Thickness(4));
    borderElement.SetValue(Border.CornerRadiusProperty, new CornerRadius(20));
    borderElement.SetValue(Border.WidthProperty, 146.0);
    borderElement.SetValue(Border.HeightProperty, 46.0);
    borderElement.SetValue(Border.MarginProperty, new Thickness(1, 0, 0, 0));
    
    //Style for outerBorder
    Style borderStyle1 = new Style(typeof(Border));
    Trigger trigger1 = new Trigger() { Property = Border.IsMouseOverProperty, Value = true };
    var setter1 = new Setter() { Property = Border.BorderBrushProperty, Value = (Brush)(new BrushConverter().ConvertFromString("#CED58F")) };
    trigger1.Setters.Add(setter1);
    borderStyle1.Triggers.Add(trigger1);
    borderElement.SetValue(Border.StyleProperty, borderStyle1);
    
    
    //inner Border
    FrameworkElementFactory borderElement2 = new FrameworkElementFactory(typeof(Border));
    borderElement2.SetValue(Border.BorderThicknessProperty, new Thickness(1));
    borderElement2.SetValue(Border.CornerRadiusProperty, new CornerRadius(20));
    
    //Style for inner Border
    Style borderStyle2 = new Style(typeof(Border));
    DataTrigger dt1 = new DataTrigger() { Binding = new Binding("IsMouseOver") { ElementName = "outerBorder" }, Value=true };
    var setter2 = new Setter() { Property = Border.BorderBrushProperty, Value = (Brush)(new BrushConverter().ConvertFromString("#9EB01C")) };
    dt1.Setters.Add(setter2);
    borderStyle2.Triggers.Add(dt1);
    borderElement2.SetValue(Border.StyleProperty, borderStyle2);
    
    //inner Grid
    FrameworkElementFactory gridElement = new FrameworkElementFactory(typeof(Grid));
    
    FrameworkElementFactory tbElement = new FrameworkElementFactory(typeof(TextBlock));
    tbElement.SetValue(TextBlock.VerticalAlignmentProperty, VerticalAlignment.Center);
    tbElement.SetValue(TextBlock.FontSizeProperty, 18.0);
    tbElement.SetValue(TextBlock.FontWeightProperty, FontWeights.Bold);
    tbElement.SetValue(TextBlock.ForegroundProperty, (Brush)(new BrushConverter().ConvertFromString("#9EB11C")));
    tbElement.SetValue(TextBlock.MarginProperty, new Thickness(14, -2, 0, 0));
    tbElement.SetValue(TextBlock.TextProperty, new TemplateBindingExtension(Button.ContentProperty));
    
    gridElement.AppendChild(tbElement);
    
    borderElement2.AppendChild(gridElement);
    
    borderElement.AppendChild(borderElement2);
    
    template.VisualTree = borderElement;
    
    btnContinue.Template = template;

    Screenshot:


    We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place.
    Click HERE to participate the survey.

    • Marked as answer by BudBrain Monday, January 12, 2015 11:35 AM
    Monday, January 12, 2015 9:58 AM
  • If you use a TemplateBinding for Background property of the Border in the template that binds to the Background property of the actual Button, you could simply set the background property of the Button as usual:

     <Button x:Name="btnContinue" Click="btnContinue_Click" Margin="318,198,0,0" HorizontalAlignment="Left" VerticalAlignment="Top" IsEnabled="False" Width="149"
                  Background="#FFF">
            <Button.Template>
              <ControlTemplate TargetType="{x:Type Button}">
                <Border x:Name="outerBorder" Background="{TemplateBinding Background}" BorderThickness="4" CornerRadius="20" Width="146" Height="46" Margin="1,0,0,0">
                  <Border.Style>
                    <Style TargetType="{x:Type Border}">
                      <Style.Triggers>
                        <Trigger Property="IsMouseOver" Value="True">
                          <Setter Property="BorderBrush" Value="#CED58F"/>
                        </Trigger>
                      </Style.Triggers>
                    </Style>
                  </Border.Style>
                  <Border BorderThickness="1" CornerRadius="20">
                    <Border.Style>
                      <Style TargetType="{x:Type Border}">
                        <Style.Triggers>
                          <DataTrigger Binding="{Binding IsMouseOver, ElementName=outerBorder}" Value="True">
                            <Setter Property="BorderBrush" Value="#9EB01C"/>
                          </DataTrigger>
                        </Style.Triggers>
                      </Style>
                    </Border.Style>
                    <Grid>
                      <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="Auto"/>
                        <ColumnDefinition Width="Auto"/>
                      </Grid.ColumnDefinitions>
                      <TextBlock VerticalAlignment="Center" Grid.Column="1" FontSize="18" FontWeight="Bold" Foreground="#9EB11C" Margin="14 -2 0 0" Text="{TemplateBinding Content}"></TextBlock>
                    </Grid>
                  </Border>
                </Border>
              </ControlTemplate>
            </Button.Template>
          </Button>

    btnContinue.Background = Brushes.Blue;
    //or
    btnContinue.Background = (SolidColorBrush)(new BrushConverter().ConvertFrom("#ffaacc"));
    

    Please remember to mark helpful posts as answer and/or helpful.
    • Marked as answer by BudBrain Monday, January 12, 2015 11:35 AM
    Monday, January 12, 2015 11:25 AM

All replies

  • Hi BudBrain,

    Here is the template you need from code behind, used FrameworkElementFactory class to programmatically create template:

    //Template
    ControlTemplate template = new ControlTemplate(typeof(Button));
    
    //outerBorder
    FrameworkElementFactory borderElement = new FrameworkElementFactory(typeof(Border));
    borderElement.SetValue(Border.NameProperty, "outerBorder");
    borderElement.SetValue(Border.BackgroundProperty, (Brush)(new BrushConverter().ConvertFromString("#FFF")));
    borderElement.SetValue(Border.BorderThicknessProperty, new Thickness(4));
    borderElement.SetValue(Border.CornerRadiusProperty, new CornerRadius(20));
    borderElement.SetValue(Border.WidthProperty, 146.0);
    borderElement.SetValue(Border.HeightProperty, 46.0);
    borderElement.SetValue(Border.MarginProperty, new Thickness(1, 0, 0, 0));
    
    //Style for outerBorder
    Style borderStyle1 = new Style(typeof(Border));
    Trigger trigger1 = new Trigger() { Property = Border.IsMouseOverProperty, Value = true };
    var setter1 = new Setter() { Property = Border.BorderBrushProperty, Value = (Brush)(new BrushConverter().ConvertFromString("#CED58F")) };
    trigger1.Setters.Add(setter1);
    borderStyle1.Triggers.Add(trigger1);
    borderElement.SetValue(Border.StyleProperty, borderStyle1);
    
    
    //inner Border
    FrameworkElementFactory borderElement2 = new FrameworkElementFactory(typeof(Border));
    borderElement2.SetValue(Border.BorderThicknessProperty, new Thickness(1));
    borderElement2.SetValue(Border.CornerRadiusProperty, new CornerRadius(20));
    
    //Style for inner Border
    Style borderStyle2 = new Style(typeof(Border));
    DataTrigger dt1 = new DataTrigger() { Binding = new Binding("IsMouseOver") { ElementName = "outerBorder" }, Value=true };
    var setter2 = new Setter() { Property = Border.BorderBrushProperty, Value = (Brush)(new BrushConverter().ConvertFromString("#9EB01C")) };
    dt1.Setters.Add(setter2);
    borderStyle2.Triggers.Add(dt1);
    borderElement2.SetValue(Border.StyleProperty, borderStyle2);
    
    //inner Grid
    FrameworkElementFactory gridElement = new FrameworkElementFactory(typeof(Grid));
    
    FrameworkElementFactory tbElement = new FrameworkElementFactory(typeof(TextBlock));
    tbElement.SetValue(TextBlock.VerticalAlignmentProperty, VerticalAlignment.Center);
    tbElement.SetValue(TextBlock.FontSizeProperty, 18.0);
    tbElement.SetValue(TextBlock.FontWeightProperty, FontWeights.Bold);
    tbElement.SetValue(TextBlock.ForegroundProperty, (Brush)(new BrushConverter().ConvertFromString("#9EB11C")));
    tbElement.SetValue(TextBlock.MarginProperty, new Thickness(14, -2, 0, 0));
    tbElement.SetValue(TextBlock.TextProperty, new TemplateBindingExtension(Button.ContentProperty));
    
    gridElement.AppendChild(tbElement);
    
    borderElement2.AppendChild(gridElement);
    
    borderElement.AppendChild(borderElement2);
    
    template.VisualTree = borderElement;
    
    btnContinue.Template = template;

    Screenshot:


    We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place.
    Click HERE to participate the survey.

    • Marked as answer by BudBrain Monday, January 12, 2015 11:35 AM
    Monday, January 12, 2015 9:58 AM
  • Many thanks Franlin, your effort there is greatly appreciated.

    That said, I need to change the background colour of the actual button rather than the border :/

    Monday, January 12, 2015 10:33 AM
  • If you use a TemplateBinding for Background property of the Border in the template that binds to the Background property of the actual Button, you could simply set the background property of the Button as usual:

     <Button x:Name="btnContinue" Click="btnContinue_Click" Margin="318,198,0,0" HorizontalAlignment="Left" VerticalAlignment="Top" IsEnabled="False" Width="149"
                  Background="#FFF">
            <Button.Template>
              <ControlTemplate TargetType="{x:Type Button}">
                <Border x:Name="outerBorder" Background="{TemplateBinding Background}" BorderThickness="4" CornerRadius="20" Width="146" Height="46" Margin="1,0,0,0">
                  <Border.Style>
                    <Style TargetType="{x:Type Border}">
                      <Style.Triggers>
                        <Trigger Property="IsMouseOver" Value="True">
                          <Setter Property="BorderBrush" Value="#CED58F"/>
                        </Trigger>
                      </Style.Triggers>
                    </Style>
                  </Border.Style>
                  <Border BorderThickness="1" CornerRadius="20">
                    <Border.Style>
                      <Style TargetType="{x:Type Border}">
                        <Style.Triggers>
                          <DataTrigger Binding="{Binding IsMouseOver, ElementName=outerBorder}" Value="True">
                            <Setter Property="BorderBrush" Value="#9EB01C"/>
                          </DataTrigger>
                        </Style.Triggers>
                      </Style>
                    </Border.Style>
                    <Grid>
                      <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="Auto"/>
                        <ColumnDefinition Width="Auto"/>
                      </Grid.ColumnDefinitions>
                      <TextBlock VerticalAlignment="Center" Grid.Column="1" FontSize="18" FontWeight="Bold" Foreground="#9EB11C" Margin="14 -2 0 0" Text="{TemplateBinding Content}"></TextBlock>
                    </Grid>
                  </Border>
                </Border>
              </ControlTemplate>
            </Button.Template>
          </Button>

    btnContinue.Background = Brushes.Blue;
    //or
    btnContinue.Background = (SolidColorBrush)(new BrushConverter().ConvertFrom("#ffaacc"));
    

    Please remember to mark helpful posts as answer and/or helpful.
    • Marked as answer by BudBrain Monday, January 12, 2015 11:35 AM
    Monday, January 12, 2015 11:25 AM
  • Thanks both :)
    Monday, January 12, 2015 11:36 AM