Question

我正在尝试在运行时显示尺寸的控件中显示一些相册

XAML：

    <Grid>
    <Grid.Resources>
        <DataTemplate x:Key="AlbumsTemplate">
            <Grid>
                <Border Width="{Binding ThumbWidth}" Height="{Binding ThumbHeight}">
                    <Border.Background>
                        <ImageBrush ImageSource="{Binding Cover}"/>
                    </Border.Background>
                </Border>
                <StackPanel>
                    <TextBlock Text="{Binding Artist}" />
                    <TextBlock Text="{Binding Name}" />
                </StackPanel>
            </Grid>
        </DataTemplate>
    </Grid.Resources>

    <Grid.RowDefinitions>
        <RowDefinition />
    </Grid.RowDefinitions>

    <ListBox ItemsSource="{Binding Albums}" ItemTemplate="{DynamicResource AlbumsTemplate}">
        <ListBox.ItemsPanel>
            <ItemsPanelTemplate>
                <WrapPanel />
            </ItemsPanelTemplate>
        </ListBox.ItemsPanel>
    </ListBox>
</Grid>

背后的代码

 public MainWindow()
    {
        InitializeComponent();
        DataContext = new ViewModel();
    }

ViewModel.cs

    class ViewModel
{
    private ObservableCollection<Album> Albums { get; set; }
    public int ThumbWidth { get; set; }
    public int ThumbHeight { get; set; }

    public ViewModel()
    {
        ThumbWidth = 150;
        ThumbHeight = 150;
        Albums = DataSupplier.Instance.GetAlbums();
    }
}

专辑类

    class Album
{
    public string Name { get; set; }
    public string Artist { get; set; }
    public BitmapImage Cover { get; set; }

    public Album(string name, string artist, BitmapImage cover)
    {
        Name = name;
        Artist = artist;
        Cover = cover;
    }
}

我可以看到所有包含姓名，艺术家和封面的相册，但封面的尺寸不正确。

在DataTemplate外部的控件中，我可以检索ThumbWidth和ThumbHeight

我错过了什么？

Answer 1

问题是您当前的DataContext是Album而不是ViewModel。您只能拥有一个 DataContext。

解决此问题的一种快速方法是将ThumbWidth和ThumbHeight添加到Album级。
我希望添加一个类AlbumViewModel，其中包含显示相册所需的所有信息（如：witdh，height，name，title， ...）。此外，AlbumViewModel的{{1}}列表位于ViewModel。这样做是MVVM中常见问题的解决方案。
另一种 hacky 方式是访问xaml中父级的数据上下文属性：

{Binding ThumbWidth, ElementName=LayoutRoot}

更多关于这样做here。

Answer 2

无需为每个Album添加高度/宽度，您可以使用DataContext的{{1}}（当前是高度/宽度）。

您可以使用ListBox绑定

来执行此操作

FindAncestor

来自两个来源的WPF绑定

2 个答案: