question

LarsStecker-1871 avatar image
0 Votes"
LarsStecker-1871 asked LeonLu-MSFT commented

XCT TabView - Binding Viewmodel to Page and use Data in TabViewItems

Hello,

im strugglingto achive the following:

I want to have a tabbed page for my user detail because there is plenty of information to show about the clients.

Therefore i use the XCT-TabView and bind my ClientDetailPageModel to the Page. But i cant get the databinding to work inside the TabViewItems.


 <ContentPage
     x:Class="Pages.ClientDetailPage"
     xmlns="http://xamarin.com/schemas/2014/forms"
     xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
     xmlns:model="clr-namespace:Models"
     xmlns:viewmodels="clr-namespace:PageModels"
     xmlns:xct="http://xamarin.com/schemas/2020/toolkit">
    
     <ContentPage.BindingContext>
         <viewmodels:ClientDetailPageModel />
     </ContentPage.BindingContext>
    
     <xct:TabView
         TabIndicatorColor="Black"
         TabIndicatorPlacement="Bottom"
         TabStripPlacement="Bottom">
         <xct:TabViewItem FontAttributesSelected="Bold" Text="Dateien">
             <ContentView BackgroundColor="{StaticResource VioletMain}">
                 <StackLayout>
                     <Grid RowDefinitions="Auto, *, Auto">
                         <StackLayout Grid.Row="0" Padding="20">
                             <Label Text="{Binding Client.Id, StringFormat='ID: {0}'}" />
                             <Label Text="{Binding Client.Name, StringFormat='Name: {0}'}" />
                             <Label Text="{Binding Client.Leistungsort, StringFormat='Leistungsort: {0}'}" />
                         </StackLayout>
                         <Frame
                             Grid.Row="1"
                             BackgroundColor="Transparent"
                             HeightRequest="500">
                             <ListView ItemsSource="{Binding ClientImages}">
                                 <ListView.ItemTemplate>
                                     <DataTemplate>
                                         <ImageCell ImageSource="{Binding Path}" Text="{Binding Name}" />
                                     </DataTemplate>
                                 </ListView.ItemTemplate>
                             </ListView>
                         </Frame>
                         <Button
                             Grid.Row="2"
                             Command="{Binding CapturePhotoCommand}"
                             Text="Take Pictures" />
                     </Grid>
                 </StackLayout>
             </ContentView>
         </xct:TabViewItem>
         <xct:TabViewItem FontAttributesSelected="Bold" Text="Überischt">
             <xct:TabViewItem.Content>
                 <StackLayout Padding="20">
                     <Label Text="{Binding Client.Id, StringFormat='Name: {0}'}" />
                     <Label Text="{Binding Client.Name, StringFormat='Prize: {0}'}" />
                     <Label Text="{Binding Client.Leistungsort, StringFormat='Prize: {0}'}" />
                 </StackLayout>
             </xct:TabViewItem.Content>
         </xct:TabViewItem>
     </xct:TabView>
 </ContentPage>



Result:

114479-unbenannt.png


However if i add a Stacklayout directly inside the ContentPage the binding works fine.

 <ContentPage
     x:Class="Pages.ClientDetailPage"
     xmlns="http://xamarin.com/schemas/2014/forms"
     xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
     xmlns:model="clr-namespace:Models"
     xmlns:viewmodels="clr-namespace:PageModels"
     xmlns:xct="http://xamarin.com/schemas/2020/toolkit">
    
     <ContentPage.BindingContext>
         <viewmodels:ClientDetailPageModel />
     </ContentPage.BindingContext>
    
     <StackLayout>
         <Grid RowDefinitions="Auto, *, Auto">
             <StackLayout Grid.Row="0" Padding="20">
                 <Label Text="{Binding Client.Id, StringFormat='ID: {0}'}" />
                 <Label Text="{Binding Client.Name, StringFormat='Name: {0}'}" />
                 <Label Text="{Binding Client.Leistungsort, StringFormat='Leistungsort: {0}'}" />
             </StackLayout>
             <Frame Grid.Row="1" HeightRequest="500">
                 <ListView ItemsSource="{Binding ClientImages}">
                     <ListView.ItemTemplate>
                         <DataTemplate>
                             <ImageCell ImageSource="{Binding Path}" Text="{Binding Name}" />
                         </DataTemplate>
                     </ListView.ItemTemplate>
                 </ListView>
             </Frame>
    
             <Button
                 Grid.Row="2"
                 Command="{Binding CapturePhotoCommand}"
                 Text="Take Pictures" />
         </Grid>
     </StackLayout>
 </ContentPage>


Result:

114523-unbenannt.png


What am i missing?

Would be great if someone can point me in the right direction.


dotnet-xamarin
unbenannt.png (19.6 KiB)
unbenannt.png (14.6 KiB)
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

1 Answer

LeonLu-MSFT avatar image
0 Votes"
LeonLu-MSFT answered LeonLu-MSFT commented

Hello,​

Welcome to our Microsoft Q&A platform!

First of all, I install this nuget package. Xamarin.CommunityToolkit 1.2.0

114925-image.png


I used your xaml layout, I do not have BackgroundColor="{StaticResource VioletMain}", So I set a static value for it.

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MyTabbedPaged.Views.Page1"
             xmlns:xct="http://xamarin.com/schemas/2020/toolkit" 
             xmlns:viewmodels="clr-namespace:MyTabbedPaged.ViewModels">

    <ContentPage.BindingContext>
        <viewmodels:ClientDetailPageModel />
    </ContentPage.BindingContext>

    <xct:TabView
         TabIndicatorColor="Black"
         TabIndicatorPlacement="Bottom"
         TabStripPlacement="Bottom">
        <xct:TabViewItem FontAttributesSelected="Bold" Text="Dateien">
            <ContentView BackgroundColor="Violet">
                <StackLayout>
                    <Grid RowDefinitions="Auto, *, Auto">
                        <StackLayout Grid.Row="0" Padding="20">
                            <Label Text="{Binding Client.Id, StringFormat='ID: {0}'}" />
                            <Label Text="{Binding Client.Name, StringFormat='Name: {0}'}" />
                            <Label Text="{Binding Client.Leistungsort, StringFormat='Leistungsort: {0}'}" />
                        </StackLayout>
                        <Frame
                             Grid.Row="1"
                             BackgroundColor="Transparent"
                             HeightRequest="500">
                            <ListView ItemsSource="{Binding ClientImages}">
                                <ListView.ItemTemplate>
                                    <DataTemplate>
                                        <ImageCell ImageSource="{Binding Path}" Text="{Binding Name}" />
                                    </DataTemplate>
                                </ListView.ItemTemplate>
                            </ListView>
                        </Frame>
                        <Button
                             Grid.Row="2"
                             Command="{Binding CapturePhotoCommand}"
                             Text="Take Pictures" />
                    </Grid>
                </StackLayout>
            </ContentView>
        </xct:TabViewItem>
        <xct:TabViewItem FontAttributesSelected="Bold" Text="Überischt">
            <xct:TabViewItem.Content>
                <StackLayout Padding="20">
                    <Label Text="{Binding Client.Id, StringFormat='Name: {0}'}" />
                    <Label Text="{Binding Client.Name, StringFormat='Prize: {0}'}" />
                    <Label Text="{Binding Client.Leistungsort, StringFormat='Prize: {0}'}" />
                </StackLayout>
            </xct:TabViewItem.Content>
        </xct:TabViewItem>
    </xct:TabView>
</ContentPage>


Here is my editted ClientDetailPageModel.cs, Based on my experience, this issue is related to your ClientDetailPageModel, you can copy my code to make test.

using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.Text;

namespace MyTabbedPaged.ViewModels
{
    public class Client
    {
        public string Id { get; set; }
        public string Name { get; set; }
        public string Leistungsort { get; set; }
    }

    public class SourceImage
    {
        public string Path { get; set; }
        public string Name { get; set; }

    }
    class ClientDetailPageModel
    {
        public Client Client { get; set; }
        public ObservableCollection<SourceImage> ClientImages { get; set; }

        public ClientDetailPageModel()
        {
            Client = new Client() { Id="1", Name="test1", Leistungsort="1" };

            ClientImages = new ObservableCollection<SourceImage>();

            ClientImages.Add(new SourceImage() { Path= "icon1.png", Name="test1" });
            ClientImages.Add(new SourceImage() { Path = "icon1.png", Name = "test2" });

            ClientImages.Add(new SourceImage() { Path = "icon1.png", Name = "test3" });

        }
    }
}


I put test image to drawable folder.

114952-image.png


Here is running screenshot, it is running nornally.
114971-image.png

Best Regards,

Leon Lu



If the response is helpful, please click "Accept Answer" and upvote it.

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.



image.png (25.5 KiB)
image.png (14.3 KiB)
image.png (28.6 KiB)
· 1
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

@LarsStecker-1871 I have not heard from you for a couple of days. Please let me know if there is anything that I can help here.

0 Votes 0 ·