feat: refactor control bar.

This commit is contained in:
Zhang Dian
2023-09-18 18:12:14 +08:00
parent 2d15767f00
commit 737e6a3d8c
3 changed files with 127 additions and 110 deletions

View File

@@ -3,63 +3,59 @@
xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:u="https://irihi.tech/ursa" 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" mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
x:Class="Ursa.Demo.Pages.ElasticWrapPanelDemo"> x:Class="Ursa.Demo.Pages.ElasticWrapPanelDemo">
<Grid> <Grid>
<DockPanel> <DockPanel>
<TextBlock Text="一个优化奇怪的WrapPanel" DockPanel.Dock="Top" FontWeight="Bold" /> <StackPanel DockPanel.Dock="Top" x:Name="ControlBar">
<StackPanel DockPanel.Dock="Top" Orientation="Horizontal"> <StackPanel Orientation="Horizontal">
<TextBlock Text="排列方式" VerticalAlignment="Center" /> <TextBlock Text="Orientation" />
<ComboBox x:Name="CmbOrientation" Width="90" SelectedIndex="1"> <ComboBox ItemsSource="{Binding Orientations}"
<Orientation>Vertical</Orientation> SelectedItem="{Binding SelectedOrientation}" />
<Orientation>Horizontal</Orientation> <TextBlock Text="HorizontalScrollBar" />
</ComboBox> <ComboBox ItemsSource="{Binding HScrollBarVisibilities}"
<TextBlock Text="水平滚动条" VerticalAlignment="Center" /> SelectedItem="{Binding HorizontalVisibility}" />
<ComboBox x:Name="ScrollViewHVisb" Width="90" SelectedIndex="0"> <TextBlock Text="VerticalScrollBar" />
<ScrollBarVisibility>Auto</ScrollBarVisibility> <ComboBox ItemsSource="{Binding VScrollBarVisibilities}"
<ScrollBarVisibility>Disabled</ScrollBarVisibility> SelectedItem="{Binding VerticalVisibility}" />
<ScrollBarVisibility>Hidden</ScrollBarVisibility> </StackPanel>
<ScrollBarVisibility>Visible</ScrollBarVisibility> <StackPanel Orientation="Horizontal">
</ComboBox> <CheckBox IsChecked="{Binding IsFillHorizontal}"
<TextBlock Text="垂直滚动条" VerticalAlignment="Center" /> Content="IsFillHorizontal" />
<ComboBox x:Name="ScrollViewVVisb" Width="90" SelectedIndex="0"> <TextBlock Text="ItemWidth" />
<ScrollBarVisibility>Auto</ScrollBarVisibility> <TextBox Text="{Binding ItemWidth}" />
<ScrollBarVisibility>Disabled</ScrollBarVisibility> <CheckBox IsChecked="{Binding IsFillVertical}"
<ScrollBarVisibility>Hidden</ScrollBarVisibility> Content="IsFillVertical" />
<ScrollBarVisibility>Visible</ScrollBarVisibility> <TextBlock Text="ItemHeight" />
</ComboBox> <TextBox Text="{Binding ItemHeight}" />
</StackPanel> </StackPanel>
<StackPanel DockPanel.Dock="Top" Orientation="Horizontal"> <StackPanel.Styles>
<CheckBox x:Name="chkFillWidth" IsChecked="True" Content="水平平铺" <Style Selector="StackPanel#ControlBar > StackPanel > TextBlock">
VerticalAlignment="Center" VerticalContentAlignment="Center" <Setter Property="VerticalAlignment" Value="Center" />
Margin="0,0,10,0" /> <Setter Property="Margin" Value="10 0" />
<TextBlock Text="宽度" VerticalAlignment="Center" /> </Style>
<Grid> <Style Selector="StackPanel#ControlBar > StackPanel > TextBox">
<!-- <Rectangle x:Name="Rect1" Width="100" Visibility="Collapsed" /> --> <Setter Property="Width" Value="100" />
<Rectangle x:Name="Rect1" Width="100" /> </Style>
<TextBox x:Name="txtItemWidth" MinWidth="60" Height="22" VerticalContentAlignment="Center" <Style Selector="StackPanel#ControlBar > StackPanel > ComboBox">
Text="{Binding ElementName=Rect1,Path=Width,Mode=TwoWay}" /> <Setter Property="Width" Value="130" />
</Grid> </Style>
<CheckBox x:Name="chkFillHeight" IsChecked="True" Content="垂直平铺" </StackPanel.Styles>
VerticalAlignment="Center" VerticalContentAlignment="Center"
Margin="0,0,10,0" />
<TextBlock Text="高度" VerticalAlignment="Center" />
<Grid>
<TextBox x:Name="txtItemHeight" MinWidth="60" Height="22" VerticalContentAlignment="Center"
Text="{Binding ElementName=Rect1,Path=Height,Mode=TwoWay}" />
</Grid>
<TextBlock Text="* 数字可填入NaN" Foreground="Red" VerticalAlignment="Center" />
</StackPanel> </StackPanel>
<TabControl> <TabControl>
<TabItem Header="平铺Demo"> <TabItem Header="平铺Demo">
<TabControl> <TabControl>
<TabItem Header="情景1高度充满"> <TabItem Header="情景1高度充满">
<u:ElasticWrapPanel x:Name="ElasticWrapPanel" Grid.Row="3" <u:ElasticWrapPanel x:Name="ElasticWrapPanel"
IsFillHorizontal="{Binding ElementName=chkFillWidth,Path=IsChecked,Mode=TwoWay}" IsFillHorizontal="{Binding IsFillHorizontal}"
IsFillVertical="{Binding ElementName=chkFillHeight,Path=IsChecked,Mode=TwoWay}" IsFillVertical="{Binding IsFillVertical}"
ItemWidth="{Binding ElementName=Rect1,Path=Width}" ItemWidth="{Binding ItemWidth}"
ItemHeight="{Binding ElementName=Rect1,Path=Height}" ItemHeight="{Binding ItemHeight}"
Orientation="{Binding ElementName=CmbOrientation,Path=SelectedValue}"> Orientation="{Binding SelectedOrientation}">
<DockPanel MinHeight="35" Margin="0,0,5,2"> <DockPanel MinHeight="35" Margin="0,0,5,2">
<DockPanel.Background> <DockPanel.Background>
<LinearGradientBrush EndPoint="1,0.5" StartPoint="0,0.5"> <LinearGradientBrush EndPoint="1,0.5" StartPoint="0,0.5">
@@ -137,17 +133,13 @@
</u:ElasticWrapPanel> </u:ElasticWrapPanel>
</TabItem> </TabItem>
<TabItem Header="情景2高度Auto"> <TabItem Header="情景2高度Auto">
<Grid> <Grid RowDefinitions="auto,*">
<Grid.RowDefinitions>
<RowDefinition Height="auto" />
<RowDefinition />
</Grid.RowDefinitions>
<u:ElasticWrapPanel <u:ElasticWrapPanel
IsFillHorizontal="{Binding ElementName=chkFillWidth,Path=IsChecked,Mode=TwoWay}" IsFillHorizontal="{Binding IsFillHorizontal}"
IsFillVertical="{Binding ElementName=chkFillHeight,Path=IsChecked,Mode=TwoWay}" IsFillVertical="{Binding IsFillVertical}"
ItemWidth="{Binding ElementName=Rect1,Path=Width}" ItemWidth="{Binding ItemWidth}"
ItemHeight="{Binding ElementName=Rect1,Path=Height}" ItemHeight="{Binding ItemHeight}"
Orientation="{Binding ElementName=CmbOrientation,Path=SelectedValue}"> Orientation="{Binding SelectedOrientation}">
<DockPanel MinHeight="35" Margin="0,0,5,2"> <DockPanel MinHeight="35" Margin="0,0,5,2">
<DockPanel.Background> <DockPanel.Background>
<LinearGradientBrush EndPoint="1,0.5" StartPoint="0,0.5"> <LinearGradientBrush EndPoint="1,0.5" StartPoint="0,0.5">
@@ -225,21 +217,21 @@
</DockPanel> </DockPanel>
</u:ElasticWrapPanel> </u:ElasticWrapPanel>
<Border Grid.Row="1" BorderThickness="1" BorderBrush="Red" Margin="0,4"> <Border Grid.Row="1" BorderThickness="1" BorderBrush="Red" Margin="0,4">
<Label Content="这里是VS扩展git源码提交部分界面不实现" /> <Label Content="This is blank" />
</Border> </Border>
</Grid> </Grid>
</TabItem> </TabItem>
<TabItem Header="情景3(ScrollView中表现)"> <TabItem Header="情景3(ScrollView中表现)">
<Border Grid.Row="3" Margin="70,30" BorderBrush="Red" BorderThickness="1"> <Border Margin="70,30" BorderBrush="Red" BorderThickness="1">
<ScrollViewer <ScrollViewer
HorizontalScrollBarVisibility="{Binding ElementName=ScrollViewHVisb,Path=SelectedValue}" HorizontalScrollBarVisibility="{Binding HorizontalVisibility}"
VerticalScrollBarVisibility="{Binding ElementName=ScrollViewVVisb,Path=SelectedValue}"> VerticalScrollBarVisibility="{Binding VerticalVisibility}">
<u:ElasticWrapPanel x:Name="ElasticWrapPanel3" <u:ElasticWrapPanel x:Name="ElasticWrapPanel3"
IsFillHorizontal="{Binding ElementName=chkFillWidth,Path=IsChecked,Mode=TwoWay}" IsFillHorizontal="{Binding IsFillHorizontal}"
IsFillVertical="{Binding ElementName=chkFillHeight,Path=IsChecked,Mode=TwoWay}" IsFillVertical="{Binding IsFillVertical}"
ItemWidth="{Binding ElementName=Rect1,Path=Width}" ItemWidth="{Binding ItemWidth}"
ItemHeight="{Binding ElementName=Rect1,Path=Height}" ItemHeight="{Binding ItemHeight}"
Orientation="{Binding ElementName=CmbOrientation,Path=SelectedValue}"> Orientation="{Binding SelectedOrientation}">
<DockPanel MinHeight="35" Margin="0,0,5,2"> <DockPanel MinHeight="35" Margin="0,0,5,2">
<DockPanel.Background> <DockPanel.Background>
<LinearGradientBrush EndPoint="1,0.5" StartPoint="0,0.5"> <LinearGradientBrush EndPoint="1,0.5" StartPoint="0,0.5">
@@ -352,13 +344,13 @@
<TabItem Header="一个"> <TabItem Header="一个">
<StackPanel x:Name="UnifornGrid1"> <StackPanel x:Name="UnifornGrid1">
<ScrollViewer <ScrollViewer
HorizontalScrollBarVisibility="{Binding ElementName=ScrollViewHVisb,Path=SelectedValue}" HorizontalScrollBarVisibility="{Binding HorizontalVisibility}"
VerticalScrollBarVisibility="{Binding ElementName=ScrollViewVVisb,Path=SelectedValue}"> VerticalScrollBarVisibility="{Binding VerticalVisibility}">
<DockPanel> <DockPanel>
<Label Content="WrapPanel" Background="#FFCBCBEA" DockPanel.Dock="Top" /> <Label Content="WrapPanel" Background="#FFCBCBEA" DockPanel.Dock="Top" />
<WrapPanel ItemWidth="{Binding ElementName=Rect1,Path=Width}" <WrapPanel ItemWidth="{Binding ItemWidth}"
ItemHeight="{Binding ElementName=Rect1,Path=Height}" ItemHeight="{Binding ItemHeight}"
Orientation="{Binding ElementName=CmbOrientation,Path=SelectedValue}"> Orientation="{Binding SelectedOrientation}">
<DockPanel Margin="0,2" Width="{Binding ElementName=Rect2,Path=Width}" <DockPanel Margin="0,2" Width="{Binding ElementName=Rect2,Path=Width}"
Height="{Binding ElementName=Rect2,Path=Height}"> Height="{Binding ElementName=Rect2,Path=Height}">
<TextBlock Text="内容1" VerticalAlignment="Center" /> <TextBlock Text="内容1" VerticalAlignment="Center" />
@@ -400,16 +392,17 @@
</DockPanel> </DockPanel>
</ScrollViewer> </ScrollViewer>
<ScrollViewer <ScrollViewer
HorizontalScrollBarVisibility="{Binding ElementName=ScrollViewHVisb,Path=SelectedValue}" HorizontalScrollBarVisibility="{Binding HorizontalVisibility}"
VerticalScrollBarVisibility="{Binding ElementName=ScrollViewVVisb,Path=SelectedValue}"> VerticalScrollBarVisibility="{Binding VerticalVisibility}">
<DockPanel> <DockPanel>
<Label Content="ElasticWrapPanel" Background="#FFB4F1AA" DockPanel.Dock="Top" /> <Label Content="ElasticWrapPanel" Background="#FFB4F1AA"
DockPanel.Dock="Top" />
<u:ElasticWrapPanel <u:ElasticWrapPanel
IsFillHorizontal="{Binding ElementName=chkFillWidth,Path=IsChecked,Mode=TwoWay}" IsFillHorizontal="{Binding IsFillHorizontal}"
IsFillVertical="{Binding ElementName=chkFillHeight,Path=IsChecked,Mode=TwoWay}" IsFillVertical="{Binding IsFillVertical}"
ItemWidth="{Binding ElementName=Rect1,Path=Width}" ItemWidth="{Binding ItemWidth}"
ItemHeight="{Binding ElementName=Rect1,Path=Height}" ItemHeight="{Binding ItemHeight}"
Orientation="{Binding ElementName=CmbOrientation,Path=SelectedValue}"> Orientation="{Binding SelectedOrientation}">
<DockPanel Margin="0,2" Width="{Binding ElementName=Rect2,Path=Width}" <DockPanel Margin="0,2" Width="{Binding ElementName=Rect2,Path=Width}"
Height="{Binding ElementName=Rect2,Path=Height}"> Height="{Binding ElementName=Rect2,Path=Height}">
<TextBlock Text="内容1" VerticalAlignment="Center" /> <TextBlock Text="内容1" VerticalAlignment="Center" />
@@ -455,13 +448,13 @@
<TabItem Header="多个"> <TabItem Header="多个">
<StackPanel x:Name="UnifornGrid2"> <StackPanel x:Name="UnifornGrid2">
<ScrollViewer <ScrollViewer
HorizontalScrollBarVisibility="{Binding ElementName=ScrollViewHVisb,Path=SelectedValue}" HorizontalScrollBarVisibility="{Binding HorizontalVisibility}"
VerticalScrollBarVisibility="{Binding ElementName=ScrollViewVVisb,Path=SelectedValue}"> VerticalScrollBarVisibility="{Binding VerticalVisibility}">
<DockPanel> <DockPanel>
<Label Content="WrapPanel" Background="#FFCBCBEA" DockPanel.Dock="Top" /> <Label Content="WrapPanel" Background="#FFCBCBEA" DockPanel.Dock="Top" />
<WrapPanel ItemWidth="{Binding ElementName=Rect1,Path=Width}" <WrapPanel ItemWidth="{Binding ItemWidth}"
ItemHeight="{Binding ElementName=Rect1,Path=Height}" ItemHeight="{Binding ItemHeight}"
Orientation="{Binding ElementName=CmbOrientation,Path=SelectedValue}"> Orientation="{Binding SelectedOrientation}">
<DockPanel Margin="0,2" Width="{Binding ElementName=Rect2,Path=Width}" <DockPanel Margin="0,2" Width="{Binding ElementName=Rect2,Path=Width}"
Height="{Binding ElementName=Rect2,Path=Height}"> Height="{Binding ElementName=Rect2,Path=Height}">
<TextBlock Text="内容1" VerticalAlignment="Center" /> <TextBlock Text="内容1" VerticalAlignment="Center" />
@@ -540,16 +533,17 @@
</DockPanel> </DockPanel>
</ScrollViewer> </ScrollViewer>
<ScrollViewer <ScrollViewer
HorizontalScrollBarVisibility="{Binding ElementName=ScrollViewHVisb,Path=SelectedValue}" HorizontalScrollBarVisibility="{Binding HorizontalVisibility}"
VerticalScrollBarVisibility="{Binding ElementName=ScrollViewVVisb,Path=SelectedValue}"> VerticalScrollBarVisibility="{Binding VerticalVisibility}">
<DockPanel> <DockPanel>
<Label Content="ElasticWrapPanel" Background="#FFB4F1AA" DockPanel.Dock="Top" /> <Label Content="ElasticWrapPanel" Background="#FFB4F1AA"
DockPanel.Dock="Top" />
<u:ElasticWrapPanel <u:ElasticWrapPanel
IsFillHorizontal="{Binding ElementName=chkFillWidth,Path=IsChecked,Mode=TwoWay}" IsFillHorizontal="{Binding IsFillHorizontal}"
IsFillVertical="{Binding ElementName=chkFillHeight,Path=IsChecked,Mode=TwoWay}" IsFillVertical="{Binding IsFillVertical}"
ItemWidth="{Binding ElementName=Rect1,Path=Width}" ItemWidth="{Binding ItemWidth}"
ItemHeight="{Binding ElementName=Rect1,Path=Height}" ItemHeight="{Binding ItemHeight}"
Orientation="{Binding ElementName=CmbOrientation,Path=SelectedValue}"> Orientation="{Binding SelectedOrientation}">
<DockPanel Margin="0,2" Width="{Binding ElementName=Rect2,Path=Width}" <DockPanel Margin="0,2" Width="{Binding ElementName=Rect2,Path=Width}"
Height="{Binding ElementName=Rect2,Path=Height}"> Height="{Binding ElementName=Rect2,Path=Height}">
<TextBlock Text="内容1" VerticalAlignment="Center" /> <TextBlock Text="内容1" VerticalAlignment="Center" />
@@ -634,17 +628,5 @@
</TabItem> </TabItem>
</TabControl> </TabControl>
</DockPanel> </DockPanel>
<Border HorizontalAlignment="Right" VerticalAlignment="Top" IsHitTestVisible="False"
BorderBrush="Blue" Background="#FF56AFFD" Margin="5,5,5,5" BorderThickness="1"
TextElement.FontFamily="微软雅黑" TextElement.FontWeight="Thin" Opacity="0.35"
TextElement.Foreground="White" Padding="4">
<StackPanel>
<TextBlock Text="ElasticWrapPanel控件" />
<TextBlock Text="IsFillHorizontal属性有ItemWidth情况下水平平铺" />
<TextBlock Text="IsFillVertical属性有ItemHeight情况下水平平铺" />
<TextBlock Text="ElasticWrapPanel.FixToRB水平排列元素时则向右对齐换行" />
<TextBlock TextAlignment="Right" Text="垂直排列元素时则向底部对齐换行" />
</StackPanel>
</Border>
</Grid> </Grid>
</UserControl> </UserControl>

