I'm learning Silverlight using Silverlight 2.0 Unleashed + Silverlight 4.0 Unleashed and, well, just messing around with it :-)
As part of that, I'm trying to develop what should be a very simple content control: A label that you can edit by clicking on it.
I took my inspiration from another SO question (Click-to-edit in Silverlight) but I'm having a few issues related to me being very new to Silverlight. :)
I'll first post the code, then my questions.
This is my XAML:
<ContentControl x:Class="MyTestProject.SilverlightControl1"
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" xmlns:sdk="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data.Input" xmlns:local="clr-namespace:MyTestProject" mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="400">
<ContentControl.Resources>
<ControlTemplate x:Key="EditableLabelTextboxTemplate">
<TextBox Name="UCTB" Text="{Binding Text, Mode=TwoWay}" Width="100" Height="25" ></TextBox>
</ControlTemplate>
<ControlTemplate x:Name="LabelTemplate" TargetType="local:SilverlightControl1">
<sdk:Label x:Name="UCLBL" Content="{Binding Text}" />
</ControlTemplate>
<Style TargetType="local:SilverlightControl1">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate x:Name="LabelTemplate2" TargetType="local:SilverlightControl1">
<sdk:Label x:Name="UCLBL" Content="{Binding Text}" />
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ContentControl.Resources>
</ContentControl>
and this is my CodeBehind:
public partial class SilverlightControl1 : ContentControl
{
public string Text { get; set; }
public SilverlightControl1()
{
this.DataContext = this;
Text = "Hello, World!";
this.DefaultStyleKey = typeof(SilverlightControl1);
//Template = this.Resources["LabelTemplate"] as ControlTemplate;
InitializeComponent();
}
public override void OnApplyTemplate()
{
base.OnApplyTemplate();
this.MouseLeftButtonDown += HandleLabelLeftMouseDown;
this.KeyDown += HandleTextboxEnter;
}
public static void HandleTextboxEnter(object sender, KeyEventArgs args)
{
var ctrl = sender as SilverlightControl1;
if (ctrl.Template == ctrl.Resources["EditableLabelTextboxTemplate"])
{
if (args.Key == Key.Enter)
{
ctrl.Template = ctrl.Resources["LabelTemplate"] as ControlTemplate;
}
}
}
public static void HandleLabelLeftMouseDown(object sender, MouseButtonEventArgs args)
{
var editableLabel = sender as SilverlightControl1;
if (editableLabel.Template != editableLabel.Resources["EditableLabelTextboxTemplate"])
{
editableLabel.Template = editableLabel.Resources["EditableLabelTextboxTemplate"] as ControlTemplate;
}
}
}
First of all, the way I have to instantiate my Control is very clumsy and redundant.
There are 2 ControlTemplates (one label, one textbox) BUT there's also a Style with a label for initializing. If I remove this (and the correspoding line in the constructor in the codebehind), nothing renders, even if I set the template as well. There must be a better way?
My second problem is that when I then place my control in a test project and uses it, the control moves? It'll start off at the left-hand side in the middle as a label, I then click it, and the textbox appears centered on the page, and on enter the label reappears on the left-hand side of the screen?
EDIT: Thirdly, once I replace the label with the textbox, the textbox doesn't have focus, and I can't figure out how to give it to it?
Lastly, right now the only way to stop editing is to hit "enter". Ideally, I'd like to just click outside the textbox, but using the lost focus event (as suggested in the link) seems to fire way too often for me to be able to use it?
I hope some of the Silverlight guru's out there can help me! :-)
Oh, and should someone know of a click-to-edit Control available I could use / look at, I'd be very grateful too :)
Thanks in advance!
