Add image into treeview control xamarin forms

Question

First xamarin app...testing the android...looking at the treeview example on https://github.com/danvanderboom/Xamarin-Forms-TreeView

Would like to include an image through binding into the treeview node... Ive got the image displaying through binding from how to display an image on xamarin forms using binding tag from image its when I try to include it in the treeview where it isnt working....so far

so looking at HighEnergy.TreeView.Demo(Portable) -> Demo Module folder.

In DemoTreeNode.cs I have added

string _ImagePath = string.Empty;
    public string ImagePath
    {
        get { return _ImagePath; }
        set { Set("Image", ref _ImagePath, value); }
    }

in DemoTreeViewModel had edited the tree node to include image...

MyTree = new DemoTreeNode { Title = "Root", ImagePath= "champagne.jpg", Score = 0.5, IsExpanded = true };

In DemoTreeCardView.xaml I have included the image tag just after the title:

<Label x:Name="TitleLabel" Text="{Binding Title}" Font="Bold,20" TextColor="Black" VerticalOptions="Center" HorizontalOptions="Start"/>
            <Image Source="{Binding ImagePath}" />

then in the DemoTreeCardView code behind I have included the bindingContext()

    namespace HighEnergy.TreeView.Demo
{
    public partial class DemoTreeCardView : ContentView
    {
        public DemoTreeCardView()
        {
            InitializeComponent();
            this.BindingContext = this;
        }
    }
}

The image champagne.jpg is located in the Andriod project -> Resources -> drawable -> champagne.jpg and is set to andriodResource for build action

any help would be great thanks

Cherry Bu - MSFT Cherry Bu - MSFT · Accepted Answer · 2019-12-02T03:15:38

According to your description, you want to add image control in DemoTreeCardView, then using binding to display image in HighEnergy.Controls.TreeView? Am I right? If yes, I suggest you can set Image control width and height, now, you can see the image display.

Here is the DemoTreeCardView, setting Image control width and height.

<ContentView.Content>
    <Grid BackgroundColor="#CCCCCC" VerticalOptions="Start" HorizontalOptions="FillAndExpand">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="50"/>
        </Grid.RowDefinitions>


        <!-- left side -->
        <StackLayout Orientation="Horizontal" HorizontalOptions="StartAndExpand">
            <ContentView WidthRequest="30"/>

            <!-- tree node indentation spacer -->
    <BoxView x:Name="Spacer" WidthRequest="{Binding IndentWidth}"/>

            <!---this is a very bad way to load images, very slow, need to cache them somehow -->

            <Label x:Name="TitleLabel" Text="{Binding Title}" Font="Bold,20" TextColor="Black" VerticalOptions="Center"/>
            <Image Source="{Binding Imagepath}" WidthRequest="30" HeightRequest="30"/>
        </StackLayout>

        <!-- right side -->
        <!-- if you're testing on a smaller (smartphone) screen, you can comment out the following right side of content and delete one of the ColumnDefinitions for the Grid-->
        <StackLayout Grid.Column="1" Orientation="Horizontal" HorizontalOptions="FillAndExpand" Padding="16,0,0,0">
            <Label Text="{Binding Score,StringFormat='{0:F3}'}" Font="16" TextColor="Black" VerticalOptions="Center"/>
            <!-- TODO: bind WidthRequest and use ValueConverter to convert from 0-1 score to the width of the chart on screen -->
            <ContentView BackgroundColor="Green" HeightRequest="20" WidthRequest="150" HorizontalOptions="Start" VerticalOptions="Center"/>
        </StackLayout>

        <Button Grid.ColumnSpan="2" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" BackgroundColor="#00000000" Command="{Binding ToggleIsExpandedCommand}"/>
    </Grid>
</ContentView.Content>

In the DemoTreeNode class, add ImagePath property.

 string _Imagepath = string.Empty;
    public string Imagepath
    {
        get { return _Imagepath; }
        set { Set("Imagepath", ref _Imagepath, value); }
    }

In the DemoTreeViewModel class, set Imagepath value.

public DemoTreeViewModel()
    {
        MyTree = new DemoTreeNode { Title = "Root", Score = 0.5, IsExpanded = true };

        var a = MyTree.Children.Add(new DemoTreeNode { Title = "Branch A", Imagepath = "plu3.png", Score = 0.75, IsExpanded = true });
        a.Children.Add(new DemoTreeNode { Title = "Leaf A1",Imagepath="plu3.png", Score = 0.85, IsExpanded = true });
        a.Children.Add(new DemoTreeNode { Title = "Leaf A2", Imagepath = "plu3.png", Score = 0.65, IsExpanded = true });

        var b = MyTree.Children.Add(new DemoTreeNode { Title = "Branch B", Imagepath = "plu3.png", Score = 0.25, IsExpanded = true });
        b.Children.Add(new DemoTreeNode { Title = "Leaf B1", Imagepath = "plu3.png", Score = 0.35, IsExpanded = true });
        b.Children.Add(new DemoTreeNode { Title = "Leaf B2", Imagepath = "plu3.png", Score = 0.15, IsExpanded = true });


    }

The screenshot:

Add image into treeview control xamarin forms

1 Answers