WPF響應列表框/網格

Question

我正在嘗試在WPF中重新創建以下響應式網格（請參見下面的“所需行為”鏈接）。 但是，我正在努力尋找實現這一目標的最佳方法。

理想情況下，我想要一個水平列表，這些列表的大小會隨着可用空間的增加和縮小而縮小。 首先，我有一個包裝好的列表框，但是重新調整大小時我留有空白。 任何指針將不勝感激。

當前包裝面板：

：

期望的行為

我當前的代碼：

<Window x:Class="WrappingListbox.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    Title="Wrapping Listbox"
    Width="525"
    Height="350"
    mc:Ignorable="d">
<Grid>

    <ListBox x:Name="listbox1" ScrollViewer.VerticalScrollBarVisibility="Disabled">
        <ListBox.ItemsPanel>
            <ItemsPanelTemplate>
                <WrapPanel IsItemsHost="True" Orientation="Vertical" />
            </ItemsPanelTemplate>
        </ListBox.ItemsPanel>
        <ListBox.ItemTemplate>
            <DataTemplate>
                <StackPanel Margin="20" HorizontalAlignment="Center">
                    <Viewbox>
                        <Grid x:Name="backgroundGrid"
                              Width="60"
                              Height="60">
                            <Rectangle x:Name="Rect" Fill="green" />
                        </Grid>
                    </Viewbox>
                </StackPanel>
            </DataTemplate>
        </ListBox.ItemTemplate>
    </ListBox>


    <WrapPanel HorizontalAlignment="Left" VerticalAlignment="Top" />


</Grid>

Answer 1

這將為您解決尺寸問題（通過將項目的尺寸綁定到列表框的尺寸，但我認為您需要做更多的工作，但這只是開始）

// add this in your window definition 
xmlns:Local="clr-namespace:WpfApplication2"
//then here is your listbox 
<ListBox x:Name="listbox1" HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch"
                 ScrollViewer.VerticalScrollBarVisibility="Disabled">
            <ListBox.Resources>
                <Local:DimentionConverter x:Key="Converter" />
            </ListBox.Resources>
            <ListBox.ItemsPanel>
                <ItemsPanelTemplate>
                    <WrapPanel IsItemsHost="True" Orientation="Vertical" />
                </ItemsPanelTemplate>
            </ListBox.ItemsPanel>
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <StackPanel Margin="20" HorizontalAlignment="Center" VerticalAlignment="Center" >
                        <Viewbox>
                            <Grid x:Name="backgroundGrid"
                             Height="{Binding RelativeSource={RelativeSource AncestorType=ListBox},Path=ActualWidth,Converter={StaticResource ResourceKey=Converter},ConverterParameter=5}"
                             Width="{Binding RelativeSource={RelativeSource AncestorType=ListBox},Path=ActualWidth,Converter={StaticResource ResourceKey=Converter},ConverterParameter=5}" >
                                <Rectangle x:Name="Rect" Fill="green" />
                            </Grid>
                        </Viewbox>
                    </StackPanel>
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>

public class DimentionConverter : IValueConverter
    {
        public object Convert(object value, Type targetType,
              object parameter, CultureInfo culture)
        {
            return (double)value / double.Parse(parameter as string);
        }

        public object ConvertBack(object value, Type targetType,
            object parameter, CultureInfo culture)
        {
            return null;
        }
    }

重要告示：如果沒有轉換器，就無法做到這一點，您必須使用它來決定您想要的物品與課程托管列表框相比要多大，您可以更改值，如我希望的那樣5