Files
Ursa.Avalonia/demo/Ursa.Demo/Pages/ElasticWrapPanelDemo.axaml
2023-09-18 19:13:49 +08:00

465 lines
36 KiB
XML

<UserControl 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"
x:CompileBindings="True"
x:DataType="viewModels:ElasticWrapPanelDemoViewModel"
mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
x:Class="Ursa.Demo.Pages.ElasticWrapPanelDemo">
<DockPanel>
<StackPanel DockPanel.Dock="Top" x:Name="ControlBar">
<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 IsChecked="{Binding IsFillHorizontal}"
Content="IsFillHorizontal" />
<TextBlock Text="ItemWidth" />
<NumericUpDown Value="{Binding ItemWidth}"
Increment="1" Minimum="0" Maximum="1000" />
</StackPanel>
<StackPanel Orientation="Horizontal">
<CheckBox IsChecked="{Binding IsFillVertical}"
Content="IsFillVertical" />
<TextBlock Text="ItemHeight" />
<NumericUpDown Value="{Binding ItemHeight}"
Increment="1" Minimum="0" Maximum="1000" />
</StackPanel>
<StackPanel.Styles>
<Style Selector="StackPanel#ControlBar > StackPanel > TextBlock">
<Setter Property="VerticalAlignment" Value="Center" />
<Setter Property="Margin" Value="10 0" />
</Style>
<Style Selector="StackPanel#ControlBar > StackPanel > TextBox, NumericUpDown">
<Setter Property="Width" Value="100" />
</Style>
<Style Selector="StackPanel#ControlBar > StackPanel > 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}"
ItemWidth="{Binding ItemWidth}"
ItemHeight="{Binding ItemHeight}"
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}"
ItemWidth="{Binding ItemWidth}"
ItemHeight="{Binding ItemHeight}"
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"
BorderThickness="1"
BorderBrush="{DynamicResource SemiGrey9Color}"
Margin="0,4">
<TextBlock Text="This is blank" />
</Border>
</Grid>
</TabItem>
<TabItem Header="ScrollViewer">
<Border BorderThickness="1"
BorderBrush="{DynamicResource SemiGrey9Color}"
Margin="0,4">
<ScrollViewer
HorizontalScrollBarVisibility="{Binding HorizontalVisibility}"
VerticalScrollBarVisibility="{Binding VerticalVisibility}">
<u:ElasticWrapPanel
IsFillHorizontal="{Binding IsFillHorizontal}"
IsFillVertical="{Binding IsFillVertical}"
ItemWidth="{Binding ItemWidth}"
ItemHeight="{Binding ItemHeight}"
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 DockPanel.Dock="Top" Orientation="Horizontal">
<TextBlock Text="输入控件宽度" VerticalAlignment="Center" />
<Grid>
<Rectangle x:Name="Rect2" />
<TextBox MinWidth="60" Height="22" VerticalContentAlignment="Center"
Text="{Binding ElementName=Rect2,Path=Width,Mode=TwoWay}" />
</Grid>
<TextBlock Text="输入控件高度" VerticalAlignment="Center" />
<Grid>
<TextBox MinWidth="60" Height="22" VerticalContentAlignment="Center"
Text="{Binding ElementName=Rect2,Path=Height,Mode=TwoWay}" />
</Grid>
<ComboBox x:Name="cmbVerAlig" SelectedIndex="3" Width="70">
<VerticalAlignment>Top</VerticalAlignment>
<VerticalAlignment>Center</VerticalAlignment>
<VerticalAlignment>Bottom</VerticalAlignment>
<VerticalAlignment>Stretch</VerticalAlignment>
</ComboBox>
<ComboBox x:Name="cmbHorAlig" SelectedIndex="3" Width="70">
<HorizontalAlignment>Left</HorizontalAlignment>
<HorizontalAlignment>Center</HorizontalAlignment>
<HorizontalAlignment>Right</HorizontalAlignment>
<HorizontalAlignment>Stretch</HorizontalAlignment>
</ComboBox>
</StackPanel>
<TabControl>
<TabItem Header="一个">
<StackPanel x:Name="UnifornGrid1">
<ScrollViewer
HorizontalScrollBarVisibility="{Binding HorizontalVisibility}"
VerticalScrollBarVisibility="{Binding VerticalVisibility}">
<DockPanel>
<Label Content="WrapPanel" Background="#FFCBCBEA" DockPanel.Dock="Top" />
<WrapPanel ItemWidth="{Binding ItemWidth}"
ItemHeight="{Binding ItemHeight}"
Orientation="{Binding SelectedOrientation}">
<DockPanel Margin="0,2" Width="{Binding ElementName=Rect2,Path=Width}"
Height="{Binding ElementName=Rect2,Path=Height}">
<TextBlock Text="内容1" VerticalAlignment="Center" />
<TextBox MinHeight="23" />
</DockPanel>
<DockPanel Margin="0,2" Width="{Binding ElementName=Rect2,Path=Width}"
Height="{Binding ElementName=Rect2,Path=Height}">
<TextBlock Text="内容2" VerticalAlignment="Center" />
<TextBox MinHeight="23" />
</DockPanel>
<DockPanel Margin="0,2" Width="{Binding ElementName=Rect2,Path=Width}"
Height="{Binding ElementName=Rect2,Path=Height}">
<TextBlock Text="内容3" VerticalAlignment="Center" />
<TextBox MinHeight="23" />
</DockPanel>
<DockPanel Margin="0,2" Width="{Binding ElementName=Rect2,Path=Width}"
Height="{Binding ElementName=Rect2,Path=Height}">
<TextBlock Text="内容4" VerticalAlignment="Center" />
<TextBox MinHeight="23" />
</DockPanel>
<DockPanel Margin="0,2" Width="{Binding ElementName=Rect2,Path=Width}"
Height="{Binding ElementName=Rect2,Path=Height}">
<TextBlock Text="内容5" VerticalAlignment="Center" />
<TextBox MinHeight="23" />
</DockPanel>
<DockPanel Margin="0,2" Width="{Binding ElementName=Rect2,Path=Width}"
Height="{Binding ElementName=Rect2,Path=Height}">
<TextBlock Text="内容6" VerticalAlignment="Center" />
<TextBox MinHeight="23" />
</DockPanel>
<UniformGrid Rows="1" Margin="5,0" MinWidth="200"
u:ElasticWrapPanel.FixToRB="True"
HorizontalAlignment="{Binding ElementName=cmbHorAlig,Path=SelectedValue}"
VerticalAlignment="{Binding ElementName=cmbVerAlig,Path=SelectedValue}">
<Button Content="查询" MinHeight="22" Margin="1" />
<Button Content="导出" MinHeight="22" Margin="1" />
</UniformGrid>
</WrapPanel>
</DockPanel>
</ScrollViewer>
<ScrollViewer
HorizontalScrollBarVisibility="{Binding HorizontalVisibility}"
VerticalScrollBarVisibility="{Binding VerticalVisibility}">
<DockPanel>
<Label Content="ElasticWrapPanel" Background="#FFB4F1AA"
DockPanel.Dock="Top" />
<u:ElasticWrapPanel
IsFillHorizontal="{Binding IsFillHorizontal}"
IsFillVertical="{Binding IsFillVertical}"
ItemWidth="{Binding ItemWidth}"
ItemHeight="{Binding ItemHeight}"
Orientation="{Binding SelectedOrientation}">
<DockPanel Margin="0,2" Width="{Binding ElementName=Rect2,Path=Width}"
Height="{Binding ElementName=Rect2,Path=Height}">
<TextBlock Text="内容1" VerticalAlignment="Center" />
<TextBox MinHeight="23" />
</DockPanel>
<DockPanel Margin="0,2" Width="{Binding ElementName=Rect2,Path=Width}"
Height="{Binding ElementName=Rect2,Path=Height}">
<TextBlock Text="内容2" VerticalAlignment="Center" />
<TextBox MinHeight="23" />
</DockPanel>
<DockPanel Margin="0,2" Width="{Binding ElementName=Rect2,Path=Width}"
Height="{Binding ElementName=Rect2,Path=Height}">
<TextBlock Text="内容3" VerticalAlignment="Center" />
<TextBox MinHeight="23" />
</DockPanel>
<DockPanel Margin="0,2" Width="{Binding ElementName=Rect2,Path=Width}"
Height="{Binding ElementName=Rect2,Path=Height}">
<TextBlock Text="内容4" VerticalAlignment="Center" />
<TextBox MinHeight="23" />
</DockPanel>
<DockPanel Margin="0,2" Width="{Binding ElementName=Rect2,Path=Width}"
Height="{Binding ElementName=Rect2,Path=Height}">
<TextBlock Text="内容5" VerticalAlignment="Center" />
<TextBox MinHeight="23" />
</DockPanel>
<DockPanel Margin="0,2" Width="{Binding ElementName=Rect2,Path=Width}"
Height="{Binding ElementName=Rect2,Path=Height}">
<TextBlock Text="内容6" VerticalAlignment="Center" />
<TextBox MinHeight="23" />
</DockPanel>
<UniformGrid Rows="1" Margin="5,0" MinWidth="200"
u:ElasticWrapPanel.FixToRB="True"
HorizontalAlignment="{Binding ElementName=cmbHorAlig,Path=SelectedValue}"
VerticalAlignment="{Binding ElementName=cmbVerAlig,Path=SelectedValue}">
<Button Content="查询" MinHeight="22" Margin="1" />
<Button Content="导出" MinHeight="22" Margin="1" />
</UniformGrid>
</u:ElasticWrapPanel>
</DockPanel>
</ScrollViewer>
</StackPanel>
</TabItem>
<TabItem Header="多个">
<StackPanel x:Name="UnifornGrid2">
<ScrollViewer
HorizontalScrollBarVisibility="{Binding HorizontalVisibility}"
VerticalScrollBarVisibility="{Binding VerticalVisibility}">
<DockPanel>
<Label Content="WrapPanel" Background="#FFCBCBEA" DockPanel.Dock="Top" />
<WrapPanel ItemWidth="{Binding ItemWidth}"
ItemHeight="{Binding ItemHeight}"
Orientation="{Binding SelectedOrientation}">
<DockPanel Margin="0,2" Width="{Binding ElementName=Rect2,Path=Width}"
Height="{Binding ElementName=Rect2,Path=Height}">
<TextBlock Text="内容1" VerticalAlignment="Center" />
<TextBox MinHeight="23" />
</DockPanel>
<DockPanel Margin="0,2" Width="{Binding ElementName=Rect2,Path=Width}"
Height="{Binding ElementName=Rect2,Path=Height}">
<TextBlock Text="内容2" VerticalAlignment="Center" />
<TextBox MinHeight="23" />
</DockPanel>
<DockPanel Margin="0,2" Width="{Binding ElementName=Rect2,Path=Width}"
Height="{Binding ElementName=Rect2,Path=Height}">
<TextBlock Text="内容3" VerticalAlignment="Center" />
<TextBox MinHeight="23" />
</DockPanel>
<DockPanel Margin="0,2" Width="{Binding ElementName=Rect2,Path=Width}"
Height="{Binding ElementName=Rect2,Path=Height}">
<TextBlock Text="内容4" VerticalAlignment="Center" />
<TextBox MinHeight="23" />
</DockPanel>
<DockPanel Margin="0,2" Width="{Binding ElementName=Rect2,Path=Width}"
Height="{Binding ElementName=Rect2,Path=Height}">
<TextBlock Text="内容5" VerticalAlignment="Center" />
<TextBox MinHeight="23" />
</DockPanel>
<DockPanel Margin="0,2" Width="{Binding ElementName=Rect2,Path=Width}"
Height="{Binding ElementName=Rect2,Path=Height}">
<TextBlock Text="内容6" VerticalAlignment="Center" />
<TextBox MinHeight="23" />
</DockPanel>
<UniformGrid Rows="1" Margin="5,0" MinWidth="200"
u:ElasticWrapPanel.FixToRB="True"
HorizontalAlignment="{Binding ElementName=cmbHorAlig,Path=SelectedValue}"
VerticalAlignment="{Binding ElementName=cmbVerAlig,Path=SelectedValue}">
<Button Content="查询" MinHeight="22" Margin="1" />
<Button Content="导出" MinHeight="22" Margin="1" />
</UniformGrid>
<DockPanel Margin="0,2" Width="{Binding ElementName=Rect2,Path=Width}"
Height="{Binding ElementName=Rect2,Path=Height}">
<TextBlock Text="内容1" VerticalAlignment="Center" />
<TextBox MinHeight="23" />
</DockPanel>
<DockPanel Margin="0,2" Width="{Binding ElementName=Rect2,Path=Width}"
Height="{Binding ElementName=Rect2,Path=Height}">
<TextBlock Text="内容2" VerticalAlignment="Center" />
<TextBox MinHeight="23" />
</DockPanel>
<DockPanel Margin="0,2" Width="{Binding ElementName=Rect2,Path=Width}"
Height="{Binding ElementName=Rect2,Path=Height}">
<TextBlock Text="内容3" VerticalAlignment="Center" />
<TextBox MinHeight="23" />
</DockPanel>
<DockPanel Margin="0,2" Width="{Binding ElementName=Rect2,Path=Width}"
Height="{Binding ElementName=Rect2,Path=Height}">
<TextBlock Text="内容4" VerticalAlignment="Center" />
<TextBox MinHeight="23" />
</DockPanel>
<DockPanel Margin="0,2" Width="{Binding ElementName=Rect2,Path=Width}"
Height="{Binding ElementName=Rect2,Path=Height}">
<TextBlock Text="内容5" VerticalAlignment="Center" />
<TextBox MinHeight="23" />
</DockPanel>
<DockPanel Margin="0,2" Width="{Binding ElementName=Rect2,Path=Width}"
Height="{Binding ElementName=Rect2,Path=Height}">
<TextBlock Text="内容6" VerticalAlignment="Center" />
<TextBox MinHeight="23" />
</DockPanel>
<UniformGrid Rows="1" Margin="5,0" MinWidth="200"
u:ElasticWrapPanel.FixToRB="True"
HorizontalAlignment="{Binding ElementName=cmbHorAlig,Path=SelectedValue}"
VerticalAlignment="{Binding ElementName=cmbVerAlig,Path=SelectedValue}">
<Button Content="查询" MinHeight="22" Margin="1" />
<Button Content="导出" MinHeight="22" Margin="1" />
</UniformGrid>
</WrapPanel>
</DockPanel>
</ScrollViewer>
<ScrollViewer
HorizontalScrollBarVisibility="{Binding HorizontalVisibility}"
VerticalScrollBarVisibility="{Binding VerticalVisibility}">
<DockPanel>
<Label Content="ElasticWrapPanel" Background="#FFB4F1AA"
DockPanel.Dock="Top" />
<u:ElasticWrapPanel
IsFillHorizontal="{Binding IsFillHorizontal}"
IsFillVertical="{Binding IsFillVertical}"
ItemWidth="{Binding ItemWidth}"
ItemHeight="{Binding ItemHeight}"
Orientation="{Binding SelectedOrientation}">
<DockPanel Margin="0,2" Width="{Binding ElementName=Rect2,Path=Width}"
Height="{Binding ElementName=Rect2,Path=Height}">
<TextBlock Text="内容1" VerticalAlignment="Center" />
<TextBox MinHeight="23" />
</DockPanel>
<DockPanel Margin="0,2" Width="{Binding ElementName=Rect2,Path=Width}"
Height="{Binding ElementName=Rect2,Path=Height}">
<TextBlock Text="内容2" VerticalAlignment="Center" />
<TextBox MinHeight="23" />
</DockPanel>
<DockPanel Margin="0,2" Width="{Binding ElementName=Rect2,Path=Width}"
Height="{Binding ElementName=Rect2,Path=Height}">
<TextBlock Text="内容3" VerticalAlignment="Center" />
<TextBox MinHeight="23" />
</DockPanel>
<DockPanel Margin="0,2" Width="{Binding ElementName=Rect2,Path=Width}"
Height="{Binding ElementName=Rect2,Path=Height}">
<TextBlock Text="内容4" VerticalAlignment="Center" />
<TextBox MinHeight="23" />
</DockPanel>
<DockPanel Margin="0,2" Width="{Binding ElementName=Rect2,Path=Width}"
Height="{Binding ElementName=Rect2,Path=Height}">
<TextBlock Text="内容5" VerticalAlignment="Center" />
<TextBox MinHeight="23" />
</DockPanel>
<DockPanel Margin="0,2" Width="{Binding ElementName=Rect2,Path=Width}"
Height="{Binding ElementName=Rect2,Path=Height}">
<TextBlock Text="内容6" VerticalAlignment="Center" />
<TextBox MinHeight="23" />
</DockPanel>
<UniformGrid Rows="1" Margin="5,0" MinWidth="200"
u:ElasticWrapPanel.FixToRB="True"
HorizontalAlignment="{Binding ElementName=cmbHorAlig,Path=SelectedValue}"
VerticalAlignment="{Binding ElementName=cmbVerAlig,Path=SelectedValue}">
<Button Content="查询" MinHeight="22" Margin="1" />
<Button Content="导出" MinHeight="22" Margin="1" />
</UniformGrid>
<DockPanel Margin="0,2" Width="{Binding ElementName=Rect2,Path=Width}"
Height="{Binding ElementName=Rect2,Path=Height}">
<TextBlock Text="内容1" VerticalAlignment="Center" />
<TextBox MinHeight="23" />
</DockPanel>
<DockPanel Margin="0,2" Width="{Binding ElementName=Rect2,Path=Width}"
Height="{Binding ElementName=Rect2,Path=Height}">
<TextBlock Text="内容2" VerticalAlignment="Center" />
<TextBox MinHeight="23" />
</DockPanel>
<DockPanel Margin="0,2" Width="{Binding ElementName=Rect2,Path=Width}"
Height="{Binding ElementName=Rect2,Path=Height}">
<TextBlock Text="内容3" VerticalAlignment="Center" />
<TextBox MinHeight="23" />
</DockPanel>
<DockPanel Margin="0,2" Width="{Binding ElementName=Rect2,Path=Width}"
Height="{Binding ElementName=Rect2,Path=Height}">
<TextBlock Text="内容4" VerticalAlignment="Center" />
<TextBox MinHeight="23" />
</DockPanel>
<DockPanel Margin="0,2" Width="{Binding ElementName=Rect2,Path=Width}"
Height="{Binding ElementName=Rect2,Path=Height}">
<TextBlock Text="内容5" VerticalAlignment="Center" />
<TextBox MinHeight="23" />
</DockPanel>
<DockPanel Margin="0,2" Width="{Binding ElementName=Rect2,Path=Width}"
Height="{Binding ElementName=Rect2,Path=Height}">
<TextBlock Text="内容6" VerticalAlignment="Center" />
<TextBox MinHeight="23" />
</DockPanel>
<UniformGrid Rows="1" Margin="5,0" MinWidth="200"
u:ElasticWrapPanel.FixToRB="True"
HorizontalAlignment="{Binding ElementName=cmbHorAlig,Path=SelectedValue}"
VerticalAlignment="{Binding ElementName=cmbVerAlig,Path=SelectedValue}">
<Button Content="查询" MinHeight="22" Margin="1" />
<Button Content="导出" MinHeight="22" Margin="1" />
</UniformGrid>
</u:ElasticWrapPanel>
</DockPanel>
</ScrollViewer>
</StackPanel>
</TabItem>
</TabControl>
</DockPanel>
</TabItem>
</TabControl>
</DockPanel>
</UserControl>