View File

@@ -1,6 +1,5 @@
using Avalonia; using Avalonia.Controls;
using Avalonia.Controls; using Ursa.Demo.ViewModels;
using Avalonia.Markup.Xaml;
namespace Ursa.Demo.Pages; namespace Ursa.Demo.Pages;
@@ -9,5 +8,6 @@ public partial class ElasticWrapPanelDemo : UserControl
public ElasticWrapPanelDemo() public ElasticWrapPanelDemo()
{ {
InitializeComponent(); InitializeComponent();
DataContext = new ElasticWrapPanelDemoViewModel();
} }
} }

View File

@@ -1,7 +1,42 @@
using CommunityToolkit.Mvvm.ComponentModel; using System.Collections.ObjectModel;
using Avalonia.Controls.Primitives;
using Avalonia.Layout;
using CommunityToolkit.Mvvm.ComponentModel;
namespace Ursa.Demo.ViewModels; namespace Ursa.Demo.ViewModels;
public class ElasticWrapPanelDemoViewModel : ObservableObject public partial class ElasticWrapPanelDemoViewModel : ObservableObject
{ {
[ObservableProperty] private Orientation _selectedOrientation;
[ObservableProperty] private ScrollBarVisibility _horizontalVisibility;
[ObservableProperty] private ScrollBarVisibility _verticalVisibility;
[ObservableProperty] private ObservableCollection<Orientation> _orientations = null!;
[ObservableProperty] private ObservableCollection<ScrollBarVisibility> _hScrollBarVisibilities = null!;
[ObservableProperty] private ObservableCollection<ScrollBarVisibility> _vScrollBarVisibilities = null!;
[ObservableProperty] private bool _isFillHorizontal;
[ObservableProperty] private bool _isFillVertical;
[ObservableProperty] private double _itemWidth;
[ObservableProperty] private double _itemHeight;
public ElasticWrapPanelDemoViewModel()
{
SelectedOrientation = Orientation.Horizontal;
HorizontalVisibility = VerticalVisibility = ScrollBarVisibility.Auto;
Orientations = new ObservableCollection<Orientation>() { Orientation.Horizontal, Orientation.Vertical };
HScrollBarVisibilities = new ObservableCollection<ScrollBarVisibility>()
{
ScrollBarVisibility.Disabled,
ScrollBarVisibility.Auto,
ScrollBarVisibility.Hidden,
ScrollBarVisibility.Visible
};
VScrollBarVisibilities = new ObservableCollection<ScrollBarVisibility>(HScrollBarVisibilities);
IsFillHorizontal = true;
IsFillVertical = false;
ItemWidth = 100d;
ItemHeight = double.NaN;
}
} }