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

Question

是否可以在桌面应用程序(即Windows 7 WPF应用程序)中使用VariableSizedWrapGrid控件？目前这种控制似乎只在WinRT,Windows 8,Windows Phone等中可用.如果有可能,怎么样？否则,我有什么选择才能获得相同的功能？

对于那些不熟悉这个概念的人来说,它类似于WrapPanel,但是元素会填充面板中的空白区域,而不是溢出到下一行,就像这样(参见jQuery的Masonry):

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

我在我的图块中添加了一些动画,以便在用户点击它们时展开.砌体库的表现相当不错,偶尔出现故障,但我对它的结果非常满意.我最终添加了一些UI逻辑,只允许一个tile在时间上扩展.