C# – Change background colour of TextBlock in C#

I managed to do a similar thing in Silverlight 4 for a ListBox popping under an AutoCompleteBox, but it was copious amounts of Binging and XAML rape.

Basically you have to create a ListBoxItem style and force some control template hackery under it. This then you can apply on your ListBox and it should work.

I just copied the relevant code from the project I'm working on so you'll have to tweak it a bit, but it does change both the font and the selection rectangle colour on mouse over, so should be a great start.

    <Style x:Key="MyListBoxItemStyle" TargetType="ListBoxItem">
        <Setter Property="Foreground" Value="#FF4C4C4C" />
        <Setter Property="FontStyle" Value="Normal" />
        <Setter Property="FontWeight" Value="Bold"/>
        <Setter Property="FontFamily" Value="Arial"/>
        <Setter Property="Template">
            <Setter.Value>
              <ControlTemplate TargetType="ListBoxItem">
                <Grid Background="{TemplateBinding Background}">
                  <VisualStateManager.VisualStateGroups>
                    <VisualStateGroup x:Name="CommonStates">
                        <VisualStateGroup.Transitions>
                            <VisualTransition GeneratedDuration="0:0:0.2" To="MouseOver">
                                <VisualTransition.GeneratedEasingFunction>
                                    <CubicEase EasingMode="EaseOut"/>
                                </VisualTransition.GeneratedEasingFunction>
                            </VisualTransition>
                            <VisualTransition From="MouseOver" GeneratedDuration="0:0:0.1">
                                <VisualTransition.GeneratedEasingFunction>
                                    <CubicEase EasingMode="EaseOut"/>
                                </VisualTransition.GeneratedEasingFunction>
                            </VisualTransition>
                        </VisualStateGroup.Transitions>
                      <VisualState x:Name="Normal"/>
                      <VisualState x:Name="MouseOver">
                        <Storyboard>
                          <DoubleAnimationUsingKeyFrames Storyboard.TargetName="fillColor" Storyboard.TargetProperty="Opacity">
                            <SplineDoubleKeyFrame KeyTime="0" Value="1"/>
                          </DoubleAnimationUsingKeyFrames>
                          <ColorAnimation Duration="0" To="#FFFFFFFF" Storyboard.TargetName="contentPresenter" Storyboard.TargetProperty="(Control.Foreground).(SolidColorBrush.Color)" d:IsOptimized="True"/>
                        </Storyboard>
                      </VisualState>
                    </VisualStateGroup>
                    <VisualStateGroup x:Name="SelectionStates">
                      <VisualState x:Name="Unselected"/>
                      <VisualState x:Name="Selected">
                        <Storyboard>
                          <DoubleAnimationUsingKeyFrames Storyboard.TargetName="fillColor2" Storyboard.TargetProperty="Opacity">
                            <SplineDoubleKeyFrame KeyTime="0" Value="1"/>
                          </DoubleAnimationUsingKeyFrames>
                        </Storyboard>
                      </VisualState>
                    </VisualStateGroup>
                  </VisualStateManager.VisualStateGroups>
                  <Rectangle x:Name="fillColor" IsHitTestVisible="False" Opacity="0" RadiusX="1" RadiusY="1" Fill="#FF1f6cae"/>
                  <Rectangle x:Name="fillColor2" IsHitTestVisible="False" Opacity="0" Fill="#FF000000" RadiusX="1" RadiusY="1"/>
                  <ContentControl HorizontalAlignment="Left" Margin="{TemplateBinding Padding}" x:Name="contentPresenter" Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}" Foreground="#FF4c4c4c"/>
                </Grid>
              </ControlTemplate>
            </Setter.Value>
          </Setter>
        <Setter Property="FontSize" Value="14"/>
    </Style>

It should go straight under UserControl.Resources and you'll be ready to bind it.

Let me know if you managed or need more explanation!

You can do this with Blend by modificating the Encoder Template.

1. Left mouse click to your Silverlight Encoder in the Objects and Timeline pane (normally on the left, down to the project pane )

2. Select "Edit Template" -> "Edit a Copy"

3. Fill in the dialog Box

4. in the Objects and Timeline pane you will now the your Encoder Template and be able to change any property of it for creating your custom Encoder Template derivating from encoder.

Hope it helps.

Bastien BESSON