Yet another controls library for Universal Windows Apps.
PM> Install-Package Marduk.Controls
A stand alone photo wall layout control with virtualizing capability.
A stand alone waterfall flow layout controls with virtualizing capability. ![waterfall] (https://cloud.githubusercontent.com/assets/9367842/17103352/8064d730-52b0-11e6-865d-bdd07396ed0c.gif)
Both of PhotowallView and WaterfallFlowView support UI virtualizing which enables the system to render only the visible items inside the viewport.
Just make your ItemSource inherits form Windows.UI.Xaml.Data.ISupportIncrementalLoading then the control would do the rest.
Hooking up to the ItemTapped event with PhotowallView or WaterfallFlowView to get notified when an item was tapped.
Easily styling the appearence of PhotowallView and WaterfallFlowView with the preset visual states such as "IsSelected" and "NotSelected" etc.
Freely random insert, remove or change an item, even it's been virtualized.
You can use Marduk.Controls.OrientedVirtualizingPanel.Resizer to optimize resize behavior
<ScrollViewer>
<controls:WaterfallFlowView xmlns:controls="using:Marduk.Controls" x:Name="Panel"
StackCount="3" DelayMeasure="True">
</controls:WaterfallFlowView>
</ScrollViewer><ScrollViewer>
<controls:WaterfallFlowView xmlns:controls="using:Marduk.Controls" x:Name="Panel"
ItemSource="{Binding VM.Items}" StackCount="3" DelayMeasure="True">
</controls:WaterfallFlowView>
</ScrollViewer><ScrollViewer>
<controls:WaterfallFlowView xmlns:controls="using:Marduk.Controls" x:Name="Panel"
ItemSource="{Binding}" StackCount="3" DelayMeasure="True">
<controls:WaterfallFlowView.ItemContainerStyle>
<Style TargetType="ContentControl">
<Setter Property="HorizontalAlignment" Value="Stretch"></Setter>
<Setter Property="HorizontalContentAlignment" Value="Stretch"></Setter>
</Style>
</controls:WaterfallFlowView.ItemContainerStyle>
<controls:WaterfallFlowView.ItemTemplate>
<DataTemplate>
<Border Height="{Binding Length}" Background="{Binding Brush}" HorizontalAlignment="Stretch">
<TextBlock FontSize="50" Text="{Binding Num}" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
</DataTemplate>
</controls:WaterfallFlowView.ItemTemplate>
</controls:WaterfallFlowView>
</ScrollViewer>public class MyItemResizer : IItemResizer
{
public Size Resize(object item, Size oldSize, Size availableSize)
{
return new Size(availableSize.Width, oldSize.Height);
}
}<ScrollViewer>
<controls:WaterfallFlowView xmlns:controls="using:Marduk.Controls" x:Name="Panel" ItemSource="{Binding}" StackCount="3" DelayMeasure="True">
<controls:WaterfallFlowView.Resizer>
<local:MyItemResizer/>
</controls:WaterfallFlowView.Resizer>
<controls:WaterfallFlowView.ItemContainerStyle>
<Style TargetType="ContentControl">
<Setter Property="HorizontalAlignment" Value="Stretch"></Setter>
<Setter Property="HorizontalContentAlignment" Value="Stretch"></Setter>
</Style>
</controls:WaterfallFlowView.ItemContainerStyle>
<controls:WaterfallFlowView.ItemTemplate>
<DataTemplate>
<Border Height="{Binding Length}" Background="{Binding Brush}" HorizontalAlignment="Stretch">
<TextBlock FontSize="50" Text="{Binding Num}" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
</DataTemplate>
</controls:WaterfallFlowView.ItemTemplate>
</controls:WaterfallFlowView>
</ScrollViewer>
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent
