TextBox

DataGrid

ComboBox




WPF Tutorial Contents

APL  Home Page


TextBox


Maybe the simplest case - I've taken Pierre Gilbert's example from the Dyalog Forum and cut it down to the barest essentials...

XAML


 z←xaml_textbox;⎕ML
⍝ XAML example for TextBox
 ⎕ML←3
 z←⊂' <Window'
 z,←⊂'      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"  '
 z,←⊂'       xmlns:d="http://schemas.microsoft.com/expression/blend/2008"'
 z,←⊂'       xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"'
 z,←⊂'       xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"'
 z,←⊂'       SizeToContent="WidthAndHeight" Title="Binding Examples">'
 z,←⊂'      <StackPanel>'
 z,←⊂'        <Label Content="First Name:"/>'
 z,←⊂'        <TextBox Text="{Binding FirstName}"/>'
 z,←⊂'        <Label Content="Last Name:"/>'
 z,←⊂'        <TextBox Text="{Binding LastName}"/>'
 z,←⊂'        <Label Content="Location:"/>'
 z,←⊂'        <TextBox Text="{Binding Location}"/>'
 z,←⊂'        <Label Content="Interest:"/>'
 z,←⊂'        <TextBox Text="{Binding Interest}"/>'
 z,←⊂'      </StackPanel>'
 z,←⊂'    </Window>'
 z←⊃z


This is a function because I find it easier to edit/manipulate that way (your preference may vary)

APL Code


 z←xaml Binding w;⎕USING;dt;RootObj
⍝ Binding Examples Using a DataTable
 ⎕USING←'System' 'System.Data,system.data.dll'
 dt←⎕NEW DataTable
 {}'FirstName' 'LastName' 'Location' 'Interest'{dt.Columns.Add ⍺ ⍵}¨4⍴String
 2010⌶dt w
 ⎕USING←'System.Windows.Markup,WPF/PresentationFramework.dll'
 RootObj←XamlReader.Parse(⊂∊xaml)
 RootObj.DataContext←dt
 {}RootObj.ShowDialog
 dt←RootObj.DataContext
 z←2011⌶dt


In Practice...


 xaml_textbox Binding 1 4⍴'Percy' 'Porridge' 'Here' 'Stamp Collecting'  

which displays the window, and after inappropriate editing we have...

 Percy  Porridge  Here  Pornography

Notes



DataGrid


We have a data matrix to display allow the user to update (four columns of character data, a boolean column, a character column containing URLs and finally a column of dates...

    ]displayr t4
┌7──────────────────────────────────────────────────────────────────────┐
2 ┌5────┐ ┌6─────┐ ┌4───┐  ┌8───────┐           ┌14────────────┐        │
│ │Percy│ │Potnot│ │Here│  │Football│         0 │www.dyalog.com│ (NULL) │
│ └─────┘ └──────┘ └────┘  └────────┘           └──────────────┘        │
│ ┌5────┐ ┌6─────┐ ┌5────┐ ┌16──────────────┐   ┌14────────────┐        │
│ │Harry│ │Hobnob│ │There│ │Stamp Collecting│ 1 │www.dyalog.com│ (NULL) │
│ └─────┘ └──────┘ └─────┘ └────────────────┘   └──────────────┘        │
└¯2─────────────────────────────────────────────────────────────────────┘


We take advantage of the special column types of the DataGrid...

XAML


z←xaml_datagrid;⎕ML
 ⍝ XAML example for DataGrid and Binding
 ⎕ML←3
 z←⊂'   <Window'
 z,←⊂'      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"'
 z,←⊂'       xmlns:d="http://schemas.microsoft.com/expression/blend/2008"'
 z,←⊂'       xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"'
 z,←⊂'       xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"'
 z,←⊂'       SizeToContent="WidthAndHeight" Title="Binding Examples">'
 z,←⊂'       <StackPanel>'
 z,←⊂'          <ComboBox Name="cboCOMBO" ItemsSource="{Binding}" />'
 z,←⊂'         <DataGrid ItemsSource="{Binding}" Name="dgrGrid" AutoGenerateColumns="False">'
 z,←⊂'            <DataGrid.Columns>'
 z,←⊂'               <DataGridTextColumn Header="First Name" Binding="{Binding FirstName}"/>'
 z,←⊂'               <DataGridCheckBoxColumn Header="Happy" Binding="{Binding Happy}"/>'
 z,←⊂'               <DataGridHyperlinkColumn Header="URL" Binding="{Binding URL}"/>'
 z,←⊂'               <DataGridComboBoxColumn x:Name="cboInterest" Header="Interest (combo)"                                        SelectedItemBinding="{Binding Interest}"/>'
 z,←⊂'               <DataGridTemplateColumn Header="DateScheduled">'
 z,←⊂'                 <DataGridTemplateColumn.CellTemplate>'
 z,←⊂'                   <DataTemplate>'
 z,←⊂'                     <TextBlock Text="{Binding Path= TheDate, StringFormat=\{0:dd-MM-yyyy\}}"                                  />'
 z,←⊂'                   </DataTemplate>'
 z,←⊂'                 </DataGridTemplateColumn.CellTemplate>'
 z,←⊂'                 <DataGridTemplateColumn.CellEditingTemplate>'
 z,←⊂'                   <DataTemplate>'
 z,←⊂'                     <DatePicker SelectedDate="{Binding Path=TheDate, Mode=TwoWay,                                             ValidatesOnExceptions=true, NotifyOnValidationError=true}" />'
 z,←⊂'                   </DataTemplate>'
 z,←⊂'                 </DataGridTemplateColumn.CellEditingTemplate>'
 z,←⊂'              </DataGridTemplateColumn>'
 z,←⊂'            </DataGrid.Columns>'
 z,←⊂'         </DataGrid>'
 z,←⊂'       </StackPanel>'
 z,←⊂'     </Window>'
 z←⊃z


