Create box with title and text in silverlight

Question

can I create something like this in silverlight? A box with editable title and the rest of the text

http://docs.jboss.org/seam/3/latest/reference/en-US/html/images/remoting-model-customer-address-uml.png

Answer 1

You could create a custom user control:

XAML:

<UserControl x:Class="WpfApplication1.MyBox"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             mc:Ignorable="d" 
             d:DesignHeight="300" d:DesignWidth="300">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <TextBox Text="{Binding Header,UpdateSourceTrigger=PropertyChanged}"
                 BorderBrush="Black" BorderThickness="1" Margin="2" />
        <TextBox Text="{Binding Text,UpdateSourceTrigger=PropertyChanged}"
                 TextWrapping="Wrap"
                 VerticalScrollBarVisibility="Auto"
                 AcceptsReturn="True"
                 BorderBrush="Black" BorderThickness="1" Margin="2" Grid.Row="1" />
    </Grid>
</UserControl>

Code behind:

using System.Windows;
using System.Windows.Controls;

namespace WpfApplication1
{
    public partial class MyBox : UserControl
    {
        public static readonly DependencyProperty HeaderProperty = DependencyProperty.Register("Header", typeof(string), typeof(MyBox));
        public static readonly DependencyProperty TextProperty = DependencyProperty.Register("Content", typeof(string), typeof(MyBox));

        public string Header
        {
            get { return GetValue(HeaderProperty) as string; }
            set { SetValue(HeaderProperty, value); }
        }

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

        public MyBox()
        {
            InitializeComponent();

            this.DataContext = this;
        }
    }
}

A sample:

XAML:

<Window x:Class="WpfApplication1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525"
        xmlns:local="clr-namespace:WpfApplication1">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="*" />
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
        <local:MyBox x:Name="box1" Header="Type a header..." Text="Type a content..." Grid.Row="0" Grid.Column="0" BorderBrush="Black" BorderThickness="1" Margin="10" />
        <local:MyBox x:Name="box2" Header="Type a header..." Text="Type a content..." Grid.Row="0" Grid.Column="1" BorderBrush="Black" BorderThickness="1" Margin="10" />
        <Button Content="Show" Grid.Row="1" Grid.Column="0" Click="Button_Click" />
    </Grid>
</Window>

Code behind:

using System.Windows;

namespace WpfApplication1
{
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }

        private void Button_Click(object sender, RoutedEventArgs e)
        {
            MessageBox.Show(string.Format("{0}\n{1}\n\n{2}\n{3}", box1.Header, box1.Text, box2.Header, box2.Text));
        }
    }
}

This is WPF but should be fine in Silverlight too, except the MessageBox stuff but it's only for debugging purposes...

EDIT: Here is a sample for dynamic generation:

XAML:

<Window x:Class="WpfApplication1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525"
        xmlns:local="clr-namespace:WpfApplication1">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="*" />
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>
        <StackPanel x:Name="panel" Orientation="Horizontal">
        <local:MyBox x:Name="box1" Header="Type a header..." Text="Type a content..." Grid.Row="0" Grid.Column="0" BorderBrush="Black" BorderThickness="1" Margin="10" />
        </StackPanel>
        <Button Content="Add" Grid.Row="1" Grid.Column="0" Click="Button_Click" />
    </Grid>
</Window>

CodeBehind:

using System.Windows;
using System.Windows.Media;

namespace WpfApplication1
{
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }

        private void Button_Click(object sender, RoutedEventArgs e)
        {
            panel.Children.Add(new MyBox
            {
                Header = "Another box",
                Text = "...",
                BorderBrush = Brushes.Black,
                BorderThickness = new Thickness(1),
                Margin = new Thickness(10)
            });
        }
    }
}