在當前選定的ListBox項下打開詳細信息面板

Question

我使用Listbox在以下布局中有一個電影庫：

當用戶在庫中選擇電影時，我需要打開一個包含電影詳細信息的框，如下所示：

我設法創建了一個差距和細節面板，但不知道如何移動它。

如果有人知道如何做到這一點，或者可以建議一個更優雅的解決方案，我將不勝感激。

提前致謝。

Answer 1

我使用DataGrid因為它提供了RowDetailsTemplate 。

每行只包含一個圖像。

有三個DataGrids 。

您可以設置所需的列數。

我還沒有完成DataGrids的樣式，所以你會看到額外的邊框等。我將刪除它們，然后更新答案。

您可以按原樣使用以下代碼：

XAML

<Window x:Class="WpfApplicationTest.WinNewGrid" ...>
    <Window.Resources>       
        <ItemsPanelTemplate x:Key="ItemsPanelTemplate1">
            <DataGridRowsPresenter x:Name="PART_RowsPresenter" IsItemsHost="True" Orientation="Horizontal"/>
        </ItemsPanelTemplate>

        <DataTemplate x:Key="DetailsKey">
          <StackPanel DataContext="{Binding SelectedMovie}">
            <TextBlock Height="50" Background="Red" Text="{Binding SourcePath}"/>
            <TextBlock Height="50" Background="Red" Text="{Binding ID}"/>
          </StackPanel>
         </DataTemplate>
    </Window.Resources>
    <Grid>

        <DataGrid x:Name="Dgrd" AutoGenerateColumns="False">
            <DataGrid.Columns>
                <DataGridTemplateColumn>
                    <DataGridTemplateColumn.CellTemplate>
                        <DataTemplate>
                            <DataGrid AutoGenerateColumns="False" ItemsSource="{Binding Sets}" RowDetailsTemplate="{StaticResource DetailsKey}">

                                <DataGrid.Columns>
                                    <DataGridTemplateColumn>
                                        <DataGridTemplateColumn.CellTemplate>
                                            <DataTemplate>
                                                <DataGrid ItemsSource="{Binding MovieImageList}" SelectedItem="{Binding SelectedMovie, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" ItemsPanel="{DynamicResource ItemsPanelTemplate1}" AutoGenerateColumns="False">                                                    
                                                    <DataGrid.Columns>
                                                        <DataGridTemplateColumn>
                                                            <DataGridTemplateColumn.CellTemplate>
                                                                <DataTemplate>
                                                                    <Image Source="{Binding SourcePath}" Width="50" Height="50"/>
                                                                </DataTemplate>
                                                            </DataGridTemplateColumn.CellTemplate>
                                                        </DataGridTemplateColumn>
                                                    </DataGrid.Columns>
                                                </DataGrid>
                                            </DataTemplate>
                                        </DataGridTemplateColumn.CellTemplate>
                                    </DataGridTemplateColumn>
                                </DataGrid.Columns>
                            </DataGrid>
                        </DataTemplate>
                    </DataGridTemplateColumn.CellTemplate>
                </DataGridTemplateColumn>
            </DataGrid.Columns>
        </DataGrid>


    </Grid>
</Window>

碼

using System;
using System.Collections;
using System.Collections.Generic;
using System.Linq;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Controls.Primitives;

namespace WpfApplicationTest
{
    /// <summary>
    /// Interaction logic for WinNewGrid.xaml
    /// </summary>
    public partial class WinNewGrid : Window
    {
        public WinNewGrid()
        {
            InitializeComponent();

            List<MovieImage> images = new List<MovieImage>();
            foreach (string fileName in System.IO.Directory.GetFiles(@"C:\Users\Public\Pictures\Sample Pictures"))
            {
                if (fileName.EndsWith("jpg") || fileName.EndsWith("png") || fileName.EndsWith("gif"))
                    images.Add(new MovieImage() { SourcePath = new Uri(fileName, UriKind.Absolute), ID = Guid.NewGuid().ToString() });
            }

            MovieAndDetailsViewModel movieDetailsVm = new MovieAndDetailsViewModel(images);
            movieDetailsVm.Columns = 3;

            this.DataContext = this;
            Dgrd.ItemsSource = movieDetailsVm.ItemsSource;
        }
    }

    public class MovieAndDetailsViewModel
    {
        private MovieSetsViewModel _setViewModel;
        private List<MovieSetsViewModel> _list;
        public IEnumerable<MovieSetsViewModel> ItemsSource 
        { 
            get {
                _setViewModel = new MovieSetsViewModel();
                int pointer = 0;
                int cols = 6;
                List<MovieListViewModel>[] images = Data.Count() % cols > 0 ? new List<MovieListViewModel>[Data.Count() / cols + 1]
                    : new List<MovieListViewModel>[Data.Count() / cols];

                while (pointer < images.Count())
                {
                    MovieListViewModel mlistVm = new MovieListViewModel();
                    for (int i = pointer * cols; i < Data.Count() && i <= pointer * cols + cols - 1; ++i)
                    {
                        MovieImage img = Data.ToList()[i];
                        mlistVm.MovieImageList.Add(img);
                    }
                    _setViewModel.Sets.Add(mlistVm);
                    pointer += 1;
                }

                _list = new[] { _setViewModel }.ToList();
                return _list; 
            }
        }

        public IEnumerable<MovieImage> Data { get; set; }

        public int Columns { get; set; }

        public MovieAndDetailsViewModel(IEnumerable<MovieImage> movieImages)
        {
            Data = movieImages;

            Columns = 4;
        }
    }

    public class MovieSetsViewModel
    {
        public List<MovieListViewModel> Sets { get; set; }

        public MovieSetsViewModel()
        {
            Sets = new List<MovieListViewModel>();
        }
    }

    public class MovieListViewModel
    {
        public List<MovieImage> MovieImageList { get; set; }

        /* This gets updated while choosing a movie in DataGrid */
        public MovieImage SelectedMovie { get; set; }

        public MovieListViewModel()
        {
            MovieImageList = new List<MovieImage>();
            SelectedMovie = new MovieImage();
        }
    }

    public class MovieImage
    {
        public Uri SourcePath { get; set; }
        public string ID { get; set; }
    }
}