简体   繁体   中英

How to load and bind a image contained in a portable library within an UWP app?

I'm doing an UWP app, and I'm having an hard time to load and bind an image with an UWP app, how should it be done?

My current structure:

MyApp.Model:
 |
 |-Models
   |-MyModel.cs
   |-MyModelContainer.cs
 |-Resources
   |-image1.png
   |-image2.png
   |-image3.png

My Xaml is in another project(win 10 universal app and reference this Portable class library.)

MyModelContainer is only a singleton container that instantiate a IEnumerable<MyModel> . Here are their content:

public class MyModel{
    public String Name{get;set;}
    public ??????? Icon {get;set;}
}

public static class MyModelContainer{
    private static IEnumerable<MyModel> _myModelList;

    public static IEnumerable<MyModel> MyModelList{get{
        if(_myModelList==null){
            Initialize();
        }
        return _myModelList;
    }}

    private static Initialize(){
        _myModelList = new List<MyModel>() {
            new MyModel(){
                Name = "Model one"
                Icon = ???????
            }
        };
    }
}

At some place in my XAML I receive a list of MyModel , in a ItemsControl :

<ItemsControl  ItemsSource="{Binding MyModelListProperty}"  >
    <ItemsControl.ItemsPanel >
        <ItemsPanelTemplate>
            <StackPanel/>
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
    <ItemsControl.ItemTemplate>
        <DataTemplate >
            <Button Margin="10" MinHeight="50" MinWidth="40"  HorizontalAlignment="Stretch" VerticalAlignment="Stretch" >
                <Grid>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="*"></RowDefinition>
                        <RowDefinition Height="Auto"></RowDefinition>
                    </Grid.RowDefinitions>
                    <Image Source="{Binding Icon}" ></Image>
                    <TextBlock Grid.Row="1" Text="{Binding Name}" ></TextBlock>
                </Grid>
            </Button>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>^

My questions:

  1. What is the type of property that I should use to bind an image(I tought it was BitmapImage ?
  2. How should I create this property? I tried Icon = new BitmapImage(new Uri("ms-appx://MyApp.Model/Resources/image1.png")) without any luck, I have no image loaded(and the ImageFailed event is triggered).
  3. How should I bind this property to the <Image/> ?

This is for an UWP(windows 10) app, not WPF, not win8.

Thank you very much.

EDIT

Here is the folder structure

MyApp == AstroApp
MyApp.Model == AstroApp.Model
MyModel = AstroSign
MyModelContainer = AstroManager

在此处输入图片说明

If your image is in the same project as your MyModelContainer, this should work:

public class MyModel{
    public String Name{get;set;}
    public ImageSource Icon {get;set;}
}

public static class MyModelContainer{
    private static IEnumerable<MyModel> _myModelList;

    public static IEnumerable<MyModel> MyModelList{get{
        if(_myModelList==null){
            Initialize();
        }
        return _myModelList;
    }}

    private static Initialize(){
        _myModelList = new List<MyModel>() {
            new MyModel(){
                Name = "Model one"
                Icon = new BitmapImage(new Uri("ms-appx:///Resources/image1.png"));
            }
        };
    }
}

If your image is in another assembly, use this url:

Icon = new BitmapImage(new Uri("ms-appx:///NameOfProjectWithImage/Resources/image1.png"));

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM