Question

我正在尝试在WPF中重新创建以下响应式网格（请参阅下面的“所需行为＆＃39;链接”）。但是，我正在努力寻找实现这一目标的最佳方法。

理想情况下，我想要一个水平的瓷砖列表，其大小会缩小以适应可用空间。作为一个起点，我有一个包装的列表框，但在重新调整大小时，我留下了空白区域。任何指针都会受到赞赏。

电流包覆面板：

Current Wrap Panel ：

我目前的代码：

<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;
        }
    }

重要提示：如果没有转换器，您无法使用它来决定您想要的项目与托管列表框相比有多大，您可以随时更改值我希望我把它作为一个例子

wpf响应ListBox / Grid

1 个答案: