feat: Flat demo.

This commit is contained in:
Zhang Dian
2023-09-18 19:13:49 +08:00
parent 737e6a3d8c
commit 134364f199
2 changed files with 442 additions and 609 deletions

View File

@@ -8,7 +8,6 @@
x:DataType="viewModels:ElasticWrapPanelDemoViewModel"
mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
x:Class="Ursa.Demo.Pages.ElasticWrapPanelDemo">
<Grid>
<DockPanel>
<StackPanel DockPanel.Dock="Top" x:Name="ControlBar">
<StackPanel Orientation="Horizontal">
@@ -26,18 +25,22 @@
<CheckBox IsChecked="{Binding IsFillHorizontal}"
Content="IsFillHorizontal" />
<TextBlock Text="ItemWidth" />
<TextBox Text="{Binding ItemWidth}" />
<NumericUpDown Value="{Binding ItemWidth}"
Increment="1" Minimum="0" Maximum="1000" />
</StackPanel>
<StackPanel Orientation="Horizontal">
<CheckBox IsChecked="{Binding IsFillVertical}"
Content="IsFillVertical" />
<TextBlock Text="ItemHeight" />
<TextBox Text="{Binding 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">
<Style Selector="StackPanel#ControlBar > StackPanel > TextBox, NumericUpDown">
<Setter Property="Width" Value="100" />
</Style>
<Style Selector="StackPanel#ControlBar > StackPanel > ComboBox">
@@ -47,273 +50,104 @@
</StackPanel>
<TabControl>
<TabItem Header="平铺Demo">
<TabItem Header="Flat">
<TabControl>
<TabItem Header="情景1高度充满">
<u:ElasticWrapPanel x:Name="ElasticWrapPanel"
IsFillHorizontal="{Binding IsFillHorizontal}"
IsFillVertical="{Binding IsFillVertical}"
ItemWidth="{Binding ItemWidth}"
ItemHeight="{Binding ItemHeight}"
Orientation="{Binding SelectedOrientation}">
<DockPanel MinHeight="35" Margin="0,0,5,2">
<DockPanel.Background>
<LinearGradientBrush EndPoint="1,0.5" StartPoint="0,0.5">
<GradientStop Color="#FFA6A6A6" Offset="0" />
<GradientStop Color="#FFCFCFCF" Offset="1" />
</LinearGradientBrush>
</DockPanel.Background>
<Rectangle Fill="#F05033" Width="4" />
<Grid Margin="5">
<Ellipse StrokeThickness="2" Width="25" Height="25" Stroke="Black" />
<Ellipse StrokeThickness="2" Width="17" Height="17" Fill="#FFB8B2B2" />
</Grid>
<TextBlock Text="Changed" FontWeight="Medium" FontSize="16"
VerticalAlignment="Center" />
</DockPanel>
<DockPanel MinHeight="35" Margin="0,0,5,2">
<DockPanel.Background>
<LinearGradientBrush EndPoint="1,0.5" StartPoint="0,0.5">
<GradientStop Color="#FFA6A6A6" Offset="0" />
<GradientStop Color="#FFCFCFCF" Offset="1" />
</LinearGradientBrush>
</DockPanel.Background>
<Rectangle Fill="#F05033" Width="4" />
<Grid Margin="5">
<Ellipse StrokeThickness="2" Width="25" Height="25" Stroke="Black" />
<Ellipse StrokeThickness="2" Width="17" Height="17" Fill="#FFDCA1A1" />
</Grid>
<TextBlock Text="Branches" FontWeight="Medium" FontSize="16"
VerticalAlignment="Center" />
</DockPanel>
<DockPanel MinHeight="35" Margin="0,0,5,2">
<DockPanel.Background>
<LinearGradientBrush EndPoint="1,0.5" StartPoint="0,0.5">
<GradientStop Color="#FFA6A6A6" Offset="0" />
<GradientStop Color="#FFCFCFCF" Offset="1" />
</LinearGradientBrush>
</DockPanel.Background>
<Rectangle Fill="#FF3333F0" Width="4" />
<Grid Margin="5">
<Ellipse StrokeThickness="2" Width="25" Height="25" Stroke="Black" />
<Ellipse StrokeThickness="2" Width="17" Height="17" Fill="#FFB5B9BD" />
</Grid>
<TextBlock Text="Sync" FontWeight="Medium" FontSize="16" VerticalAlignment="Center" />
</DockPanel>
<DockPanel MinHeight="35" Margin="0,0,5,2">
<DockPanel.Background>
<LinearGradientBrush EndPoint="1,0.5" StartPoint="0,0.5">
<GradientStop Color="#FFA6A6A6" Offset="0" />
<GradientStop Color="#FFCFCFCF" Offset="1" />
</LinearGradientBrush>
</DockPanel.Background>
<Rectangle Fill="#FF616161" Width="4" />
<Grid Margin="5">
<Ellipse StrokeThickness="2" Width="25" Height="25" Stroke="Black" />
<Ellipse StrokeThickness="2" Width="17" Height="17" Fill="#FF3E3E3E" />
</Grid>
<TextBlock Text="Setting" FontWeight="Medium" FontSize="16"
VerticalAlignment="Center" />
</DockPanel>
<DockPanel MinHeight="35" Margin="0,0,5,2">
<DockPanel.Background>
<LinearGradientBrush EndPoint="1,0.5" StartPoint="0,0.5">
<GradientStop Color="#FFA6A6A6" Offset="0" />
<GradientStop Color="#FF555E85" Offset="1" />
</LinearGradientBrush>
</DockPanel.Background>
<Rectangle Fill="#FF616161" Width="4" />
<Grid Margin="5">
<Ellipse StrokeThickness="2" Width="25" Height="25" Stroke="Black" />
<Ellipse StrokeThickness="2" Width="17" Height="17" Fill="#FF93B6AA" />
</Grid>
<TextBlock Text="Others" FontWeight="Medium" FontSize="16"
VerticalAlignment="Center" />
</DockPanel>
</u:ElasticWrapPanel>
</TabItem>
<TabItem Header="情景2高度Auto">
<Grid RowDefinitions="auto,*">
<TabItem Header="Common">
<u:ElasticWrapPanel
IsFillHorizontal="{Binding IsFillHorizontal}"
IsFillVertical="{Binding IsFillVertical}"
ItemWidth="{Binding ItemWidth}"
ItemHeight="{Binding ItemHeight}"
Orientation="{Binding SelectedOrientation}">
<DockPanel MinHeight="35" Margin="0,0,5,2">
<DockPanel.Background>
<LinearGradientBrush EndPoint="1,0.5" StartPoint="0,0.5">
<GradientStop Color="#FFA6A6A6" Offset="0" />
<GradientStop Color="#FFCFCFCF" Offset="1" />
</LinearGradientBrush>
</DockPanel.Background>
<Rectangle Fill="#F05033" Width="4" />
<Grid Margin="5">
<Ellipse StrokeThickness="2" Width="25" Height="25" Stroke="Black" />
<Ellipse StrokeThickness="2" Width="17" Height="17" Fill="#FFB8B2B2" />
</Grid>
<TextBlock Text="Changed" FontWeight="Medium" FontSize="16"
VerticalAlignment="Center" />
</DockPanel>
<DockPanel MinHeight="35" Margin="0,0,5,2">
<DockPanel.Background>
<LinearGradientBrush EndPoint="1,0.5" StartPoint="0,0.5">
<GradientStop Color="#FFA6A6A6" Offset="0" />
<GradientStop Color="#FFCFCFCF" Offset="1" />
</LinearGradientBrush>
</DockPanel.Background>
<Rectangle Fill="#F05033" Width="4" />
<Grid Margin="5">
<Ellipse StrokeThickness="2" Width="25" Height="25" Stroke="Black" />
<Ellipse StrokeThickness="2" Width="17" Height="17" Fill="#FFDCA1A1" />
</Grid>
<TextBlock Text="Branches" FontWeight="Medium" FontSize="16"
VerticalAlignment="Center" />
</DockPanel>
<DockPanel MinHeight="35" Margin="0,0,5,2">
<DockPanel.Background>
<LinearGradientBrush EndPoint="1,0.5" StartPoint="0,0.5">
<GradientStop Color="#FFA6A6A6" Offset="0" />
<GradientStop Color="#FFCFCFCF" Offset="1" />
</LinearGradientBrush>
</DockPanel.Background>
<Rectangle Fill="#FF3333F0" Width="4" />
<Grid Margin="5">
<Ellipse StrokeThickness="2" Width="25" Height="25" Stroke="Black" />
<Ellipse StrokeThickness="2" Width="17" Height="17" Fill="#FFB5B9BD" />
</Grid>
<TextBlock Text="Sync" FontWeight="Medium" FontSize="16"
VerticalAlignment="Center" />
</DockPanel>
<DockPanel MinHeight="35" Margin="0,0,5,2">
<DockPanel.Background>
<LinearGradientBrush EndPoint="1,0.5" StartPoint="0,0.5">
<GradientStop Color="#FFA6A6A6" Offset="0" />
<GradientStop Color="#FFCFCFCF" Offset="1" />
</LinearGradientBrush>
</DockPanel.Background>
<Rectangle Fill="#FF616161" Width="4" />
<Grid Margin="5">
<Ellipse StrokeThickness="2" Width="25" Height="25" Stroke="Black" />
<Ellipse StrokeThickness="2" Width="17" Height="17" Fill="#FF3E3E3E" />
</Grid>
<TextBlock Text="Setting" FontWeight="Medium" FontSize="16"
VerticalAlignment="Center" />
</DockPanel>
<DockPanel MinHeight="35" Margin="0,0,5,2">
<DockPanel.Background>
<LinearGradientBrush EndPoint="1,0.5" StartPoint="0,0.5">
<GradientStop Color="#FFA6A6A6" Offset="0" />
<GradientStop Color="#FF555E85" Offset="1" />
</LinearGradientBrush>
</DockPanel.Background>
<Rectangle Fill="#FF616161" Width="4" />
<Grid Margin="5">
<Ellipse StrokeThickness="2" Width="25" Height="25" Stroke="Black" />
<Ellipse StrokeThickness="2" Width="17" Height="17" Fill="#FF93B6AA" />
</Grid>
<TextBlock Text="Others" FontWeight="Medium" FontSize="16"
VerticalAlignment="Center" />
</DockPanel>
<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="Red" Margin="0,4">
<Label Content="This is blank" />
</Border>
</Grid>
</TabItem>
<TabItem Header="情景3(ScrollView中表现)">
<Border Margin="70,30" BorderBrush="Red" BorderThickness="1">
<ScrollViewer
HorizontalScrollBarVisibility="{Binding HorizontalVisibility}"
VerticalScrollBarVisibility="{Binding VerticalVisibility}">
<u:ElasticWrapPanel x:Name="ElasticWrapPanel3"
<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}">
<DockPanel MinHeight="35" Margin="0,0,5,2">
<DockPanel.Background>
<LinearGradientBrush EndPoint="1,0.5" StartPoint="0,0.5">
<GradientStop Color="#FFA6A6A6" Offset="0" />
<GradientStop Color="#FFCFCFCF" Offset="1" />
</LinearGradientBrush>
</DockPanel.Background>
<Rectangle Fill="#F05033" Width="4" />
<Grid Margin="5">
<Ellipse StrokeThickness="2" Width="25" Height="25" Stroke="Black" />
<Ellipse StrokeThickness="2" Width="17" Height="17" Fill="#FFB8B2B2" />
<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>
<TextBlock Text="Changed" FontWeight="Medium" FontSize="16"
VerticalAlignment="Center" />
</DockPanel>
<DockPanel MinHeight="35" Margin="0,0,5,2">
<DockPanel.Background>
<LinearGradientBrush EndPoint="1,0.5" StartPoint="0,0.5">
<GradientStop Color="#FFA6A6A6" Offset="0" />
<GradientStop Color="#FFCFCFCF" Offset="1" />
</LinearGradientBrush>
</DockPanel.Background>
<Rectangle Fill="#F05033" Width="4" />
<Grid Margin="5">
<Ellipse StrokeThickness="2" Width="25" Height="25" Stroke="Black" />
<Ellipse StrokeThickness="2" Width="17" Height="17" Fill="#FFDCA1A1" />
</Grid>
<TextBlock Text="Branches" FontWeight="Medium" FontSize="16"
VerticalAlignment="Center" />
</DockPanel>
<DockPanel MinHeight="35" Margin="0,0,5,2">
<DockPanel.Background>
<LinearGradientBrush EndPoint="1,0.5" StartPoint="0,0.5">
<GradientStop Color="#FFA6A6A6" Offset="0" />
<GradientStop Color="#FFCFCFCF" Offset="1" />
</LinearGradientBrush>
</DockPanel.Background>
<Rectangle Fill="#FF3333F0" Width="4" />
<Grid Margin="5">
<Ellipse StrokeThickness="2" Width="25" Height="25" Stroke="Black" />
<Ellipse StrokeThickness="2" Width="17" Height="17" Fill="#FFB5B9BD" />
</Grid>
<TextBlock Text="Sync" FontWeight="Medium" FontSize="16"
VerticalAlignment="Center" />
</DockPanel>
<DockPanel MinHeight="35" Margin="0,0,5,2">
<DockPanel.Background>
<LinearGradientBrush EndPoint="1,0.5" StartPoint="0,0.5">
<GradientStop Color="#FFA6A6A6" Offset="0" />
<GradientStop Color="#FFCFCFCF" Offset="1" />
</LinearGradientBrush>
</DockPanel.Background>
<Rectangle Fill="#FF616161" Width="4" />
<Grid Margin="5">
<Ellipse StrokeThickness="2" Width="25" Height="25" Stroke="Black" />
<Ellipse StrokeThickness="2" Width="17" Height="17" Fill="#FF3E3E3E" />
</Grid>
<TextBlock Text="Setting" FontWeight="Medium" FontSize="16"
VerticalAlignment="Center" />
</DockPanel>
<DockPanel MinHeight="35" Margin="0,0,5,2">
<DockPanel.Background>
<LinearGradientBrush EndPoint="1,0.5" StartPoint="0,0.5">
<GradientStop Color="#FFA6A6A6" Offset="0" />
<GradientStop Color="#FF555E85" Offset="1" />
</LinearGradientBrush>
</DockPanel.Background>
<Rectangle Fill="#FF616161" Width="4" />
<Grid Margin="5">
<Ellipse StrokeThickness="2" Width="25" Height="25" Stroke="Black" />
<Ellipse StrokeThickness="2" Width="17" Height="17" Fill="#FF93B6AA" />
</Grid>
<TextBlock Text="Others" FontWeight="Medium" FontSize="16"
VerticalAlignment="Center" />
</DockPanel>
</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="平铺+靠右">
<TabItem Header="FixToRB">
<DockPanel>
<StackPanel DockPanel.Dock="Top" Orientation="Horizontal">
<TextBlock Text="输入控件宽度" VerticalAlignment="Center" />
@@ -628,5 +462,4 @@
</TabItem>
</TabControl>
</DockPanel>
</Grid>
</UserControl>

View File

@@ -16,8 +16,8 @@ public partial class ElasticWrapPanelDemoViewModel : ObservableObject
[ObservableProperty] private bool _isFillHorizontal;
[ObservableProperty] private bool _isFillVertical;
[ObservableProperty] private double _itemWidth;
[ObservableProperty] private double _itemHeight;
[ObservableProperty] private double? _itemWidth;
[ObservableProperty] private double? _itemHeight;
public ElasticWrapPanelDemoViewModel()
@@ -36,7 +36,7 @@ public partial class ElasticWrapPanelDemoViewModel : ObservableObject
IsFillHorizontal = true;
IsFillVertical = false;
ItemWidth = 100d;
ItemHeight = double.NaN;
ItemWidth = 40d;
ItemHeight = 40d;
}
}