wpf - 如何裁剪不适合 WrapPanel 的元素

Question

的例子WrapPanel。

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="*"/>
        <RowDefinition Height="Auto"/>
    </Grid.RowDefinitions>

    <ItemsControl Grid.Row="1" Style="{StaticResource DestinationItemsControlStyle}"
                  DataContext="{StaticResource ViewModelKey}"
                  ItemsSource="{Binding Stations}">
        <ItemsControl.ItemsPanel>
            <ItemsPanelTemplate>
                <WrapPanel Margin="5" Orientation="Vertical" />
            </ItemsPanelTemplate>
        </ItemsControl.ItemsPanel>
        <ItemsControl.ItemTemplate>
            <DataTemplate>
                <Button Style="{DynamicResource DestinationButtonStyle}">
                    <TextBlock Text="{Binding FullName}" Style="{StaticResource DestinationTextBlockStyle}"
                               TextTrimming="CharacterEllipsis" />
                </Button>
            </DataTemplate>
        </ItemsControl.ItemTemplate>
    </ItemsControl>

</Grid>

如果有很多元素，那么所有这些“过多”的元素都会以它们实际大小的一半呈现。有没有办法不渲染这些元素？

我是否被迫使用类似的东西VirtualizedWrapPanel？

我还想注意我不能使用滚动条。所有“过多”的元素都应呈现在下一页上，用户可以通过单击“下一步”按钮来访问该页面。

Answer 1

此 XAML：

<Window x:Class="MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="MainWindow" Height="1024" Width="1280">

<Grid >
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="*"/>
        <RowDefinition Height="Auto"/>
    </Grid.RowDefinitions>

    <ItemsControl Name="ItemsControl1" Grid.Row="1" 
              ItemsSource="{Binding Stations}">
        <ItemsControl.ItemsPanel>
            <ItemsPanelTemplate>
                <WrapPanel Margin="5" Orientation="Vertical" />
            </ItemsPanelTemplate>
        </ItemsControl.ItemsPanel>
        <ItemsControl.ItemTemplate>
            <DataTemplate>
                <Button Margin="20" MinHeight="50" MinWidth="400">
                    <TextBlock Text="{Binding FullName}" 
                           TextTrimming="CharacterEllipsis" />
                </Button>
            </DataTemplate>
        </ItemsControl.ItemTemplate>
    </ItemsControl>
</Grid>
</Window>

并在启动时在集合中添加 70 个项目Stations，产生以下结果：

你DestinationItemsControlStyle看起来像什么？

作为参考，这是在 Startup 上运行的代码隐藏：

public partial class MainWindow : Window
{
  public MainWindow()
  {
     InitializeComponent();
     ViewModelKey vmk = new ViewModelKey();
     ItemsControl1.DataContext = vmk;
  }
}

在ViewModelKey课堂上：

public class ViewModelKey : INotifyPropertyChanged
{

  public ObservableCollection<station> Stations { get; set; }

  public ViewModelKey()
  {
     Stations = new ObservableCollection<station>();
     for (int i = 1; i < 70; i++)
     {
        Stations.Add(new station("This is station " + i.ToString()));
     }
  }

  private void NotifyPropertyChanged(string info)
  {
     if (PropertyChanged != null)
     {
        PropertyChanged(this, new PropertyChangedEventArgs(info));
  }
}

public event PropertyChangedEventHandler PropertyChanged;
}