将图像添加到树视图控件 xamarin 表单中

Posted 2023-02-24

【中文标题】将图像添加到树视图控件 xamarin 表单中

【英文标题】：Add image into treeview control xamarin forms

【发布时间】：2019-12-01 21:27:38

【问题描述】：

第一个 xamarin 应用程序...测试 android...查看 https://github.com/danvanderboom/Xamarin-Forms-TreeView 上的树视图示例

希望通过绑定到树视图节点来包含图像... 我已经通过绑定从 how to display an image on xamarin forms using binding tag from image 当我尝试将它包含在它不起作用的树视图中时......到目前为止

所以查看 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 用于构建操作

任何帮助都会非常感谢

【参考方案1】：

根据您的描述，您想在DemoTreeCardView中添加图像控件，然后在HighEnergy.Controls.TreeView中使用绑定显示图像？我对吗？如果是的话，我建议你可以设置Image控件的宽度和高度，现在，你可以看到图像显示了。

这里是DemoTreeCardView，设置Image控件的宽高。

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


    

截图：

【讨论】：

@John，如果我的回复对您有帮助，请记得将我的回复标记为答案，谢谢。

太棒了...感谢您的帮助 Cherry...非常感谢！