MercatorPenguin 2.10.6.0 of later laat ons toe om een SubCellView toe te voegen aan de XAML parametrering van de ListViewCell in de bundellijsten. Deze SubCellView laat ons toe om een lijst horizontaal te draaien of een verticale sublijst weer te geven als "child" van de ListViewCell. De hoeveelheid cellen is niet gelimiteerd.
Een stap van de bundel met de SubCellView moet dus ook een SQL query bevatten die 2 dataTables teruggeeft:
- de eerste met de gegevens van de parent van de ListViewCell (zoals gewoonlijk),
- de tweede met de gegevens van de child van alle SubCellViews
Een SubCellView is gelinkt met zijn ListViewCell parent via twee eigenschappen:
- ForeignKey : naam van de kolom in de 2de dataTable dat de relatie legt tussen de 2 dataTables
- ParentPrimaryKey : naam van de kolom in de 1ste dataTable die de relatie legt tussen de 2 dataTables
Opmerking: deze kolommen moet niet verplicht overeenkomen met de foreign key en primary key in de DataBase maar moet een relatie leggen tussen de extra gegevens. Deze kolommen moeten het type char of varchar krijgen. Deze 2 elementen zijn niet hoofdlettergevoelig.
We gebruiken hieronder een aangepaste versie van de 'Artikels raadplegen' bundel die nu een SubCellView implementeert.
De SQL query is aangepast om de 2 dataTables te leveren. De 2de maakt gebruik van de gegevens uit ARTLIENS om de artikels uit de bundel te linken met de artikels van de parent.
if @key=''
raiserror('U dient minstens één zoeksleutel op te geven!',16,1 )
declare @cle1Lib char(250), @cle2Lib char(250), @cle3Lib char(250)
select @cle1Lib = isnull(rtrim(valeur),'Clé 1') from options where type = 'CLE1_S_F'
select dbo.XDESIGN_F(s_id) as modele,rtrim(@cle1Lib)+' : '+rtrim(s_cle1) as s_cle1,'Prix HTVA : '+ltrim(dbo.transform(s_prix_ht,'999 999.99')) as s_prix_ht,s_memo,s_id
into #tmp
from STOCK
where ((s_modele like '%'+@key+'%') or (s_cle1 like '%'+@key+'%') or (s_cle2 like '%'+@key+'%') or (s_cle3 like '%'+@key+'%')) and (s_sommeil=0)
select * from #tmp order by modele
select dbo.XDESIGN_F(artliens.id_lien) as modele,rtrim(@cle1Lib)+' : '+rtrim(s_cle1) as s_cle1,artliens.id_art,artliens.id_lien as s_id
from #tmp inner join ARTLIENS on #tmp.s_id=artliens.id_art
order by modele
drop table #tmp
De XAML code van de ListViewCell ziet eruit als volgt:
<Label Text="@MODELE" Font="Medium" />
<Label Text="@S_CLE1" Font="Small" />
<Label Text="@S_PRIX_HT" Font="Small" />
<Label FormattedText="@S_MEMO" Font="Small" />
<m:SubCellView ItemsLayout="HorizontalList" HorizontalScrollBarVisibility="Always" HeightRequest="175" Margin="10,0,0,15" ForeignKey="id_art" ParentPrimaryKey="s_id">
<CollectionView.ItemTemplate>
<DataTemplate>
<Grid WidthRequest="380">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="150"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<m:Image Table="STOCK" Index="S_ID" Value="{Binding .[S_ID]}" Field="S_IMAGE1" Aspect="AspectFit" HeightRequest="150" WidthRequest="150" VerticalOptions="Center" Grid.Column="0" />
<StackLayout VerticalOptions="FillAndExpand" Grid.Column="1">
<StackLayout>
<Label Text="{Binding .[MODELE]}" FontSize="Medium" FontAttributes="Bold" LineBreakMode="WordWrap" Margin="10,0,0,0" />
<Label Text="{Binding .[S_CLE1]}" FontSize="Small" Margin="10,10,0,0" />
<BoxView HeightRequest="2" Margin="10,15,150,0" BackgroundColor="%ThemeColor%" />
</StackLayout>
</StackLayout>
</Grid>
</DataTemplate>
</CollectionView.ItemTemplate>
</m:SubCellView>
In een SubCellView wordt de dataBinding niet gedaan via @NAAM_VAN_DE_KOLOM maar met de expressie {Binding .[NAAM_VAN_DE_KOLOM ]}. De naam van de kolom is altijd in hoofdletters. Buiten dit verschil worden de gewoonlijke controles in de XAML code van de ListViewCell ook gebruikt in de SubCellView.
Aanpassen van de "volgende stap" functie
Door op een cel in de ListView te tikken, kan u doorgaan naar de volgende fase van de bundel waarbij u alle waarden van de geselecteerde dataRow moet specifiëren via SQL parameters. Dit zal dan een extra detailniveau weergeven. (zoals het gewoonlijke gedrag van bundellijsten)
Bij het aantikken van een cel in de gedraaide lijst zal deze hetzelfde gedrag vertonen als een cel uit een gewone lijst. Echter als de aangeklikte cel SQL parameters bevat met dezelfde naam als de bovenliggende ListViewCell zullen de waarden van de ListCellView vervangen worden door de waarden van de SubCellView. Deze werking laat ons toe om naar extra detailniveau te gaan met specifieke gegevens voor het aangetikte element.
Bijvoorbeeld, zie in de afbeelding hierboven, de ListViewCell "Abrikoos" toont 3 gelinkte artikels ("Artisjok", "Java koffie" en "Komkommer"). Als de gebruiker klikt op de "Java koffie" cel, zal deze een detail zien van "Java koffie" en dus niet van "Abrikoos".
De SubCellView is een Xamarin.Forms.CollectionView. Het is dus mogelijk om ook andere eigenschappen van deze klasse te gebruiken.
De getoonde bundel kan u hier downloaden: Artikels raadplegen - test SubcellView.pngb
In de 2de stap wordt een andere implementatie van een SubViewCell gebruikt voor een lijst van de laatste verkopen.
declare @cle1Lib char(250), @cle2Lib char(250), @cle3Lib char(250)
select @cle1Lib = isnull(rtrim(valeur),'Clé 1') from options where type = 'CLE1_S_F'
select @cle2Lib = isnull(rtrim(valeur),'Clé 2') from options where type = 'CLE2_S_F'
select @cle3Lib = isnull(rtrim(valeur),'Clé 3') from options where type = 'CLE3_S_F'
select dbo.XDESIGN_F(s_id) as modele,
rtrim(@cle1Lib)+' : '+rtrim(s_cle1) as s_cle1,
rtrim(@cle2Lib)+' : '+rtrim(s_cle2) as s_cle2,
rtrim(@cle3Lib)+' : '+rtrim(s_cle3) as s_cle3,
'Prix HTVA : '+ltrim(dbo.transform(s_prix_ht,'999 999.99')) as s_prix_ht,
'DPA : '+ltrim(dbo.transform(s_dpa,'999 999.99')) as s_dpa,
'Stock : '+ltrim(dbo.transform(dbo.XDISPO_DISPO(s_id,'0000000001'),'999 999')) as dispo,
s_id
from STOCK
where s_id=@s_id
select top 20 id_article,convert(char(10),pieds_v.date,105) as date,
rtrim(cli.c_nom)+ ' ('+rtrim(cli.c_ville)+')' as client,
'Q : '+ltrim(dbo.transform(lignes_v.q,'999 999')) as q,
'Tot Net HT : '+ltrim(dbo.transform(lignes_v.TOT_NET_HT,'999 999.99')) as tot_net_ht
from PIEDS_V inner join LIGNES_V on (pieds_v.id=lignes_v.id) and (pieds_v.journal=lignes_v.journal) and (pieds_v.piece=lignes_v.piece)
inner join CLI on (pieds_v.id_cli=cli.c_id)
where id_article=@s_id
order by pieds_v.date desc
<Label Text="@MODELE" Font="Medium" />
<Grid RowSpacing="10" ColumnSpacing="10" VerticalOptions="EndAndExpand" Margin="10,0,0,0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="20" />
<RowDefinition Height="20" />
<RowDefinition Height="20" />
</Grid.RowDefinitions>
<Label Text="@S_CLE1" Font="Small" Grid.Column="0" Grid.Row="0" LineBreakMode="TailTruncation" />
<Label Text="@S_CLE2" Font="Small" Grid.Column="0" Grid.Row="1" LineBreakMode="TailTruncation" />
<Label Text="@S_CLE3" Font="Small" Grid.Column="0" Grid.Row="2" LineBreakMode="TailTruncation" />
<Label Text="@S_PRIX_HT" Font="Small" Grid.Column="1" Grid.Row="0" />
<Label Text="@S_DPA" Font="Small" Grid.Column="1" Grid.Row="1" />
<Label Text="@DISPO" Font="Small" Grid.Column="1" Grid.Row="2" />
<Label Text="Dernières ventes" TextColor="%ThemeColor%" Font="Small" Grid.Column="0" Grid.Row="3" Grid.ColumnSpan="2" Margin="0,15,0,0" />
</Grid>
<m:SubCellView ItemsLayout="VerticalList" VerticalScrollBarVisibility="Always" Margin="60,0,0,0" ForeignKey="id_article" ParentPrimaryKey="s_id" >
<CollectionView.ItemTemplate>
<DataTemplate>
<StackLayout>
<Label Text="{Binding .[DATE]}" Font="Small" TextColor="%ThemeColor%" />
<Label Text="{Binding .[CLIENT]}" Font="Small" />
<StackLayout Orientation="Horizontal" Margin="10,0,10,0">
<Label Text="{Binding .[Q]}" Font="Small" />
<Label Text="{Binding .[TOT_NET_HT]}" Font="Small" Margin="25,0,0,0" />
</StackLayout>
</StackLayout>
</DataTemplate>
</CollectionView.ItemTemplate>
</m:SubCellView>
Limitaties
- Het is toegestaan om een enkele SubCellView te plaatsen in de XAML code van de ListViewCell.
- De hoeveelheid elementen in een SubCellView is niet gelimiteerd. Hierdoor moet men er goed opletten dat een grote hoeveelheid elementen de applicatie niet zal vertragen.
- Er is een voorkeur voor de horizontale lijst t.o.v. de horizontale sublijst dus in principe laat de omgeving niet toe dat er twee verticaal gedraaide lijsten zijn.
- In iOS moet de SubCellView het laatste element zijn in de XAML code van een ListViewCell of het laatste element van een StackLayout.