Files
Ursa.Avalonia/demo/Ursa.Demo/Pages/ElasticWrapPanelDemo.axaml
2023-09-18 21:05:23 +08:00

459 lines
34 KiB
XML

<UserControl x:Class="Ursa.Demo.Pages.ElasticWrapPanelDemo"
xmlns="https://github.com/avaloniaui"
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"
xmlns:u="https://irihi.tech/ursa"
xmlns:viewModels="clr-namespace:Ursa.Demo.ViewModels"
d:DesignHeight="450"
d:DesignWidth="800"
x:CompileBindings="True"
x:DataType="viewModels:ElasticWrapPanelDemoViewModel"
mc:Ignorable="d">
<DockPanel>
<StackPanel x:Name="ControlBar" DockPanel.Dock="Top">
<StackPanel Orientation="Horizontal">
<TextBlock Text="Orientation" />
<ComboBox ItemsSource="{Binding Orientations}" SelectedItem="{Binding SelectedOrientation}" />
<TextBlock Text="HorizontalScrollBar" />
<ComboBox ItemsSource="{Binding HScrollBarVisibilities}" SelectedItem="{Binding HorizontalVisibility}" />
<TextBlock Text="VerticalScrollBar" />
<ComboBox ItemsSource="{Binding VScrollBarVisibilities}" SelectedItem="{Binding VerticalVisibility}" />
</StackPanel>
<StackPanel Orientation="Horizontal">
<CheckBox Content="IsFillHorizontal" IsChecked="{Binding IsFillHorizontal}" />
<TextBlock Text="ItemWidth" />
<NumericUpDown Increment="1"
Maximum="1000"
Minimum="0"
Value="{Binding ItemWidth}" />
</StackPanel>
<StackPanel Orientation="Horizontal">
<CheckBox Content="IsFillVertical" IsChecked="{Binding IsFillVertical}" />
<TextBlock Text="ItemHeight" />
<NumericUpDown Increment="1"
Maximum="1000"
Minimum="0"
Value="{Binding ItemHeight}" />
</StackPanel>
<StackPanel.Styles>
<Style Selector="StackPanel#ControlBar &gt; StackPanel &gt; TextBlock">
<Setter Property="VerticalAlignment" Value="Center" />
<Setter Property="Margin" Value="10 0" />
</Style>
<Style Selector="StackPanel#ControlBar &gt; StackPanel &gt; TextBox, NumericUpDown">
<Setter Property="Width" Value="100" />
</Style>
<Style Selector="StackPanel#ControlBar &gt; StackPanel &gt; ComboBox">
<Setter Property="Width" Value="130" />
</Style>
</StackPanel.Styles>
</StackPanel>
<TabControl>
<TabItem Header="Flat">
<TabControl>
<TabItem Header="Common">
<u:ElasticWrapPanel IsFillHorizontal="{Binding IsFillHorizontal}"
IsFillVertical="{Binding IsFillVertical}"
ItemHeight="{Binding ItemHeight}"
ItemWidth="{Binding ItemWidth}"
Orientation="{Binding SelectedOrientation}">
<Border Background="{DynamicResource SemiRed5Color}" />
<Border Background="{DynamicResource SemiPink5Color}" />
<Border Background="{DynamicResource SemiPurple5Color}" />
<Border Background="{DynamicResource SemiViolet5Color}" />
<Border Background="{DynamicResource SemiIndigo5Color}" />
<Border Background="{DynamicResource SemiBlue5Color}" />
<Border Background="{DynamicResource SemiLightBlue5Color}" />
<Border Background="{DynamicResource SemiCyan5Color}" />
<Border Background="{DynamicResource SemiTeal5Color}" />
<Border Background="{DynamicResource SemiGreen5Color}" />
<Border Background="{DynamicResource SemiLightGreen5Color}" />
<Border Background="{DynamicResource SemiLime5Color}" />
<Border Background="{DynamicResource SemiYellow5Color}" />
<Border Background="{DynamicResource SemiAmber5Color}" />
<Border Background="{DynamicResource SemiOrange5Color}" />
<Border Background="{DynamicResource SemiGrey5Color}" />
</u:ElasticWrapPanel>
</TabItem>
<TabItem Header="Grid Auto">
<Grid RowDefinitions="auto,*">
<u:ElasticWrapPanel Grid.Row="0"
IsFillHorizontal="{Binding IsFillHorizontal}"
IsFillVertical="{Binding IsFillVertical}"
ItemHeight="{Binding ItemHeight}"
ItemWidth="{Binding ItemWidth}"
Orientation="{Binding SelectedOrientation}">
<Border Background="{DynamicResource SemiRed5Color}" />
<Border Background="{DynamicResource SemiPink5Color}" />
<Border Background="{DynamicResource SemiPurple5Color}" />
<Border Background="{DynamicResource SemiViolet5Color}" />
<Border Background="{DynamicResource SemiIndigo5Color}" />
<Border Background="{DynamicResource SemiBlue5Color}" />
<Border Background="{DynamicResource SemiLightBlue5Color}" />
<Border Background="{DynamicResource SemiCyan5Color}" />
<Border Background="{DynamicResource SemiTeal5Color}" />
<Border Background="{DynamicResource SemiGreen5Color}" />
<Border Background="{DynamicResource SemiLightGreen5Color}" />
<Border Background="{DynamicResource SemiLime5Color}" />
<Border Background="{DynamicResource SemiYellow5Color}" />
<Border Background="{DynamicResource SemiAmber5Color}" />
<Border Background="{DynamicResource SemiOrange5Color}" />
<Border Background="{DynamicResource SemiGrey5Color}" />
</u:ElasticWrapPanel>
<Border Grid.Row="1"
Margin="0,4"
BorderBrush="{DynamicResource SemiGrey9Color}"
BorderThickness="1">
<TextBlock Text="This is blank" />
</Border>
</Grid>
</TabItem>
<TabItem Header="ScrollViewer">
<Border Margin="0,4"
BorderBrush="{DynamicResource SemiGrey9Color}"
BorderThickness="1">
<ScrollViewer HorizontalScrollBarVisibility="{Binding HorizontalVisibility}" VerticalScrollBarVisibility="{Binding VerticalVisibility}">
<u:ElasticWrapPanel IsFillHorizontal="{Binding IsFillHorizontal}"
IsFillVertical="{Binding IsFillVertical}"
ItemHeight="{Binding ItemHeight}"
ItemWidth="{Binding ItemWidth}"
Orientation="{Binding SelectedOrientation}">
<Border Background="{DynamicResource SemiRed5Color}" />
<Border Background="{DynamicResource SemiPink5Color}" />
<Border Background="{DynamicResource SemiPurple5Color}" />
<Border Background="{DynamicResource SemiViolet5Color}" />
<Border Background="{DynamicResource SemiIndigo5Color}" />
<Border Background="{DynamicResource SemiBlue5Color}" />
<Border Background="{DynamicResource SemiLightBlue5Color}" />
<Border Background="{DynamicResource SemiCyan5Color}" />
<Border Background="{DynamicResource SemiTeal5Color}" />
<Border Background="{DynamicResource SemiGreen5Color}" />
<Border Background="{DynamicResource SemiLightGreen5Color}" />
<Border Background="{DynamicResource SemiLime5Color}" />
<Border Background="{DynamicResource SemiYellow5Color}" />
<Border Background="{DynamicResource SemiAmber5Color}" />
<Border Background="{DynamicResource SemiOrange5Color}" />
<Border Background="{DynamicResource SemiGrey5Color}" />
</u:ElasticWrapPanel>
</ScrollViewer>
</Border>
</TabItem>
</TabControl>
</TabItem>
<TabItem Header="FixToRB">
<DockPanel>
<StackPanel x:Name="ControlBar2" DockPanel.Dock="Top">
<StackPanel Orientation="Horizontal">
<TextBlock Text="Control Width" />
<TextBox Text="{Binding ItemSelfWidth}" />
<TextBlock Text="Control Height" />
<TextBox Text="{Binding ItemSelfHeight}" />
</StackPanel>
<StackPanel Orientation="Horizontal">
<TextBlock Text="Horizontal Alignment" />
<ComboBox ItemsSource="{Binding CmbHAligns}" SelectedItem="{Binding CmbHAlign}" />
<TextBlock Text="Vertical Alignment" />
<ComboBox ItemsSource="{Binding CmbVAligns}" SelectedItem="{Binding CmbVAlign}" />
</StackPanel>
<StackPanel.Styles>
<Style Selector="StackPanel#ControlBar2 &gt; StackPanel &gt; TextBlock">
<Setter Property="VerticalAlignment" Value="Center" />
<Setter Property="Margin" Value="10 0" />
</Style>
<Style Selector="StackPanel#ControlBar2 &gt; StackPanel &gt; TextBox, NumericUpDown">
<Setter Property="Width" Value="100" />
</Style>
<Style Selector="StackPanel#ControlBar2 &gt; StackPanel &gt; ComboBox">
<Setter Property="Width" Value="130" />
</Style>
</StackPanel.Styles>
</StackPanel>
<TabControl>
<TabItem Header="Single">
<StackPanel>
<ScrollViewer HorizontalScrollBarVisibility="{Binding HorizontalVisibility}" VerticalScrollBarVisibility="{Binding VerticalVisibility}">
<DockPanel>
<Label Background="{DynamicResource SemiPurple2Color}"
Content="WrapPanel"
DockPanel.Dock="Top" />
<WrapPanel ItemHeight="{Binding ItemHeight}"
ItemWidth="{Binding ItemWidth}"
Orientation="{Binding SelectedOrientation}">
<DockPanel Width="{Binding ItemSelfWidth}" Height="{Binding ItemSelfHeight}">
<TextBlock VerticalAlignment="Center" Text="Content 1" />
<TextBox MinHeight="20" />
</DockPanel>
<DockPanel Width="{Binding ItemSelfWidth}" Height="{Binding ItemSelfHeight}">
<TextBlock VerticalAlignment="Center" Text="Content 2" />
<TextBox MinHeight="20" />
</DockPanel>
<DockPanel Width="{Binding ItemSelfWidth}" Height="{Binding ItemSelfHeight}">
<TextBlock VerticalAlignment="Center" Text="Content 3" />
<TextBox MinHeight="20" />
</DockPanel>
<DockPanel Width="{Binding ItemSelfWidth}" Height="{Binding ItemSelfHeight}">
<TextBlock VerticalAlignment="Center" Text="Content 4" />
<TextBox MinHeight="20" />
</DockPanel>
<DockPanel Width="{Binding ItemSelfWidth}" Height="{Binding ItemSelfHeight}">
<TextBlock VerticalAlignment="Center" Text="Content 5" />
<TextBox MinHeight="20" />
</DockPanel>
<DockPanel Width="{Binding ItemSelfWidth}" Height="{Binding ItemSelfHeight}">
<TextBlock VerticalAlignment="Center" Text="Content 6" />
<TextBox MinHeight="20" />
</DockPanel>
<UniformGrid MinWidth="200"
Margin="5,0"
HorizontalAlignment="{Binding CmbHAlign}"
VerticalAlignment="{Binding CmbVAlign}"
u:ElasticWrapPanel.FixToRB="True"
Rows="1">
<Button MinHeight="20"
Margin="1"
Content="Search" />
<Button MinHeight="20"
Margin="1"
Content="Export" />
</UniformGrid>
</WrapPanel>
</DockPanel>
</ScrollViewer>
<ScrollViewer HorizontalScrollBarVisibility="{Binding HorizontalVisibility}" VerticalScrollBarVisibility="{Binding VerticalVisibility}">
<DockPanel>
<Label Background="{DynamicResource SemiGreen2Color}"
Content="ElasticWrapPanel"
DockPanel.Dock="Top" />
<u:ElasticWrapPanel IsFillHorizontal="{Binding IsFillHorizontal}"
IsFillVertical="{Binding IsFillVertical}"
ItemHeight="{Binding ItemHeight}"
ItemWidth="{Binding ItemWidth}"
Orientation="{Binding SelectedOrientation}">
<DockPanel Width="{Binding ItemSelfWidth}" Height="{Binding ItemSelfHeight}">
<TextBlock VerticalAlignment="Center" Text="Content 1" />
<TextBox MinHeight="20" />
</DockPanel>
<DockPanel Width="{Binding ItemSelfWidth}" Height="{Binding ItemSelfHeight}">
<TextBlock VerticalAlignment="Center" Text="Content 2" />
<TextBox MinHeight="20" />
</DockPanel>
<DockPanel Width="{Binding ItemSelfWidth}" Height="{Binding ItemSelfHeight}">
<TextBlock VerticalAlignment="Center" Text="Content 3" />
<TextBox MinHeight="20" />
</DockPanel>
<DockPanel Width="{Binding ItemSelfWidth}" Height="{Binding ItemSelfHeight}">
<TextBlock VerticalAlignment="Center" Text="Content 4" />
<TextBox MinHeight="20" />
</DockPanel>
<DockPanel Width="{Binding ItemSelfWidth}" Height="{Binding ItemSelfHeight}">
<TextBlock VerticalAlignment="Center" Text="Content 5" />
<TextBox MinHeight="20" />
</DockPanel>
<DockPanel Width="{Binding ItemSelfWidth}" Height="{Binding ItemSelfHeight}">
<TextBlock VerticalAlignment="Center" Text="Content 6" />
<TextBox MinHeight="20" />
</DockPanel>
<UniformGrid MinWidth="200"
Margin="5,0"
HorizontalAlignment="{Binding CmbHAlign}"
VerticalAlignment="{Binding CmbVAlign}"
u:ElasticWrapPanel.FixToRB="True"
Rows="1">
<Button MinHeight="20"
Margin="1"
Content="Search" />
<Button MinHeight="20"
Margin="1"
Content="Export" />
</UniformGrid>
</u:ElasticWrapPanel>
</DockPanel>
</ScrollViewer>
</StackPanel>
</TabItem>
<TabItem Header="Multiply">
<StackPanel>
<ScrollViewer HorizontalScrollBarVisibility="{Binding HorizontalVisibility}" VerticalScrollBarVisibility="{Binding VerticalVisibility}">
<DockPanel>
<Label Background="{DynamicResource SemiPurple2Color}"
Content="WrapPanel"
DockPanel.Dock="Top" />
<WrapPanel ItemHeight="{Binding ItemHeight}"
ItemWidth="{Binding ItemWidth}"
Orientation="{Binding SelectedOrientation}">
<DockPanel Width="{Binding ItemSelfWidth}" Height="{Binding ItemSelfHeight}">
<TextBlock VerticalAlignment="Center" Text="Content 1" />
<TextBox MinHeight="20" />
</DockPanel>
<DockPanel Width="{Binding ItemSelfWidth}" Height="{Binding ItemSelfHeight}">
<TextBlock VerticalAlignment="Center" Text="Content 2" />
<TextBox MinHeight="20" />
</DockPanel>
<DockPanel Width="{Binding ItemSelfWidth}" Height="{Binding ItemSelfHeight}">
<TextBlock VerticalAlignment="Center" Text="Content 3" />
<TextBox MinHeight="20" />
</DockPanel>
<DockPanel Width="{Binding ItemSelfWidth}" Height="{Binding ItemSelfHeight}">
<TextBlock VerticalAlignment="Center" Text="Content 4" />
<TextBox MinHeight="20" />
</DockPanel>
<DockPanel Width="{Binding ItemSelfWidth}" Height="{Binding ItemSelfHeight}">
<TextBlock VerticalAlignment="Center" Text="Content 5" />
<TextBox MinHeight="20" />
</DockPanel>
<DockPanel Width="{Binding ItemSelfWidth}" Height="{Binding ItemSelfHeight}">
<TextBlock VerticalAlignment="Center" Text="Content 6" />
<TextBox MinHeight="20" />
</DockPanel>
<UniformGrid MinWidth="200"
Margin="5,0"
HorizontalAlignment="{Binding CmbHAlign}"
VerticalAlignment="{Binding CmbVAlign}"
u:ElasticWrapPanel.FixToRB="True"
Rows="1">
<Button MinHeight="20"
Margin="1"
Content="Search" />
<Button MinHeight="20"
Margin="1"
Content="Export" />
</UniformGrid>
<DockPanel Width="{Binding ItemSelfWidth}" Height="{Binding ItemSelfHeight}">
<TextBlock VerticalAlignment="Center" Text="Content 1" />
<TextBox MinHeight="20" />
</DockPanel>
<DockPanel Width="{Binding ItemSelfWidth}" Height="{Binding ItemSelfHeight}">
<TextBlock VerticalAlignment="Center" Text="Content 2" />
<TextBox MinHeight="20" />
</DockPanel>
<DockPanel Width="{Binding ItemSelfWidth}" Height="{Binding ItemSelfHeight}">
<TextBlock VerticalAlignment="Center" Text="Content 3" />
<TextBox MinHeight="20" />
</DockPanel>
<DockPanel Width="{Binding ItemSelfWidth}" Height="{Binding ItemSelfHeight}">
<TextBlock VerticalAlignment="Center" Text="Content 4" />
<TextBox MinHeight="20" />
</DockPanel>
<DockPanel Width="{Binding ItemSelfWidth}" Height="{Binding ItemSelfHeight}">
<TextBlock VerticalAlignment="Center" Text="Content 5" />
<TextBox MinHeight="20" />
</DockPanel>
<DockPanel Width="{Binding ItemSelfWidth}" Height="{Binding ItemSelfHeight}">
<TextBlock VerticalAlignment="Center" Text="Content 6" />
<TextBox MinHeight="20" />
</DockPanel>
<UniformGrid MinWidth="200"
Margin="5,0"
HorizontalAlignment="{Binding CmbHAlign}"
VerticalAlignment="{Binding CmbVAlign}"
u:ElasticWrapPanel.FixToRB="True"
Rows="1">
<Button MinHeight="20"
Margin="1"
Content="Search" />
<Button MinHeight="20"
Margin="1"
Content="Export" />
</UniformGrid>
</WrapPanel>
</DockPanel>
</ScrollViewer>
<ScrollViewer HorizontalScrollBarVisibility="{Binding HorizontalVisibility}" VerticalScrollBarVisibility="{Binding VerticalVisibility}">
<DockPanel>
<Label Background="{DynamicResource SemiGreen2Color}"
Content="ElasticWrapPanel"
DockPanel.Dock="Top" />
<u:ElasticWrapPanel IsFillHorizontal="{Binding IsFillHorizontal}"
IsFillVertical="{Binding IsFillVertical}"
ItemHeight="{Binding ItemHeight}"
ItemWidth="{Binding ItemWidth}"
Orientation="{Binding SelectedOrientation}">
<DockPanel Width="{Binding ItemSelfWidth}" Height="{Binding ItemSelfHeight}">
<TextBlock VerticalAlignment="Center" Text="Content 1" />
<TextBox MinHeight="20" />
</DockPanel>
<DockPanel Width="{Binding ItemSelfWidth}" Height="{Binding ItemSelfHeight}">
<TextBlock VerticalAlignment="Center" Text="Content 2" />
<TextBox MinHeight="20" />
</DockPanel>
<DockPanel Width="{Binding ItemSelfWidth}" Height="{Binding ItemSelfHeight}">
<TextBlock VerticalAlignment="Center" Text="Content 3" />
<TextBox MinHeight="20" />
</DockPanel>
<DockPanel Width="{Binding ItemSelfWidth}" Height="{Binding ItemSelfHeight}">
<TextBlock VerticalAlignment="Center" Text="Content 4" />
<TextBox MinHeight="20" />
</DockPanel>
<DockPanel Width="{Binding ItemSelfWidth}" Height="{Binding ItemSelfHeight}">
<TextBlock VerticalAlignment="Center" Text="Content 5" />
<TextBox MinHeight="20" />
</DockPanel>
<DockPanel Width="{Binding ItemSelfWidth}" Height="{Binding ItemSelfHeight}">
<TextBlock VerticalAlignment="Center" Text="Content 6" />
<TextBox MinHeight="20" />
</DockPanel>
<UniformGrid MinWidth="200"
Margin="5,0"
HorizontalAlignment="{Binding CmbHAlign}"
VerticalAlignment="{Binding CmbVAlign}"
u:ElasticWrapPanel.FixToRB="True"
Rows="1">
<Button MinHeight="20"
Margin="1"
Content="Search" />
<Button MinHeight="20"
Margin="1"
Content="Export" />
</UniformGrid>
<DockPanel Width="{Binding ItemSelfWidth}" Height="{Binding ItemSelfHeight}">
<TextBlock VerticalAlignment="Center" Text="Content 1" />
<TextBox MinHeight="20" />
</DockPanel>
<DockPanel Width="{Binding ItemSelfWidth}" Height="{Binding ItemSelfHeight}">
<TextBlock VerticalAlignment="Center" Text="Content 2" />
<TextBox MinHeight="20" />
</DockPanel>
<DockPanel Width="{Binding ItemSelfWidth}" Height="{Binding ItemSelfHeight}">
<TextBlock VerticalAlignment="Center" Text="Content 3" />
<TextBox MinHeight="20" />
</DockPanel>
<DockPanel Width="{Binding ItemSelfWidth}" Height="{Binding ItemSelfHeight}">
<TextBlock VerticalAlignment="Center" Text="Content 4" />
<TextBox MinHeight="20" />
</DockPanel>
<DockPanel Width="{Binding ItemSelfWidth}" Height="{Binding ItemSelfHeight}">
<TextBlock VerticalAlignment="Center" Text="Content 5" />
<TextBox MinHeight="20" />
</DockPanel>
<DockPanel Width="{Binding ItemSelfWidth}" Height="{Binding ItemSelfHeight}">
<TextBlock VerticalAlignment="Center" Text="Content 6" />
<TextBox MinHeight="20" />
</DockPanel>
<UniformGrid MinWidth="200"
Margin="5,0"
HorizontalAlignment="{Binding CmbHAlign}"
VerticalAlignment="{Binding CmbVAlign}"
u:ElasticWrapPanel.FixToRB="True"
Rows="1">
<Button MinHeight="20"
Margin="1"
Content="Search" />
<Button MinHeight="20"
Margin="1"
Content="Export" />
</UniformGrid>
</u:ElasticWrapPanel>
</DockPanel>
</ScrollViewer>
</StackPanel>
</TabItem>
</TabControl>
</DockPanel>
</TabItem>
</TabControl>
</DockPanel>
</UserControl>