chuan/Ursa.Avalonia
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

feat: Flat demo.

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

335
demo/Ursa.Demo/Pages/ElasticWrapPanelDemo.axaml
View File

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

8
demo/Ursa.Demo/ViewModels/ElasticWrapPanelDemoViewModel.cs
View File

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