APL

z←xaml BindingDataGrid (table list);⎕USING;dt;RootObj;intitems;listitems
⍝ Binding Examples Using a DataGrid
 ⎕USING←'System' 'System.Data,system.data.dll' 'System.Collections'
 dt←⎕NEW DataTable
 {}'FirstName' 'LastName' 'Location' 'Interest' 'Happy' 'URL' 'TheDate'{dt.Columns.Add ⍺ ⍵}¨String                 String String String Int32 String DateTime
 2010⌶dt table
 listitems←⎕NEW ArrayList
 {{}listitems.Add⊂⍵}¨list
 ⎕USING←'System.Windows.Markup,WPF/PresentationFramework.dll'
 RootObj←XamlReader.Parse(⊂∊xaml)
 RootObj.cboInterest←RootObj.FindName⊂'cboInterest'
 RootObj.DataContext←dt
 RootObj.cboInterest.ItemsSource←listitems
 {}RootObj.ShowDialog
 dt←RootObj.DataContext
 z←2011⌶dt

In Practice...


xaml_datagrid BindingDataGrid t4 ('Birdwatching'  'Football' 'Stamp Collecting')

displaying the window, and after editing...

 Percy  Potnot  Here   Football          0  www.dyalog.com  05/12/2012 00:00:00
 Harry  Hobnob  There  Stamp Collecting  1  www.dyalog.com  13/12/2012 00:00:00    


Notes



ComboBox


ComboBox throws up a few issues, not all of which I've come to terms with yet..

What I'd like to do is to change the TextBox example above so that (at least) one of the TextBox controls becomes a ComboBox, with the items drawn from one data source and the Text from our matrix.  That seems to imply a need for two Binding settings in the ComboBox and I don't know how to achieve this. I've also lost the automation that  we see setting APL variable values in the TextBox and DataGrid examples - easy enough to write some code to do what we want, but writing no code would be preferable.

XAML


 z←xaml_combobox;⎕ML
⍝ XAML example for ComboBox
 ⎕ML←3
 z←⊂' <Window'
 z,←⊂'      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"'
 z,←⊂'       xmlns:d="http://schemas.microsoft.com/expression/blend/2008"'
 z,←⊂'       xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"'
 z,←⊂'       xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"'
 z,←⊂'       SizeToContent="WidthAndHeight" Title="Binding Examples">'
 z,←⊂'      <StackPanel>'
 z,←⊂'        <Label Content="Interest:"/>'
 z,←⊂'        <ComboBox Name="cboInterest" IsEditable="True" ItemsSource="{Binding}" SelectedIndex="0"/>'
 z,←⊂'      </StackPanel>'
 z,←⊂'    </Window>'
 z←⊃z


This assumes that we want to default the ComboBox text to the first item on the list - in practice SelectedIndex is going to be set in the APL that uses this result.

APL Code


 z←xaml Binding(data items);⎕USING;dt;RootObj;a
⍝ Binding Examples Using a DataTable
 ⎕USING←'System' 'System.Data,system.data.dll' 'System.Collections'
 a←⎕NEW ArrayList
 {{}a.Add⊂⍵}¨items
 dt←⎕NEW DataTable
 {}'FirstName' 'LastName' 'Location' 'Interest'{dt.Columns.Add ⍺ ⍵}¨4⍴String
 2010⌶dt data
 ⎕USING←'System.Windows.Markup,WPF/PresentationFramework.dll'
 RootObj←XamlReader.Parse(⊂∊xaml)
 RootObj.cboInterest←RootObj.FindName⊂'cboInterest'
 RootObj.DataContext←dt
 RootObj.cboInterest.DataContext←a
 {}RootObj.ShowDialog
 dt←RootObj.DataContext
 z←2011⌶dt


And we leave as an easy exercise for the reader the task of elaborating the code to put the appropriate (from the user's ComboBox selection/typing) value in the result.

In Practice...

   
 xaml_combobox Binding t2('Football' 'Golf' 'Stamp Collecting')