Question

我有一个包含4个图像的列表框，每个显示一个工具提示我想将我的代码重构为一个样式。问题是列表框位于datagrid中，其中itemsource设置为collectionView。

<CollectionViewSource x:Key="ItemsViewSource" Source="{Binding PicklistItemCollection}" />

和datagrid ..

<DataGrid x:Name ="PicklistItemDataGrid" x:FieldModifier="public" AutoGenerateColumns="False"
          SelectionMode="Single" SelectionUnit="FullRow" VerticalScrollBarVisibility="Auto"
          MaxHeight="492" ItemsSource="{Binding Source={StaticResource ItemsViewSource}}"
          DataContext="{Binding Path=this, Mode=TwoWay}">

现在图像源需要绑定到ImageUrl数组[0]，[1]，[2]，[3]

<ListBox ScrollViewer.HorizontalScrollBarVisibility="Auto" >
<ListBox.ItemsPanel>
    <ItemsPanelTemplate>
        <WrapPanel IsItemsHost="True" />
    </ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBoxItem>
    <Image ToolTipService.ShowDuration="60000" Source="{Binding Images[0].ImageUrl}" Width="240" Height="240" Stretch="Uniform" Margin="0,8,5,8">
        <Image.ToolTip>

            <ToolTip  MaxWidth="600" MaxHeight="580" 
                      DataContext="{Binding PlacementTarget, RelativeSource={RelativeSource Self}}">
                <Border BorderBrush="Black" BorderThickness="1" Margin="5,7,5,5">
                    <Image Source="{Binding Source}" Stretch="Fill" />
                </Border>
            </ToolTip>
        </Image.ToolTip>
    </Image>
</ListBoxItem>
<ListBoxItem>
    <Image ToolTipService.ShowDuration="60000" Source="{Binding Images[1].ImageUrl}" Width="240" Height="240" Stretch="Uniform" Margin="0,8,5,8">
        <Image.ToolTip>
            <ToolTip  MaxWidth="600" MaxHeight="580" 
                      DataContext="{Binding PlacementTarget, RelativeSource={RelativeSource Self}}">
                <Border BorderBrush="Black" BorderThickness="1" Margin="5,7,5,5">
                    <Image Source="{Binding Source}" Stretch="Fill" />
                </Border>
            </ToolTip>
        </Image.ToolTip>
    </Image>
</ListBoxItem>

.....and so on... for each array item

我的视图模型和类：

class PicklistItemViewModel : INotifyPropertyChanged
{
    private ObservableCollection<PicklistItem> _picklistItemCollection;

    public PicklistItemViewModel()
    {



        List<Rootobject> rootObjectList = CARestRequest.ChannelAdvisorRestCall(CARestRequest.url.product, CARestRequest.GetProductParameterList(CARestRequest.GetSkuString()));
        ObservableCollection<PicklistItem> picklist = new ObservableCollection<PicklistItem>();


        foreach (var rol in rootObjectList)
        {
            foreach (var r in rol.value)
            {
                picklist.Add(AddPicklistItem(r));
            }

        }
        PicklistItemCollection = picklist;

    }
}

public class PicklistItem:INotifyPropertyChanged
{
    private string itemcode;
    private string location;
    private int qty;
    private string title;
    public bool RowActive { get; set; } = false;

    //Here is old images list and the getter and setters for the private 
    //variables i deleted to save space
    //public List<PicklistImageUrl> Images { get; set; }

    private ObservableCollection<PicklistImageUrl> _imageCollection;
    public ObservableCollection<PicklistImageUrl> Images
    {
        get { return _imageCollection; }
        set { _imageCollection = value; }
    }
}
public class PicklistImageUrl
{
    public string ImageUrl { get; set; }
}

因此，在使Images属性成为可观察集合后，如果我使用数组索引[0,1,2,3，..]，它们仍然只会填充。我应该如何将Images集合绑定到列表框项目中的图像控件，并最好为ListboxItem创建一个样式，这样除了图像数组索引之外没有[x]个listboxitems具有相同的代码

Answer 1

改为生成ItemTemplete：

<ListBox ItemsSource="{Binding Images}">
    <ListBox.ItemTemplate>
        <DataTemplate>
            <Image ToolTipService.ShowDuration="60000" Source="{Binding ImageUrl}" Width="240" Height="240" Stretch="Uniform" Margin="0,8,5,8">
                <Image.ToolTip>
                    <ToolTip  MaxWidth="600" MaxHeight="580" 
                DataContext="{Binding PlacementTarget, RelativeSource={RelativeSource Self}}">
                        <Border BorderBrush="Black" BorderThickness="1" Margin="5,7,5,5">
                            <Image Source="{Binding Source}" Stretch="Fill" />
                        </Border>
                    </ToolTip>
                </Image.ToolTip>
            </Image>
        </DataTemplate>
    </ListBox.ItemTemplate>
</ListBox>

将可观察集合中的可观察集合绑定到列表框项目

1 个答案: