wpf响应式列表框/网格答案

【问题标题】：wpf responsive ListBox / Gridwpf响应式列表框/网格
【发布时间】：2016-02-05 05:06:56
【问题描述】：

我正在尝试在 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>

【问题讨论】：

您已经硬编码了网格的宽度和高度，它们不会扩大或缩小以填充空间。

标签： c# wpf listbox

【解决方案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为例

【讨论】：