CardView


Two examples here, firstly a very straightforward and limited case which handles data directly and - to be honest - doesn't seem of much practical use.  The second example uses Binding and generalises the C# example in Syncfusion's own documentation

Example A - Direct Data Handling


Display a Window with data values presented as a set of cards



XAML


∇  xaml←CardViewXAML
⍝ XAML for the CardView example
 xaml←⊂'<Window'
 xaml,←⊂'    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"'
 xaml,←⊂'    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"'
 xaml,←⊂'    xmlns:sftools="clr-namespace:Syncfusion.Windows.Tools.Controls;assembly=SyncFusion.Tools.WPF"'
 xaml,←⊂'    SizeToContent="WidthandHeight" >'
 xaml,←⊂'    <StackPanel>'
 xaml,←⊂'        <sftools:CardView Name="cardview">'
⍝ xaml,←⊂'          <sftools:GalleryGroup Name="gallerygroup"/>'
 xaml,←⊂'        </sftools:CardView>'
 xaml,←⊂'    </StackPanel>'
 xaml,←⊂'</Window>'

Code


∇ CardView entries;⎕IO;⎕ML;xaml;cvi;⎕USING;tb;entry;name;age
⍝ Simple CardView example
 ⎕IO ⎕ML←0 3
 xaml←CardViewXAML
 #.window←#.UTIL.WPF.LoadXaml xaml(⊂'SyncTools')
 window_cardview←#.window.FindName⊂'cardview'
 ⎕USING←,⊂'Syncfusion.Windows.Tools.Controls,Syncfusion/4.5/Syncfusion.Tools.WPF.dll'
 ⎕USING,←⊂'System.Windows.Controls,presentationframework.dll'
 :For entry :In entries
     cvi←⎕NEW CardViewItem''
     name age←entry
     tb←⎕NEW TextBlock
     tb.Text←('Name: ',name),⎕UCS 13
     tb.Text,←'Age: ',(⍕age)
     cvi.Content←tb
     {}window_cardview.Items.Add cvi
 :EndFor
 {}#.window.ShowDialog


The 'SyncTools' argument to #.UTIL.LoadXAML has the effect of adding

    'Syncfusion.Windows.Shared,Syncfusion/4.5/Syncfusion.Shared.WPF.dll'
    'Syncfusion.Tools.WPF,Syncfusion/4.5/Syncfusion.Tools.WPF.dll'
    'Syncfusion.SfInput.WPF,Syncfusion/4.5/Syncfusion.SfInput.WPF.dll'

 to the ⎕USING list of LoadXAML

Operation

      #.CardView.CardView ('Tom' 99) ('Dick' 22) ('Harry' 44)    

Example B - Using Binding


With data comprising name/values sets, display these in a CardView.

This is a transliteration and generalisation of an example in the Syncfusion documentation.


XAML


  ∇  xaml←CardViewBindXAML(title fieldnames);⎕IO;⎕ML;fieldname
⍝ XAML for the CardView example - using Binding
 ⎕IO ⎕ML←0 3
 xaml←⊂'<Window'
 xaml,←⊂'    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"'
 xaml,←⊂'    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"'
 xaml,←⊂'    xmlns:sftools="clr-namespace:Syncfusion.Windows.Tools.Controls;assembly=SyncFusion.Tools.WPF"'
 xaml,←⊂'    SizeToContent="WidthandHeight" Title="',title,'">'
 xaml,←⊂'    <StackPanel>'
 xaml,←⊂'        <sftools:CardView Name="cardview" ItemsSource="{Binding}">'
 xaml,←⊂'           <sftools:CardView.ItemTemplate>'
 xaml,←⊂'               <DataTemplate>'
 xaml,←⊂'                   <ListBox ScrollViewer.HorizontalScrollBarVisibility="Disabled">'
 :For fieldname :In fieldnames
     xaml,←⊂'                       <ListBoxItem>'
     xaml,←⊂'                           <StackPanel Orientation="Horizontal">'
     xaml,←⊂'                               <TextBlock Text="',fieldname,':"/>'
     xaml,←⊂'                               <TextBlock Text="{Binding ',fieldname,'}" Margin=" 5,0,0,0"/>'
     xaml,←⊂'                           </StackPanel>'
     xaml,←⊂'                       </ListBoxItem>'
 :EndFor
 xaml,←⊂'                   </ListBox>'
 xaml,←⊂'               </DataTemplate>'
 xaml,←⊂'           </sftools:CardView.ItemTemplate>'
 xaml,←⊂'           <sftools:CardView.HeaderTemplate>'
 xaml,←⊂'               <DataTemplate>'
 xaml,←⊂'                   <TextBlock Text="{Binding ',(↑fieldnames),'}"/>'
 xaml,←⊂'               </DataTemplate>'
 xaml,←⊂'           </sftools:CardView.HeaderTemplate>'
 xaml,←⊂'        </sftools:CardView>'
 xaml,←⊂'    </StackPanel>'
 xaml,←⊂'</Window>'
    ∇

Code

    ∇ CardViewBind(title fields);⎕IO;⎕ML;xaml;data;datacollection;field;name;values
⍝ Simple CardView example - using Binding
 ⎕IO ⎕ML←0 3
 xaml←CardViewBindXAML title(↑¨fields)
 #.window←#.UTIL.WPF.LoadXaml xaml(⊂'SyncTools')
 window_cardview←#.window.FindName⊂'cardview'
 data←⎕NS¨(≢fields)⍴⊂''
 :For field :In fields
     ⍎'data.',(↑field),'←1⊃field'
 :EndFor
 datacollection←2015⌶'data'
 window_cardview.DataContext←datacollection
 {}#.window.ShowDialog
    ∇


Operation

     #.CardView.cvdata←('Name' ('Tom' 'Dick' 'Ebenezer'))('Age' (55 21 999))('Salary' (10000 100000 0))
     #.CardView.CardViewBind 'CardView Example' #.CardView.cvdata


Unresolved Issues