Extend MoneyEditor

Question

Hi'

Im building a Lightswitch extension project with a custom value control.

In fact, I want to extend de money editor control just by handling el KeyDown event.

My first attempt is to extend a textbox, but I'm a noob with xaml: I can't show the currency on the text box and for some reason my control doesn't strech like a normal control.

This is my current control xaml:

<UserControl x:Class="MyCustomExtension.Presentation.Controls.FwkMoneyEditor"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:framework ="clr-namespace:Microsoft.LightSwitch.Presentation.Framework;assembly=Microsoft.LightSwitch.Client"
             HorizontalAlignment="Stretch"
             VerticalAlignment="Stretch"
             Width="{Binding ElementName=RootPanel, Path=Width}" >

    <framework:StatesControl HorizontalAlignment="Stretch">
        <TextBox x:Name="TextBox" Text="{Binding StringValue, Mode=TwoWay}"
                 IsReadOnly="{Binding IsReadOnly}"
                 Width="{Binding ElementName=RootPanel, Path=Width}" 
                 TextAlignment="{Binding Properties[Microsoft.LightSwitch:RootControl/TextAlignment]}"
                 HorizontalAlignment="Stretch"
                 ToolTipService.ToolTip="{Binding Description}"
                 KeyDown="TextBox_KeyDown"/>
    </framework:StatesControl>
</UserControl>

Any help would be great!

Answer 1

hi, anyone?

Answer 2

Not sure why it's not stretching like other controls.

As for it not showing the currency symbol (I think that's what you mean?) - you're using a basic TextBox control, which doesn't provide any automatic formatting.  So you would need to add code to handle the formatting.  Alternately you could use the MoneyEditorControl that LightSwitch uses instead.

Your XAML would look like:

<UserControl x:Class="MyCustomExtension.Presentation.Controls.FwkMoneyEditor"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:framework ="clr-namespace:Microsoft.LightSwitch.Presentation.Framework;assembly=Microsoft.LightSwitch.Client"    
    xmlns:mlec ="clr-namespace:Microsoft.LightSwitch.Extensions.Controls;assembly=Microsoft.LightSwitch.Extensions.Client"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

    <framework:StatesControl HorizontalAlignment="Stretch">
        <mlec:MoneyEditorControl 
            x:Name="MoneyEditorControl" 
            Value="{Binding Value, Mode=TwoWay}" 
            IsReadOnlyDisplayMode="{Binding IsReadOnly}"
            Width="{Binding ElementName=RootPanel, Path=Width}" 
            HorizontalAlignment="Stretch"
            ToolTipService.ToolTip="{Binding Description}"/>
    </framework:StatesControl>
</UserControl>

You'd need to add a reference to the Microsoft.LightSwitch.Extensions.Client assembly

in the code behind, you'd have something like

public partial class FwkMoneyEditor : UserControl, IContentVisual
    {
        object IContentVisual.Control
        {
            get { return this.MoneyEditorControl; }
        }

        void IContentVisual.Show()
        {
        }

        public FwkMoneyEditor()
        {
            InitializeComponent();
            this.MoneyEditorControl.Loaded += MoneyEditorControl_Loaded;
        }

        void MoneyEditorControl_Loaded(object sender, RoutedEventArgs e)
        {
            var editorTextBox = VisualTreeHelpers.GetChildByType<TextBox>(this, x => x.Name == "EditorTextBox") as TextBox;
            if (editorTextBox != null)
            {
                editorTextBox.KeyDown += EditorTextBox_KeyDown;
            }
        }

        private void EditorTextBox_KeyDown(object sender, KeyEventArgs e)
        {
            if (e.Key == Key.Decimal)
            {
                var textBox = sender as TextBox;
                string text = textBox.Text;
                int start = textBox.SelectionStart;
                textBox.Text = text.Substring(0, start)
                  + "," + text.Substring(start + textBox.SelectionLength);
                textBox.SelectionStart = start + 1;
                e.Handled = true;
            }
        }
    }

in this example I'm using this helper class:

using System;
using System.Collections.Generic;
using System.Windows;
using System.Windows.Media;

namespace MyCustomExtension.Presentation.Controls
{
    public static class VisualTreeHelpers
    {
        public static T GetChildByType<T>(this UIElement element, Func<T, bool> condition)
            where T : UIElement
        {
            List<T> results = new List<T>();
            GetChildrenByType<T>(element, condition, results);
            if (results.Count > 0)
                return results[0];
            else
                return null;
        }

        private static void GetChildrenByType<T>(UIElement element, Func<T, bool> condition, List<T> results)
            where T : UIElement
        {
            for (int i = 0; i < VisualTreeHelper.GetChildrenCount(element); i++)
            {
                UIElement child = VisualTreeHelper.GetChild(element, i) as UIElement;
                if (child != null)
                {
                    T t = child as T;
                    if (t != null)
                    {
                        if (condition == null)
                            results.Add(t);
                        else if (condition(t))
                            results.Add(t);
                    }
                    GetChildrenByType<T>(child, condition, results);
                }
            }
        }
    }
}

There are some other details to take care of, but hopefully that will help you get started.

---

dotnetlore.com/lightswitch

Answer 3

It worked!!! Problem solved!

Once again, thank you very much, Jewel!

You are a great asset to the lightswitch comunity.

Answer 4

Great! Happy I could help. :)

---

dotnetlore.com/lightswitch