Button Styling in XAML

Question

I have customized the button in this way:

<Button BorderBrush="Transparent" Name="DialButton" Click="DialButton_Click" >
            <StackPanel Orientation="Horizontal">
                <TextBlock FontSize="43" Name="lblNumber" Margin="0,-5,0,0" />
                <TextBlock FontSize="12" Margin="5,20,0,0" Name="lblCharacter" />
            </StackPanel>
</Button>

Now, when a user presses the button I want the OnPress state to change the color of the labels. I can do this if it's a simple button by changing the Pressed state. But my label is placed inside a stack panel. How can I change the color in this case? Or in which event can I change the colors of the labels from C#.

Answer 1

You can use the PropertyChangeAction in cases like this. You can find this in the behaviors category on the Assets tab in Expression Blend.

Apply this action on the labels. Change the trigger property to the DataTrigger instead of the default EventTrigger. Bind the trigger to the IsPressed property of the DialButton. Add two PropertyChangeActions per TextBlock and set the Value for one of the to true and the other one to false.

Here's an example for one of them. The other is exactly the same.

<TextBlock FontSize="43" x:Name="lblNumber" Margin="0,-5,0,0" Text="25">
  <i:Interaction.Triggers>
    <ec:DataTrigger Binding="{Binding IsPressed, ElementName=DialButton}" Value="true">
      <ec:ChangePropertyAction PropertyName="Foreground">
        <ec:ChangePropertyAction.Value>
          <SolidColorBrush Color="Red"/>
        </ec:ChangePropertyAction.Value>
      </ec:ChangePropertyAction>
    </ec:DataTrigger>
    <ec:DataTrigger Binding="{Binding IsPressed, ElementName=DialButton}" Value="false">
      <ec:ChangePropertyAction PropertyName="Foreground">
        <ec:ChangePropertyAction.Value>
          <SolidColorBrush Color="{StaticResource PhoneForegroundColor}"/>
        </ec:ChangePropertyAction.Value>
      </ec:ChangePropertyAction>
    </ec:DataTrigger>
  </i:Interaction.Triggers>
</TextBlock> 

If the i: or ec: isn't working, make sure you've got these lines at the top of your xaml file.

xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity" 
xmlns:ec="clr-namespace:Microsoft.Expression.Interactivity.Core;assembly=Microsoft.Expression.Interactions"