Le réseau pour les développeurs > Forums - Accueil > Windows Presentation Foundation (WPF) > change foreground color of every textblock element inside a grid
Poser une questionPoser une question
 

Traitéechange foreground color of every textblock element inside a grid

  • jeudi 2 juillet 2009 22:31andradf Médailles de l'utilisateurMédailles de l'utilisateurMédailles de l'utilisateurMédailles de l'utilisateurMédailles de l'utilisateur
     
    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.

Réponses

  • vendredi 3 juillet 2009 04:34Rahul P Nath Médailles de l'utilisateurMédailles de l'utilisateurMédailles de l'utilisateurMédailles de l'utilisateurMédailles de l'utilisateur
     TraitéeA du code
    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
  • jeudi 9 juillet 2009 07:35Bruce.ZhouMSFT, ModérateurMédailles de l'utilisateurMédailles de l'utilisateurMédailles de l'utilisateurMédailles de l'utilisateurMédailles de l'utilisateur
     TraitéeA du code
    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.

Toutes les réponses

  • vendredi 3 juillet 2009 04:34Rahul P Nath Médailles de l'utilisateurMédailles de l'utilisateurMédailles de l'utilisateurMédailles de l'utilisateurMédailles de l'utilisateur
     TraitéeA du code
    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
  • jeudi 9 juillet 2009 07:35Bruce.ZhouMSFT, ModérateurMédailles de l'utilisateurMédailles de l'utilisateurMédailles de l'utilisateurMédailles de l'utilisateurMédailles de l'utilisateur
     TraitéeA du code
    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.