locked
Change the colour of a text block programatically in windows store apps. RRS feed

  • Question

  • Hi,

    I want to change the colour of a textblock from code based on some conditions.

    Can somebody tell me how this could be achieved.

    Textblock1.Foreground =?

     

    Monday, September 23, 2013 10:00 AM

Answers

  • There are a couple of ways to do this. You never want to hardcode the color though. Hardcoding the text will make your app work incorrectly in high contrast mode. You'll also use more brushes if you create new ones for each TextBlock rather than reusing.

    I would probably set up a VisualState for the altered text condition and then animate the color in the VisualStateManager for that state. To trigger it from code call VisualStateManager.GoToState("MyCondition"). This allows the best separation between the actual visual and controlling the state from the code.

    The easiest way to do this is to load up the Xaml file in Blend. Go to the "States" pane and add a new VisualStateGroup for your conditions and states for the options. Select the condition you want to change the state for: Blend will go into recording mode. Select your TextBlock and change its Foreground property in the properties pane to the new color. If you don't already have a resource for it then click on the white square on the color editor tab and select "Convert to New Resource..."

    You will end up with Xaml like:

       <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
        	<VisualStateManager.VisualStateGroups>
        		<VisualStateGroup x:Name="MyCustomConditions">
        			<VisualState x:Name="Neutral"/>
        			<VisualState x:Name="MyCondition">
        				<Storyboard>
        					<ColorAnimation Duration="0" To="{StaticResource MyCustomForegroundColor}" Storyboard.TargetProperty="(TextBlock.Foreground).(SolidColorBrush.Color)" Storyboard.TargetName="textBlock" d:IsOptimized="True"/>
        				</Storyboard>
        			</VisualState>
        		</VisualStateGroup>
        	</VisualStateManager.VisualStateGroups>
            <TextBlock x:Name="textBlock">Lorem ipsum dolor sit amet</TextBlock>
        </Grid>
    You can also get fancy with animations or other changes. You might want to also change an icon when the condition is flagged or show additional text, so you can make sure that color isn't the only flag that you're in the new state.

    If you want to set it directly from code (like Khant suggests) then set the text colour from a resource.

    Define the brush in app.xaml for Default and HighContrast (and HighContrastWhite if not using a system color):

            <ResourceDictionary.ThemeDictionaries>
                    <ResourceDictionary x:Key="Default">
                        <SolidColorBrush x:Key="MyCustomForegroundBrush" Color="Red" />
                    </ResourceDictionary>
                    <ResourceDictionary x:Key="HighContrast">
                        <SolidColorBrush x:Key="MyCustomForegroundBrush" Color="{ThemeResource SystemColorHighlightTextColor}" />
                    </ResourceDictionary>
                 </ResourceDictionary.ThemeDictionaries>
            </ResourceDictionary>
    
    Then reference it as follows

     

    TextBlock1.Foreground  = Application.Current.Resources["MyCustomForegroundThemeBrush"]
    --Rob
    • Marked as answer by Anne Jing Monday, September 30, 2013 2:17 AM
    Tuesday, September 24, 2013 6:19 PM
    Moderator

All replies

  • Hello Naveen,

     Try this:

    Textblock1.Foreground = new SolidColorBrush(Colors.Red);

    or 

    Textblock1.Foreground = new SolidColorBrush(Color.FromArgb(100,155,155,155));

    Monday, September 23, 2013 10:19 AM
  • There are a couple of ways to do this. You never want to hardcode the color though. Hardcoding the text will make your app work incorrectly in high contrast mode. You'll also use more brushes if you create new ones for each TextBlock rather than reusing.

    I would probably set up a VisualState for the altered text condition and then animate the color in the VisualStateManager for that state. To trigger it from code call VisualStateManager.GoToState("MyCondition"). This allows the best separation between the actual visual and controlling the state from the code.

    The easiest way to do this is to load up the Xaml file in Blend. Go to the "States" pane and add a new VisualStateGroup for your conditions and states for the options. Select the condition you want to change the state for: Blend will go into recording mode. Select your TextBlock and change its Foreground property in the properties pane to the new color. If you don't already have a resource for it then click on the white square on the color editor tab and select "Convert to New Resource..."

    You will end up with Xaml like:

       <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
        	<VisualStateManager.VisualStateGroups>
        		<VisualStateGroup x:Name="MyCustomConditions">
        			<VisualState x:Name="Neutral"/>
        			<VisualState x:Name="MyCondition">
        				<Storyboard>
        					<ColorAnimation Duration="0" To="{StaticResource MyCustomForegroundColor}" Storyboard.TargetProperty="(TextBlock.Foreground).(SolidColorBrush.Color)" Storyboard.TargetName="textBlock" d:IsOptimized="True"/>
        				</Storyboard>
        			</VisualState>
        		</VisualStateGroup>
        	</VisualStateManager.VisualStateGroups>
            <TextBlock x:Name="textBlock">Lorem ipsum dolor sit amet</TextBlock>
        </Grid>
    You can also get fancy with animations or other changes. You might want to also change an icon when the condition is flagged or show additional text, so you can make sure that color isn't the only flag that you're in the new state.

    If you want to set it directly from code (like Khant suggests) then set the text colour from a resource.

    Define the brush in app.xaml for Default and HighContrast (and HighContrastWhite if not using a system color):

            <ResourceDictionary.ThemeDictionaries>
                    <ResourceDictionary x:Key="Default">
                        <SolidColorBrush x:Key="MyCustomForegroundBrush" Color="Red" />
                    </ResourceDictionary>
                    <ResourceDictionary x:Key="HighContrast">
                        <SolidColorBrush x:Key="MyCustomForegroundBrush" Color="{ThemeResource SystemColorHighlightTextColor}" />
                    </ResourceDictionary>
                 </ResourceDictionary.ThemeDictionaries>
            </ResourceDictionary>
    
    Then reference it as follows

     

    TextBlock1.Foreground  = Application.Current.Resources["MyCustomForegroundThemeBrush"]
    --Rob
    • Marked as answer by Anne Jing Monday, September 30, 2013 2:17 AM
    Tuesday, September 24, 2013 6:19 PM
    Moderator