.net - 桌面应用程序中的流体布局包装面板/VariableSizedWrapGrid？

Question

是否可以在桌面应用程序（即 Windows 7 WPF 应用程序）中使用VariableSizedWrapGrid控件？目前此控件似乎仅在 WinRT、Windows 8、Windows Phone 等中可用。如果可能，如何实现？否则，我必须有什么选择才能获得相同的功能？

对于那些不熟悉这个概念的人来说，它类似于 WrapPanel，但是元素会填充面板中的空白而不是溢出到下一行，就像这样（另请参阅Masonry for jQuery）：

Answer 1

我最终使用了 Lizzaran 的WPF-Masonry 库，这非常好。它没有任何用于正确绑定的依赖属性，但添加它们并不难。我还在使用 MahApps最新的 Metro 库（不同于通过 nuget 提供的库）来控制他们的磁贴，但这不是必需的。

这是它最终的样子：

这是代码的主要内容：

MainWindow.xaml：

<Window x:Class="TileExample.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:Masonry="clr-namespace:MasonryLibrary;assembly=MasonryLibrary"
        Title="Tiles"
        Loaded="Window_Loaded"
        Height="400"
        Width="600">
  <Grid>
    <Masonry:Masonry x:Name="ui_masonry"
                     VerticalAlignment="Top"
                     Animation="False">
    </Masonry:Masonry>
  </Grid>
</Window>

MainWindow.xaml.cs：

private void Window_Loaded(object sender, RoutedEventArgs e) {
  for (int i = 0; i < 15; i++) {
    var tile = new Tile();
    tile.Header = i.ToString();
    ui_masonry.Add(tile);
  }
}

Tile.xaml：

<UserControl x:Class="TileExample.Tile"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             xmlns:Controls="clr-namespace:MahApps.Metro.Controls;assembly=MahApps.Metro"
             mc:Ignorable="d"
             Width="140"
             Height="140"
             Name="ui_ctrl"
             d:DesignHeight="300"
             d:DesignWidth="300">
  <UserControl.Resources>
    <ResourceDictionary>
      <ResourceDictionary.MergedDictionaries>
        <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Colours.xaml" />
        <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Fonts.xaml" />
        <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Controls.xaml" />
        <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Controls.AnimatedSingleRowTabControl.xaml" />
        <ResourceDictionary Source="pack://application:,,,/MahApps.Metro.Resources;component/Icons.xaml" />
        <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Accents/Blue.xaml" />
        <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Accents/BaseLight.xaml" />
        <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/FlatSlider.xaml" />
        <ResourceDictionary Source="/Resources/Effects/Animations.xaml" />
      </ResourceDictionary.MergedDictionaries>
    </ResourceDictionary>
  </UserControl.Resources>
  <Controls:Tile Title="Not Used"
                 x:Name="ui_tile"
                 Click="Tile_Click">
    <ItemsControl x:Name="ui_tile_content">
    </ItemsControl>
  </Controls:Tile>
</UserControl>

Tile.xaml.cs：

  public partial class Tile : UserControl {

    public static readonly DependencyProperty HeaderProperty = DependencyProperty.Register("Header",
                                                                                       typeof(string),
                                                                                       typeof(Tile));
    public Tile() {
      InitializeComponent();
    }

    private void Tile_Click(object sender, RoutedEventArgs e) {
      //Your animation code here...
      //I utilized some animations from my own library for this that simply
      //expands the tile to twice its width and height
    }

    public string Header {
      get { return (string)GetValue(HeaderProperty); }
      set {
        SetValue(HeaderProperty, value);
        ui_tile.Title = value;
      }
    }
  }

我在我的图块中添加了一些动画，以便在用户点击它们时它们会展开。Masonry 库的性能非常好，偶尔会出现故障，但我对结果很满意。我最终添加了一些 UI 逻辑，只允许一次扩展一个图块。