Добавить изображение в древовидную форму управления xamarin формы

Question

Первое приложение xamarin ... тестирование андроида ... глядя на пример дерева просмотра на https://github.com/danvanderboom/Xamarin-Forms-TreeView

Хотелось бы включить изображение через привязку в узел дерева дерева ... Я получилизображение, отображаемое с помощью привязки из , как отображать изображение на формах xamarin с помощью тега привязки из изображения , когда я пытаюсь включить его в древовидную структуру, где оно не работает .... пока

так что, глядя на HighEnergy.TreeView.Demo (Portable) -> папку Demo Module.

В DemoTreeNode.cs я добавил

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

в DemoTreeViewModel отредактировал узел дерева, чтобы включить изображение...

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

В DemoTreeCardView.xaml я включил тег изображения сразу после заголовка:

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

, затем в коде DemoTreeCardView я включил bindingContext ()

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

Изображение champagne.jpg находится в проекте Andriod -> Resources -> drawable -> champagne.jpg и настроено на andriodResource для действия по сборке

любая помощь будет отличнойспасибо

Answer 1

Согласно вашему описанию, вы хотите добавить элемент управления изображением в DemoTreeCardView, затем использовать привязку для отображения изображения в HighEnergy.Controls.TreeView? Я прав? Если да, я предлагаю вам установить ширину и высоту элемента управления изображением, теперь вы можете видеть отображение изображения.

Вот DemoTreeCardView, устанавливающий ширину и высоту элемента управления изображением.

<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>

В классе DemoTreeNode добавьте свойство ImagePath.

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

В классе DemoTreeViewModel установите значение Imagepath.

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 });


    }

Снимок экрана: