Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to change textblock background?

This is my xaml structure

<stackpanel>
  <textblock Text="A"></textblock>
  <textblock Text="B"></textblock>
</stackpanel>

Stackpanel, It can loop to generate more same structures.

How can I change background color of texblock when I click it?

UPDATE: I just want change on xaml file not using C#.

Default I has yellow, but when I click a textblock, Its background will change to Blue.

UPDATE 2: If click A, A will change to blue until I click another.

Detail:

  1. I click A(A is yellow), A will change to be blue ==> A is blue

  2. I click B(B is yellow and A is blue), B will change to be blue and A will change to be yellow.

UPDATE 3: How about this?

<stackpanel>
      <textblock Text="A"></textblock>
</stackpanel>

<stackpanel>
      <textblock Text="A"></textblock>
</stackpanel>
<stackpanel>
      <textblock Text="A"></textblock>
</stackpanel>

The question is same above

Thanks!

like image 269
GSP Avatar asked Jan 06 '15 04:01

GSP


2 Answers

Using EventTrigger and Color Animation you can change color of TextBlock Background color on MouseDown or MouseLeave


xaml code

 <StackPanel>
    <StackPanel.Resources>
        <Style TargetType="TextBlock">
            <Style.Triggers>
                <EventTrigger RoutedEvent="MouseDown">
                    <BeginStoryboard>
                        <Storyboard>
                            <ColorAnimation Storyboard.TargetProperty="Background.Color" From="Yellow" To="Blue" Duration="0:0:0.1"></ColorAnimation>
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
                <EventTrigger RoutedEvent="MouseLeave">
                    <BeginStoryboard>
                        <Storyboard>
                            <ColorAnimation Storyboard.TargetProperty="Background.Color" From="Blue" To="Yellow" Duration="0:0:0.1"></ColorAnimation>
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
            </Style.Triggers>
        </Style>
    </StackPanel.Resources>
    <TextBlock Text="A" Background="Yellow"></TextBlock>
    <TextBlock Text="B" Background="Yellow"></TextBlock>
</StackPanel>

Update

Use TextBox with property IsReadOnly=True instead of textblock.

    <StackPanel>
    <StackPanel.Resources>
        <Style TargetType="TextBox"> 
            <Setter Property="Background" Value="Yellow"></Setter>
            <Setter Property="BorderThickness" Value="0"></Setter> 
            <Setter Property="IsReadOnly" Value="True"></Setter>
            <Style.Triggers>
                <EventTrigger RoutedEvent="TextBox.GotFocus">
                    <BeginStoryboard>
                        <Storyboard>
                            <ColorAnimation Storyboard.TargetProperty="Background.Color" From="Yellow" To="Blue" Duration="0:0:0.1"></ColorAnimation>
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
                <EventTrigger RoutedEvent="TextBox.LostFocus">
                    <BeginStoryboard>
                        <Storyboard>
                            <ColorAnimation Storyboard.TargetProperty="Background.Color" From="Blue" To="Yellow" Duration="0:0:0.1"></ColorAnimation>
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
            </Style.Triggers>
        </Style>
    </StackPanel.Resources>
    <TextBox Text="A"></TextBox>
    <TextBox Text="A"></TextBox>
</StackPanel>
like image 90
Heena Avatar answered Nov 02 '22 12:11

Heena


Programmatically:

textBlock1.Background = new SolidColorBrush(Colors.Yellow);

In XAML:

<TextBlock Name="textBlock1">
    <TextBlock.Background>
        <SolidColorBrush Color="Yellow" />
    </TextBlock.Background>
</TextBlock>

To change background color when you click on a textBlock, you should use custom style with triggers. This is not hard, if you will search or ask about using styles and triggers. You definetely should not use C# for this in XAML design patterns.

like image 27
Croll Avatar answered Nov 02 '22 11:11

Croll