有没有一种方法可以使用视图模型中的嵌入式图像

时间:2020-07-21 12:11:26

标签: xaml xamarin xamarin.forms

我有一个获取并设置图像源的视图模型。我不知道这是否正确。

public class animalsmodel
{
    public int id { get; set; }
    public string AnimalNames { get; set; }

    public Button Animalselect { get; set; }

    public Button Back { get; set; }

    public ImageSource AnimalPhoto { get; set; }


}

}

然后我在列表视图中使用它。但是感觉应该从资源中调用它吗?

private void SearchBar_TextChanged(object sender, TextChangedEventArgs e)
    {
        alistview.ItemsSource = GetAnimals(e.NewTextValue);
    }

    IEnumerable<animalsmodel> GetAnimals(string searchText = null)
    {
        var animals = new List<animalsmodel>

        {
            new animalsmodel() { id = 1, AnimalNames = "Aardvark", **AnimalPhoto** = ("AppSFari.Images.Aardvark.jpg")},

然后在我的XAML文件中使用它。显示名称,我可以看到图像应该在哪里,但是它是空白的。并且我已将项目中的图像设置为“嵌入式资源”。

<ListView x:Name="alistview" BackgroundColor ="AliceBlue" HasUnevenRows="True" ItemSelected="alistview_ItemSelected">
                <ListView.ItemTemplate>
                    <DataTemplate>
                            <ImageCell ImageSource="{Binding AnimalPhoto}" Text="{Binding AnimalNames}"/>
                           
                    </DataTemplate>

                </ListView.ItemTemplate>
            </ListView>

3 个答案:

答案 0 :(得分:0)

感谢您的帮助。这就是我所做的,我将其用作列表视图的视图模型。

class ImageResourceExtention : IMarkupExtension
    {
        public string PhotoSource { get; set; }
        public string AnimalNames { get; set; }

        public Button Back { get; set; }
        public Button Animalselect { get; set; }
        public int id { get; set; }
        public object ProvideValue(IServiceProvider serviceProvider)
        {
            if (PhotoSource == null) 
            {

                return null;
            
            }

            var imageSource = ImageSource.FromResource(PhotoSource, typeof(ImageResourceExtention).GetTypeInfo().Assembly);

            return imageSource;       
        
        }

    }

然后,我的列表视图将具有ID,动物名和最后一张图像。这就是我的方法。我不知道图像部分是否正确?

  public partial class AnimalsPage : ContentPage

        
        
    {
        
        private void SearchBar_TextChanged(object sender, TextChangedEventArgs e)
        {
            alistview.ItemsSource = GetAnimals(e.NewTextValue);
        }

        IEnumerable<ImageResourceExtention> GetAnimals(string searchText = null)
        {
            var animals = new List<ImageResourceExtention>

            {
                new ImageResourceExtention() { id = 1, AnimalNames = "Aardvark", PhotoSource = "AppSFari.Images.Aardvark.jpg"},
                new ImageResourceExtention() { id = 2, AnimalNames = "Aardwolf", PhotoSource = "AppSFari.Images.Aardwolf.jpg" },
                new ImageResourceExtention() { id = 3, AnimalNames = "Baboon" },
                new ImageResourceExtention() { id = 4, AnimalNames = "Bat-eared Fox" },
                new ImageResourceExtention() { id = 5, AnimalNames = "Black Backed Jackel" },
                new ImageResourceExtention() { id = 6, AnimalNames = "Black Rhino" },
                new ImageResourceExtention() { id = 7, AnimalNames = "Black Wildebeest" },
                new ImageResourceExtention() { id = 8, AnimalNames = "Brown Hyena" },
                new ImageResourceExtention() { id = 9, AnimalNames = "Buffalo" },
                new ImageResourceExtention() { id = 10, AnimalNames = "Bush Pig" },
                new ImageResourceExtention() { id = 11, AnimalNames = "Bushbuck" },
                new ImageResourceExtention() { id = 12, AnimalNames = "Cape Grysbok" },
                new ImageResourceExtention() { id = 13, AnimalNames = "Caracal" },
                new ImageResourceExtention() { id = 14, AnimalNames = "Cheetah" },
                new ImageResourceExtention() { id = 15, AnimalNames = "Common Duiker" },
                new ImageResourceExtention() { id = 16, AnimalNames = "Eland" },
                new ImageResourceExtention() { id = 17, AnimalNames = "Gemsbok/Oryx" },
                new ImageResourceExtention() { id = 18, AnimalNames = "Giraffe" },
                new ImageResourceExtention() { id = 19, AnimalNames = "Hippo" },
                new ImageResourceExtention() { id = 20, AnimalNames = "Impala" },
            };
            
            if (String.IsNullOrWhiteSpace(searchText))
                return animals;
            var lowerAnimals = searchText.ToLower();
            return animals.Where(c => c.AnimalNames.ToLower().StartsWith(lowerAnimals));
        }



    public AnimalsPage()
        {
            InitializeComponent();

            alistview.ItemsSource = GetAnimals();
            BindingContext = this;
            
         }

       async private void Button_Clicked(object sender, EventArgs e)
        {
            await myScrollview.ScrollToAsync(1, alistview.Y, true);
        }

       async private void alistview_ItemSelected(object sender, SelectedItemChangedEventArgs e)
        {
            var animals = e.SelectedItem as ImageResourceExtention;
            
            await Navigation.PushAsync(new Aardvark(animals.AnimalNames, animals.Animalselect, animals.Back));
        }

       async private void Button_Clicked_1(object sender, EventArgs e)
        {
            await Navigation.PopAsync();
        }

然后在我的内容页面中,列表和搜索栏都可以使用,但是图像应为空白。

       x:Class="AppSFari.Kwandwe_Pakage.AnimalsPage"
             xmlns:local="clr-namespace:AppSFari.Kwandwe_Pakage"
             NavigationPage.HasNavigationBar="False">
    <ContentPage.Content>
        <ScrollView HeightRequest="3000" x:Name="myScrollview">
            <AbsoluteLayout>
                
                       
                <StackLayout>
                <SearchBar 
                    TextChanged="SearchBar_TextChanged"
                    Placeholder="Search Animal"
                    PlaceholderColor="Gray"
                    HorizontalTextAlignment="Center"
                    FontSize="Small"
                    FontAttributes="Italic"
                    VerticalOptions="Center" HorizontalOptions="End"/>
                <ListView x:Name="alistview" BackgroundColor ="AliceBlue" 
                          HasUnevenRows="True"
                          ItemSelected="alistview_ItemSelected">
                    <ListView.ItemTemplate>
                        <DataTemplate>
                                <ViewCell>
                                    <StackLayout Orientation="Horizontal">
                                        <Image Source="{Binding PhotoSource}" Aspect="AspectFit" 
                                               HeightRequest="60" 
                                               WidthRequest="60"/>
                                        <Label Text="{Binding AnimalNames}" TextColor="Black" 
                                               FontFamily="appfontM"
                                                VerticalTextAlignment="Center"/>
                                    </StackLayout>
                                    
                                </ViewCell>

                            </DataTemplate>

                    </ListView.ItemTemplate>
                </ListView>
                <Button Text="Back to top" Clicked="Button_Clicked"/>
            </StackLayout>
                <Button Text="Back" BackgroundColor="Transparent" FontSize="8" 
                        AbsoluteLayout.LayoutBounds="0,0,0.2,0.05" AbsoluteLayout.LayoutFlags="All"
                        Clicked="Button_Clicked_1"/>
            </AbsoluteLayout>
        </ScrollView>
    </ContentPage.Content>
</ContentPage>

对不起,如果我犯了愚蠢的错误,我是陌生的。

答案 1 :(得分:0)

您的代码完全不正确。

关于如何使用嵌入式图像,请检查here

ProvideValue方法仅在我们通过以下方式在xaml中设置 static 字符串时触发,

 <Image Source="{local:ImageResource WorkingWithImages.beach.jpg}" />

换句话说,嵌入的图像只能在xaml中硬编码,而不能在代码中硬编码。


正确的方式

将图像放入特定的平台项目,iOS->图像资产/资源,Android->资源。

不要使用嵌入式图像,请使用本地图像,您可以参考

https://docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/images?tabs=windows#local-images

https://docs.microsoft.com/en-us/samples/xamarin/xamarin-forms-samples/userinterface-listview-customcells/

更新

更改Aardvark构造函数的参数类型。

    public Aardvark(String AnimalNames, Button Animalselect, Button Back, string PhotoSource)
    {
        InitializeComponent();
        AnimalNameCall.Text = AnimalNames;
        addanimal = Animalselect;
        terug = Back;
        dierfoto.Image = PhotoSource;
    }

答案 2 :(得分:0)

好的,所以我尝试了该代码,但是仍然遇到相同的错误。这是我收到错误的行。 animals.PhotoSource准确。

await Navigation.PushAsync(new Aardvark(animals.AnimalNames, animals.Animalselect, animals.Back, animals.PhotoSource));

在这里,我将为您提供所有代码:这就是我所更改的,就像您建议的AnimalPhoto是每只动物的形象

async private void alistview_ItemSelected(object sender, SelectedItemChangedEventArgs e)
        {
            var animals = e.SelectedItem as ImageResourceExtention;
            string AnimalPhoto = animals.PhotoSource;
            
            await Navigation.PushAsync(new Aardvark(animals.AnimalNames, animals.Animalselect, animals.Back, animals.PhotoSource));
        }

然后应进入动物名和按钮所在的Aardvark页。我希望图像也被加载。这是xaml

x:Class="AppSFari.Kwandwe_Pakage.KwandweAnimal.Aardvark"
             NavigationPage.HasNavigationBar="False">
    <ContentPage.Content>
        <AbsoluteLayout>
        
            <Label x:Name="AnimalNameCall" FontSize="30" FontAttributes="Bold"
                    HorizontalTextAlignment="Center"
                   AbsoluteLayout.LayoutBounds="0,0.2,1,0.3" AbsoluteLayout.LayoutFlags="All"/>

            <Image x:Name="dierfoto" AbsoluteLayout.LayoutBounds="0.5,0.5,0.5,0.5" 
                   AbsoluteLayout.LayoutFlags="All" 
                   Aspect="AspectFit"/>
           
            <Button x:Name="addanimal" Text="+"
                    AbsoluteLayout.LayoutBounds="0.5,1,0.1,0.1" 
                    AbsoluteLayout.LayoutFlags="All" 
                    BackgroundColor="Transparent" 
                    Clicked="addanimal_Clicked"/>
           
            <Button x:Name="terug" Text="Back" FontSize="8"
                    BackgroundColor="Transparent"
                    AbsoluteLayout.LayoutBounds="0,0,0.2,0.1" 
                    AbsoluteLayout.LayoutFlags="All"
                    Clicked="terug_Clicked"/>
        </AbsoluteLayout>
    </ContentPage.Content>
</ContentPage>

这是背后的代码。如果将Image PhotoSource更改为字符串,则会在dierfoto = PhotoSource

处收到错误消息
    public partial class Aardvark : ContentPage
    {
       
        public Aardvark(String AnimalNames, Button Animalselect, Button Back, Image PhotoSource)
        {
            InitializeComponent();
            AnimalNameCall.Text = AnimalNames;
            addanimal = Animalselect;
            terug = Back;
            dierfoto = PhotoSource;
        }

       async private void terug_Clicked(object sender, EventArgs e)
        {
            await Navigation.PopAsync();
        }

        private void addanimal_Clicked(object sender, EventArgs e)
        {
            string AnimalNames = AnimalNameCall.Text;
            MessagingCenter.Send<Aardvark, string>(this, "Add", AnimalNames);
        }
    }
}