如何在设计器窗口中的设计时看到ListView中的绑定集合元素?

时间:2015-09-15 02:28:35

标签: c# wpf xaml listview data-binding

在研究C#和XAML绑定时,我记得能够在设计时看到设计窗口中的绑定元素。但是,我用来将此集合绑定到ListView的策略在运行时才显示元素,这将使设计更加困难。

我想要的是图像和文字出现在设计窗口中,我认为这与设计师在设计时创建一个类的实例以提取绑定元素有关...我只是不喜欢回想一下这种方法。任何帮助非常感谢!

以下是相关的XAML:

<Page
x:Class="Class_Name.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:Class_Name"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">

<Page.Resources>
    <!-- TODO: Delete this line if the key AppName is declared in App.xaml -->
    <x:String x:Key="AppName">Program Name</x:String>
</Page.Resources>

       <ListView x:Name="CharacterList">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <StackPanel Margin="55,20,20,20">
                        <TextBlock Text="{Binding Name}" Style="{StaticResource SubheaderTextBlockStyle}"/>
                        <Image Source="{Binding Image}" Stretch="None" HorizontalAlignment="Left"/>
                    </StackPanel>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
</Page>

这是CharClass:

    class CharClass
{
    public string Name { get; private set; }
    public BitmapImage Image { get; private set; }

    public CharClass(string name, string imagePath)
    {
        Name = name;
        Image = new BitmapImage() { UriSource = new Uri("ms-appx:///Assets/" + imagePath) };
    }
}

这是收藏:

    class AllCharacters:ObservableCollection<CharClass>
{
    public AllCharacters()
    {
        loadData();
    }

    private void loadData()
    {
        this.Add(new CharClass("Barbarian", "125px-C_barbarian.bmp"));
        this.Add(new CharClass("Crusader", "125px-Crusader.bmp"));
        this.Add(new CharClass("Demon Hunter", "125px-C_demon.bmp"));
        this.Add(new CharClass("Monk", "125px-C_monk.bmp"));
        this.Add(new CharClass("Witch Doctor", "125px-C_witch.bmp"));
    }
}

这是MainPage.xaml.cs:

    public sealed partial class MainPage : Page
{
    AllCharacters characterList;
    public MainPage()
    {
        this.InitializeComponent();
        this.Loaded += MainPage_Loaded;
    }

    private void MainPage_Loaded(object sender, RoutedEventArgs e)
    {
        characterList = new AllCharacters();
        CharacterList.ItemsSource = characterList;
    }
}

1 个答案:

答案 0 :(得分:2)

DataContextItemsSource绑定添加到您的XAML,如下所示:

<ListView x:Name="listView" Margin="0" ItemsSource="{Binding Mode=OneWay}">
            <ListView.DataContext>
                <local:AllCharacters/>
            </ListView.DataContext>
            <ListView.ItemTemplate>
                <DataTemplate>
                    <StackPanel Margin="55,20,20,20">
                        <TextBlock Text="{Binding Name}" />
                        <Image Source="{Binding Image}" Stretch="None" HorizontalAlignment="Left"/>
                    </StackPanel>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>

编辑:我进行了以下修改以显示图片:

XAML:

                <Image Stretch="None" HorizontalAlignment="Left">
                    <Image.Source>
                        <BitmapImage UriSource="{Binding Image}"></BitmapImage>
                    </Image.Source>
                </Image>

CharClass.cs:

class CharClass
    {
        public string Name { get; private set; }
        public string Image { get; private set; }
        //public BitmapImage Image { get; private set; }
    }

enter image description here