none
change foreground color of every textblock element inside a grid RRS feed

  • Question

  • Hello,
    I am starting to learn WPF and I've come across an issue I cant seem to be able to get around.
    I have a grid with some textBlocks in it. I want to change the color of the text in all of these depending on the value on a slider.
    In the <grid> tag I can set the property TextBlock.Foreground="#..." and it sets the color for all its children that are TextBlocks.

    How can I set the TextBlock.Foreground property in a Grid element during runtime?

    many thanks.

    andraf.
    Thursday, July 2, 2009 10:31 PM

Answers

  • Hi,
    You can use DataTrigger .Based on the value in the cell you can assign different colors(or someother property).

    Here is an example.
    If you enter 5 in the textbox it will show in red
    <TextBox  Height="23" Margin="120,33,38,0" Name="TextBox1" VerticalAlignment="Top" >
                <TextBox.Style>
                    <Style TargetType="{x:Type TextBox}">
                        <Style.Triggers>
                            <DataTrigger Binding="{Binding RelativeSource={RelativeSource Self},Path=Text}" Value="5">
                                <Setter Property="Foreground" Value="Red"/>
                            </DataTrigger>
                        </Style.Triggers>  
                    </Style>
                </TextBox.Style>
            </TextBox>

    You could also use a Converter on your foreground property and assign the color based on your requirement
    See this link for as sample in using converters(it might not be directly addressing your problem though)

    Hope it helps
    FEAR NOT TO BE JUST Please mark posts as answers/helpful if it answers your query
    Friday, July 3, 2009 4:34 AM
  • Hi andradf,

    Rahul has given useful suggestions and code. Here I wrote the code directly addressing your problems. The R property of the Color will change according to the value of the slider control. They are connected using databinding.

    XAML code:

    <Window x:Class="ChangeTextBlockForegroundProperty.Window1"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
            xmlns:local="clr-namespace:ChangeTextBlockForegroundProperty"
        Title="Window1" Height="300" Width="300">
        <Window.Resources>
        </Window.Resources>
        <Grid Name="grid1">
            <Grid.Resources>
                <Style TargetType="TextBlock">
                    <Style.Setters>
                        <Setter Property="Foreground">
                            <Setter.Value>
                                <Binding ElementName="slider1" Path="Value">
                                    <Binding.Converter>
                                        <local:MyConverter></local:MyConverter>
                                    </Binding.Converter>
                                </Binding>
                            </Setter.Value>    
                        </Setter>
                    </Style.Setters>
                </Style>
            </Grid.Resources>
            <StackPanel>
            <TextBlock>dddd</TextBlock>
                <TextBlock>abc</TextBlock>
                <TextBlock>ddd</TextBlock>
                <TextBlock>eee</TextBlock>
                <Slider Name="slider1" Maximum="255" Minimum="0"></Slider>
                </StackPanel>
        </Grid>
    </Window>
    
    C# code:

    Implement the converter:
        public partial class Window1 : Window
        {
            public Window1()
            {
                InitializeComponent();
                
            }
        }
        public class MyConverter : IValueConverter 
        {
            public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
            {
                byte a = 0;
                Color c = Color.FromArgb(0,0,0,0) ;
                 SolidColorBrush brush =null;
                 if (value != null)
                 {
                     double tmp = double.Parse(value.ToString());
                     a = (byte)tmp;
                     // Red color will change according to the value of the Slider
                     c = Color.FromArgb(255, a, 0, 0);
                     brush = new SolidColorBrush(c);
                 }
                 else
                 {
                     throw new ArgumentException("value can not be null");
                 }
                return brush;
            }
            public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
            {
                //no need to implement here.
                throw new NotImplementedException();
            }
        }

    After you change the value of the slider bar, you will see the Foreground color of the TextBlock changes.


    Best regards,
    Bruce Zhou


    Please mark the replies as answers if they help and unmark if they don't.
    • Marked as answer by Bruce.Zhou Friday, July 10, 2009 9:29 AM
    Thursday, July 9, 2009 7:35 AM

All replies

  • Hi,
    You can use DataTrigger .Based on the value in the cell you can assign different colors(or someother property).

    Here is an example.
    If you enter 5 in the textbox it will show in red
    <TextBox  Height="23" Margin="120,33,38,0" Name="TextBox1" VerticalAlignment="Top" >
                <TextBox.Style>
                    <Style TargetType="{x:Type TextBox}">
                        <Style.Triggers>
                            <DataTrigger Binding="{Binding RelativeSource={RelativeSource Self},Path=Text}" Value="5">
                                <Setter Property="Foreground" Value="Red"/>
                            </DataTrigger>
                        </Style.Triggers>  
                    </Style>
                </TextBox.Style>
            </TextBox>

    You could also use a Converter on your foreground property and assign the color based on your requirement
    See this link for as sample in using converters(it might not be directly addressing your problem though)

    Hope it helps
    FEAR NOT TO BE JUST Please mark posts as answers/helpful if it answers your query
    Friday, July 3, 2009 4:34 AM
  • Hi andradf,

    Rahul has given useful suggestions and code. Here I wrote the code directly addressing your problems. The R property of the Color will change according to the value of the slider control. They are connected using databinding.

    XAML code:

    <Window x:Class="ChangeTextBlockForegroundProperty.Window1"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
            xmlns:local="clr-namespace:ChangeTextBlockForegroundProperty"
        Title="Window1" Height="300" Width="300">
        <Window.Resources>
        </Window.Resources>
        <Grid Name="grid1">
            <Grid.Resources>
                <Style TargetType="TextBlock">
                    <Style.Setters>
                        <Setter Property="Foreground">
                            <Setter.Value>
                                <Binding ElementName="slider1" Path="Value">
                                    <Binding.Converter>
                                        <local:MyConverter></local:MyConverter>
                                    </Binding.Converter>
                                </Binding>
                            </Setter.Value>    
                        </Setter>
                    </Style.Setters>
                </Style>
            </Grid.Resources>
            <StackPanel>
            <TextBlock>dddd</TextBlock>
                <TextBlock>abc</TextBlock>
                <TextBlock>ddd</TextBlock>
                <TextBlock>eee</TextBlock>
                <Slider Name="slider1" Maximum="255" Minimum="0"></Slider>
                </StackPanel>
        </Grid>
    </Window>
    
    C# code:

    Implement the converter:
        public partial class Window1 : Window
        {
            public Window1()
            {
                InitializeComponent();
                
            }
        }
        public class MyConverter : IValueConverter 
        {
            public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
            {
                byte a = 0;
                Color c = Color.FromArgb(0,0,0,0) ;
                 SolidColorBrush brush =null;
                 if (value != null)
                 {
                     double tmp = double.Parse(value.ToString());
                     a = (byte)tmp;
                     // Red color will change according to the value of the Slider
                     c = Color.FromArgb(255, a, 0, 0);
                     brush = new SolidColorBrush(c);
                 }
                 else
                 {
                     throw new ArgumentException("value can not be null");
                 }
                return brush;
            }
            public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
            {
                //no need to implement here.
                throw new NotImplementedException();
            }
        }

    After you change the value of the slider bar, you will see the Foreground color of the TextBlock changes.


    Best regards,
    Bruce Zhou


    Please mark the replies as answers if they help and unmark if they don't.
    • Marked as answer by Bruce.Zhou Friday, July 10, 2009 9:29 AM
    Thursday, July 9, 2009 7:35 AM