Question

我在wpf窗口中有一个listview，如下所示

<ListView Name="lvInstructors" ItemsSource="{Binding Instructors}">
                    <ListView.ItemsPanel>
                        <ItemsPanelTemplate>
                            <UniformGrid Columns="3">
                            </UniformGrid>
                        </ItemsPanelTemplate>
                    </ListView.ItemsPanel>

                    <ListView.ItemTemplate>
                        <DataTemplate>
                            <Grid>
                                <StackPanel Orientation="Horizontal">
                                    <Image Source="http://localhost:30870/Content/img/avatar1.jpg" Width="30px"></Image>
                                    <TextBlock Text="{Binding InstructorName}" FontWeight="Bold" />
                                </StackPanel>
                                <StackPanel Orientation="Horizontal">
                                    <TextBlock Text="{Binding Description}" />
                                </StackPanel>
                                <StackPanel Orientation="Horizontal">
                                    <TextBlock Text="{Binding Qualifications}" />
                                </StackPanel>
                                <StackPanel Orientation="Horizontal" Name="InstructorRating">
                                    <TextBlock Text="{Binding Rating}" />
                                </StackPanel>
                            </Grid>
                        </DataTemplate>
                    </ListView.ItemTemplate>
                </ListView>

我需要以编程方式更改第一个stackPanel内的图像源属性，我该怎么做？

Answer 1

考虑你的xaml-Code：

<ListView Name="lvInstructors" ItemsSource="{Binding Instructors}">
                <ListView.ItemsPanel>
                    <ItemsPanelTemplate>
                        <UniformGrid Columns="3">
                        </UniformGrid>
                    </ItemsPanelTemplate>
                </ListView.ItemsPanel>

                <ListView.ItemTemplate>
                    <DataTemplate>
                        <Grid>
                            <StackPanel Orientation="Horizontal">
                                <Image Source="{Binding ImageSource}" Width="30px"></Image>
                                <TextBlock Text="{Binding InstructorName}" FontWeight="Bold" />
                            </StackPanel>
                            <StackPanel Orientation="Horizontal">
                                <TextBlock Text="{Binding Description}" />
                            </StackPanel>
                            <StackPanel Orientation="Horizontal">
                                <TextBlock Text="{Binding Qualifications}" />
                            </StackPanel>
                            <StackPanel Orientation="Horizontal" Name="InstructorRating">
                                <TextBlock Text="{Binding Rating}" />
                            </StackPanel>
                        </Grid>
                    </DataTemplate>
                </ListView.ItemTemplate>
            </ListView>

现在，由于我们不知道您的代码是如何工作的，我将只发布片段：

public class ViewModel
{
    public ObservableCollection<Instructor> Instructors {get; set}

    public void RetrieveInstructorsFromService()
    {
         // the service needs to populate all properties of the Instructor isntance.
         var instructors = service.GetInstructors();
         this.Instructors = new ObservableCollection<Instructor>(instructors);
    }
}

public class Instructor
{
    [...]
    public string Description { get; set; }
    public string ImageSource { get; set; }
    [...]
}

现在，您的列表将显示服务中的所有教师及其相应的头像图像。

更改wpf listview DataTemplate中的图像源

1 个答案: