9

XAML 内に定義された 2 つの DataTemplates があり、それぞれが個別の ItemsControl パネルに使用されます。

メインの ItemsControl は、ObservableCollection オブジェクト内に格納された Foo オブジェクトを一覧表示します。

Foo オブジェクト自体には、ObservableCollection オブジェクトとして格納された独自の項目セットがあります。

ObservableCollection Foo アイテムのそれぞれをヘッダーにその名前で表示できるように XAML を定義しようとしました (最初の ItemsControl)。これから、各 Foo アイテム内のリスト自体が水平に (2 番目の ItemsControl を使用して) 表示され、そのすぐ下に関連するフィールドが表示されます。十分な項目が存在する場合は、必要に応じて次の行に折り返す必要があります。

現在の UI は次のとおりです。

不適切な UI

これは、UIが実際に表示される方法です。

正しい UI

私のマークアップ (ボタン コントロールは、UI の別の側面のためのものです) :

<Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="Auto"/>
        </Grid.ColumnDefinitions>
        <ScrollViewer VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Auto">
            <ItemsControl x:Name="ContentList" ItemTemplate="{StaticResource GameTemplate}" Grid.Column="0" />
        </ScrollViewer>
        <StackPanel Grid.Column="1" Background="DarkGray">
            <Button Click="OnLoad">_Load</Button>
            <Button Click="OnSave">_Save</Button>
            <Button Click="OnAdd">_Add</Button>
            <Button Click="OnDelete">_Delete</Button>
        </StackPanel>
    </Grid>

Foo アイテムを一覧表示するための DataTemplate:

<DataTemplate x:Key="GameTemplate">
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="30" />
                    <RowDefinition Height="*" />
                </Grid.RowDefinitions>
                <Label Content="{Binding Name}" Grid.Row="0" Background="Gray" FontSize="16" />
                <ItemsControl x:Name="imageContent" 
                              ItemsSource="{Binding FileList}" 
                              ItemTemplate="{StaticResource GameImagesTemplate}" 
                              Grid.Row="1" />
            </Grid>
        </DataTemplate>

各 Foo アイテム内のアイテムをリストするための DataTemplate:

<DataTemplate x:Key="GameImagesTemplate">
            <WrapPanel Orientation="Horizontal">
                <StackPanel Orientation="Vertical" >
                    <Image Source="{Binding FileInfo.FullName}" 
                       Margin="8,8,8,8" 
                       Height="70" 
                       Width="70" />
                    <Label Content="{Binding Name}" />
                </StackPanel>
            </WrapPanel>
        </DataTemplate>

私はWPFにかなり慣れていないので、コントロールの使用方法に起因する問題だと感じています。

希望する UI を生成するには、WPF にどのような変更を加える必要がありますか?

4

1 に答える 1

18

WrapPanel各画像アイテムを新しいinに追加しているためだと思います。にtoGameImagesTemplateを設定する必要があるだけですItemsControl ItemsPanelTemplateWrapPanelGameTemplate

例：

Xaml:

<Window x:Class="WpfApplication1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="252.351" Width="403.213" Name="UI" >
    <Window.Resources>

        <DataTemplate x:Key="GameImagesTemplate" >
            <StackPanel>
                <Image Source="{Binding FileInfo.FullName}" Margin="8,8,8,8" Height="70" Width="70" />
                <Label Content="{Binding Name}" />
            </StackPanel>
        </DataTemplate>

        <DataTemplate x:Key="GameTemplate">
            <StackPanel>
                <Label Content="{Binding Name}" Grid.Row="0" Background="Gray" FontSize="16" />
                <ItemsControl x:Name="imageContent" ItemsSource="{Binding FileList}" ItemTemplate="{StaticResource GameImagesTemplate}" >
                    <ItemsControl.ItemsPanel>
                        <ItemsPanelTemplate>
                            <WrapPanel Orientation="Horizontal" ScrollViewer.HorizontalScrollBarVisibility="Disabled" />
                        </ItemsPanelTemplate>
                    </ItemsControl.ItemsPanel>
                </ItemsControl>
            </StackPanel>
        </DataTemplate>
    </Window.Resources>

    <Grid>
        <ScrollViewer VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Disabled">
            <ItemsControl ItemsSource="{Binding ElementName=UI, Path=FileList}" Grid.Column="0" ItemTemplate="{StaticResource GameTemplate}" />
        </ScrollViewer>
    </Grid>
</Window>

コード：

public partial class MainWindow : Window
{
    private ObservableCollection<Foo> _fileList = new ObservableCollection<Foo>();

    public MainWindow()
    {
        InitializeComponent();
        foreach (var item in Directory.GetDirectories(@"C:\StackOverflow"))
        {
            FileList.Add(new Foo
            {
                Name = item,
                FileList = new ObservableCollection<Bar>(Directory.GetFiles(item).Select(x => new Bar { FileInfo = new FileInfo(x) }))
            });
        }
    } 

    public ObservableCollection<Foo> FileList
    {
        get { return _fileList; }
        set { _fileList = value; }
    }
}

public class Foo
{
    public string Name { get; set; }
    public ObservableCollection<Bar> FileList { get; set; }
}

public class Bar
{
    public FileInfo FileInfo { get; set; }
}

結果

ここに画像の説明を入力

于 2013-02-11T00:14:41.830 に答える