Blog

posts from 2016

XAML CalculatorBehavior

0 Comments
By Fons Sonnemans, 1-12-2016

I have been using Adobe software recently and I noticed you could do simple calculations in textboxes. I used it to export Tile Images in different scale sizes. If the 100% scale of an Image is 150 pixels wide you can enter '150 * 1.5'. It will calculate the width of 225 pixels for the 150% scale size. I loved this feature so I tried to implement it also for my own Xaml apps.

The solution is quite simple. I have created a Behavior called CalculatorBehavior. You just use Blend for Visual Studio to drop it on a TextBox control and you are done.

Demo App

The following video shows you how you can use it to do simpel calculations in a TextBox using the CalculatorBehavior.

CalculatorBehavior Demo

My Solution

My Visual Studio solution contains 3 projects: Windows 10 (UWP), Windows 8.1 and WPF. The WPF project has a NuGet reference to Math Expression Evaluator. This project contains the ExpressionEvaluator class which I use for my calculations. There is no WinRT, PCL (Portable Class Library) or .NET Standard implementation for this project which makes it unusable for my Windows (8.1 and 10/UWP) projects. Luckily the project is Open Sources so I added the ExpressionEvaluator class to these projects.

The Windows 10 project uses the XamlBehaviors project using the NuGet package. The Windows 8.1 project uses the 'Behaviors SDK' but that doesn't include a Behavior<T> class. So i added my own implementation for it in my project. The WPF project has a reference to the 'System.Windows.Interactivity' assembly.

CalculatorBehavior

The CalculatorBehavior code is very simple. The class derives from Behavior<TextBox> which makes it droppable on a TextBox. The LostFocus event of the TextBox will trigger the calculation for which I use the ExpressionEvaluator.

using Microsoft.Xaml.Interactivity;
using SimpleExpressionEvaluator;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;

namespace CalculatorUwpDemoApp.Behaviors {

    class CalculatorBehavior : Behavior<TextBox> {

        private static readonly ExpressionEvaluator _evaluator = 
            new ExpressionEvaluator();

        protected override void OnAttached() {
            base.OnAttached();
            this.AssociatedObject.LostFocus += Evaluate;
        }

        protected override void OnDetaching() {
            base.OnDetaching();
            this.AssociatedObject.LostFocus -= Evaluate;
        }

        private void Evaluate(object sender, RoutedEventArgs e) {
            try {
                string txt = this.AssociatedObject.Text;
                if (!string.IsNullOrWhiteSpace(txt)) {
                    var result = _evaluator.Evaluate(txt);
                    this.AssociatedObject.Text = result.ToString();
                }
            } catch { }
        }
    }
}

Blend for Visual Studio

Adding the CalculatorBehavior to a TextBox is very easy in Blend for Visual Studio. Select the behavior from the Assets panel and Drag&Drop it on a TextBox. That's all.

Blend Screenshot

The code

I have published my code on GitHub. I hope you like it.

Fons

Windows 10 XAML Tips: AnimatedTextBlock

0 Comments
By Fons Sonnemans, 21-3-2016

For one of my Windows games I created an AnimatedTextBlock control which animates the Text when it changes. This attracks the user attention. In this blog I will explain how I implemented it. The following animated GIF show's you this AnimtatedTextBlock in my sample app. Everytime you tap the button the text is changed from 'Hello' to 'World' and back.

AnimatedTextBlock

The AnimatedTextBlock is an UserControl which contains a TextBlock and a Storyboard. The Storyboard contains a PlaneProjection.RotationX animation which rotates the TextBlock and a TextBlock.Text animation which sets the Text. The Font properties of the TextBlock like FontSize and FontFamily are inherited from the UserControl.

<UserControl x:Class="App91.Views.Controls.AnimatedTextBlock"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             mc:Ignorable="d"
             d:DesignHeight="22.667"
             d:DesignWidth="400">
    <UserControl.Resources>
        <Storyboard x:Name="Storyboard1">
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(PlaneProjection.RotationX)"
                                           Storyboard.TargetName="textBlockProjection">
                <EasingDoubleKeyFrame KeyTime="0"
                                      Value="0" />
                <EasingDoubleKeyFrame KeyTime="0:0:0.2"
                                      Value="90" />
                <EasingDoubleKeyFrame KeyTime="0:0:0.4"
                                      Value="0" />
            </DoubleAnimationUsingKeyFrames>
            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(TextBlock.Text)"
                                           Storyboard.TargetName="innerTextBlock">
                <DiscreteObjectKeyFrame KeyTime="0:0:0.2"
                                        x:Name="textFrame" />
            </ObjectAnimationUsingKeyFrames>
        </Storyboard>
    </UserControl.Resources>
    <TextBlock x:Name="innerTextBlock"
               TextWrapping="{x:Bind TextWrapping, Mode=OneWay}"
               RenderTransformOrigin="0.5,0.5">
        <TextBlock.Projection>
            <PlaneProjection RotationX="0"
                             x:Name="textBlockProjection" />
        </TextBlock.Projection>
    </TextBlock>
</UserControl>

In the code behind of the UserControl there is a Text dependency property which will allow Styling and DataBinding of this property. The OnTextPropertyChanged method is automatically called when the value of this property changes. In this method the value of the Text animation is set to the new value and the Storyboard is started. The class also contains a TextWrapping dependency property which is used in the XAML code to databind the TextBlock TextWrapping property to using compiled binding. For my solution I only needed this TextWrapping property but you might have to add extra properties like TextAlignment or TextLineBounds.

public sealed partial class AnimatedTextBlock : UserControl {

    public AnimatedTextBlock() {
        this.InitializeComponent();
    }

    public string Text {
        get { return (string)GetValue(TextProperty); }
        set { SetValue(TextProperty, value); }
    }

    public static readonly DependencyProperty TextProperty =
        DependencyProperty.Register(nameof(Text), typeof(string),
            typeof(AnimatedTextBlock),
            new PropertyMetadata(null, OnTextPropertyChanged));

    private static void OnTextPropertyChanged(DependencyObject d,
                            DependencyPropertyChangedEventArgs e) {
        var source = d as AnimatedTextBlock;
        if (source != null) {
            var value = (string)e.NewValue;
            if (e.OldValue != null) {
                source.textFrame.Value = value;
                source.Storyboard1.Begin();
            } else {
                source.innerTextBlock.Text = value;
            }
        }
    }

    public TextWrapping TextWrapping {
        get { return (TextWrapping)GetValue(TextWrappingProperty); }
        set { SetValue(TextWrappingProperty, value); }
    }

    public static readonly DependencyProperty TextWrappingProperty =
        DependencyProperty.Register(nameof(TextWrapping), typeof(TextWrapping),
            typeof(AnimatedTextBlock), new PropertyMetadata(TextWrapping.NoWrap));

}

Sample page

In my sample page I have added a Button and an AnimatedTextBlock control to the root Grid of the Page. The AnimatedTextBlock is named 'atb1' so i can be used in the code behind of the page.

<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:local="using:App91"
      xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
      xmlns:Controls="using:App91.Views.Controls"
      x:Class="App91.MainPage"
      mc:Ignorable="d">

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        
        <Button Content="Button"
                HorizontalAlignment="Stretch"
                Height="63"
                Margin="55,64,81,0"
                VerticalAlignment="Top"
                Click="Button_Click" />

        <Controls:AnimatedTextBlock x:Name="atb1"
                                    Margin="32,173,58,0"
                                    VerticalAlignment="Top"
                                    Text="Hello"
                                    Foreground="Red"
                                    TextWrapping="Wrap"
                                    FontSize="48" />

    </Grid>
</Page>

The Button has a Click event which toggles the Text of the AnimatedTextBlock Text from Hello to World.

private bool _showHello;

private void Button_Click(object sender, RoutedEventArgs e) {
    atb1.Text = _showHello ? "Hello" : "World";
    _showHello = !_showHello;
}

Closure and download

I hope you can use this blog for your own Windows 10 apps. You can download the sample project below.

Cheers,

Fons

Tags: XAML, UWP, Windows 10

All postings/content on this blog are provided "AS IS" with no warranties, and confer no rights. All entries in this blog are my opinion and don't necessarily reflect the opinion of my employer or sponsors. The content on this site is licensed under a Creative Commons Attribution By license.