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

feat: add mvvm demo.

Browse Source
This commit is contained in:
Dong Bin
2025-07-02 22:31:16 +08:00
parent 881b9ca7d3
commit 6deccdc1ac
4 changed files with 220 additions and 82 deletions
Download Patch File Download Diff File Expand all files Collapse all files

220
demo/Ursa.Demo/Pages/AnchorDemo.axaml
View File

@@ -5,65 +5,169 @@
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:DataType="viewModels:AnchorDemoViewModel"
mc:Ignorable="d">
<Grid ColumnDefinitions="*, Auto">
<ScrollViewer
Name="container"
Grid.Column="0"
VerticalAlignment="Stretch">
<StackPanel>
<Rectangle
Name="rectangle1"
Height="300"
HorizontalAlignment="Stretch"
Fill="{DynamicResource SemiRed2}" />
<Rectangle
Name="rectangle2"
Height="300"
HorizontalAlignment="Stretch"
Fill="{DynamicResource SemiPink1}" />
<Rectangle
Name="rectangle3"
Height="300"
HorizontalAlignment="Stretch"
Fill="{DynamicResource SemiPurple1}" />
<Rectangle
Name="rectangle4"
Height="300"
HorizontalAlignment="Stretch"
Fill="{DynamicResource SemiViolet1}" />
<Rectangle
Name="rectangle5"
Height="300"
HorizontalAlignment="Stretch"
Fill="{DynamicResource SemiIndigo1}" />
<Rectangle
Name="rectangle6"
Height="300"
HorizontalAlignment="Stretch"
Fill="{DynamicResource SemiBlue1}" />
<Rectangle
Name="rectangle7"
Height="300"
HorizontalAlignment="Stretch"
Fill="{DynamicResource SemiLightBlue1}" />
</StackPanel>
</ScrollViewer>
<u:Anchor
Grid.Column="1"
Width="200"
Margin="24"
TargetContainer="{Binding ElementName=container}">
<u:AnchorItem Content="Rectangle 1" Target="{Binding #rectangle1}" />
<u:AnchorItem Content="Rectangle 2" Target="{Binding #rectangle2}" />
<u:AnchorItem Content="Rectangle 3" Target="{Binding #rectangle3}" />
<u:AnchorItem Content="Rectangle 4" Target="{Binding #rectangle4}" />
<u:AnchorItem Content="Rectangle 5" Target="{Binding #rectangle5}" />
<u:AnchorItem Content="Rectangle 6" Target="{Binding #rectangle6}" />
<u:AnchorItem Content="Rectangle 7" Target="{Binding #rectangle7}" />
<TabControl>
<TabItem Header="XAML Inline">
<Grid ColumnDefinitions="*, Auto">
<ScrollViewer
Name="container1"
Grid.Column="0"
VerticalAlignment="Stretch">
<StackPanel>
<StackPanel.Styles>
<Style Selector="TextBlock">
<Setter Property="HorizontalAlignment" Value="Center" />
<Setter Property="VerticalAlignment" Value="Center" />
</Style>
</StackPanel.Styles>
<Border
Name="a1"
Height="300"
HorizontalAlignment="Stretch"
Background="{DynamicResource SemiRed2}">
<TextBlock Text="Border 1" />
</Border>
<Border
Name="a2"
Height="300"
HorizontalAlignment="Stretch"
Background="{DynamicResource SemiPink1}">
<TextBlock Text="Border 2" />
</Border>
<Border
Name="a3"
Height="300"
HorizontalAlignment="Stretch"
Background="{DynamicResource SemiPurple1}">
<TextBlock Text="Border 3" />
</Border>
<Border
Name="a4"
Height="300"
HorizontalAlignment="Stretch"
Background="{DynamicResource SemiViolet1}">
<TextBlock Text="Border 4" />
</Border>
<Border
Name="a5"
Height="300"
HorizontalAlignment="Stretch"
Background="{DynamicResource SemiIndigo1}">
<TextBlock Text="Border 5" />
</Border>
<Border
Name="a6"
Height="300"
HorizontalAlignment="Stretch"
Background="{DynamicResource SemiBlue1}">
<TextBlock Text="Border 6" />
</Border>
<Border
Name="a7"
Height="300"
HorizontalAlignment="Stretch"
Background="{DynamicResource SemiLightBlue1}">
<TextBlock Text="Border 7" />
</Border>
</StackPanel>
</ScrollViewer>
<u:Anchor
Grid.Column="1"
Width="200"
Margin="24"
TargetContainer="{Binding ElementName=container1}">
<u:AnchorItem Content="Rectangle 1" Target="{Binding #a1}" />
<u:AnchorItem Content="Rectangle 2" Target="{Binding #a2}" />
<u:AnchorItem Content="Rectangle 3" Target="{Binding #a3}" />
<u:AnchorItem Content="Rectangle 4" Target="{Binding #a4}" />
<u:AnchorItem Content="Rectangle 5" Target="{Binding #a5}" />
<u:AnchorItem Content="Rectangle 6" Target="{Binding #a6}" />
<u:AnchorItem Content="Rectangle 7" Target="{Binding #a7}" />
</u:Anchor>
</Grid>
</UserControl>
</u:Anchor>
</Grid>
</TabItem>
<TabItem Header="MVVM">
<Grid ColumnDefinitions="*, Auto">
<ScrollViewer
Name="container2"
Grid.Column="0"
VerticalAlignment="Stretch">
<StackPanel>
<StackPanel.Styles>
<Style Selector="TextBlock">
<Setter Property="HorizontalAlignment" Value="Center" />
<Setter Property="VerticalAlignment" Value="Center" />
</Style>
</StackPanel.Styles>
<Border
Height="300"
HorizontalAlignment="Stretch"
u:Anchor.AnchorId="anchor1"
Background="{DynamicResource SemiRed2}">
<TextBlock Text="Border 1" />
</Border>
<Border
Height="300"
HorizontalAlignment="Stretch"
u:Anchor.AnchorId="anchor2"
Background="{DynamicResource SemiPink1}">
<TextBlock Text="Border 2" />
</Border>
<Border
Height="300"
HorizontalAlignment="Stretch"
u:Anchor.AnchorId="anchor3"
Background="{DynamicResource SemiPurple1}">
<TextBlock Text="Border 3" />
</Border>
<Border
Height="300"
HorizontalAlignment="Stretch"
u:Anchor.AnchorId="anchor4"
Background="{DynamicResource SemiViolet1}">
<TextBlock Text="Border 4" />
</Border>
<Border
Height="300"
HorizontalAlignment="Stretch"
u:Anchor.AnchorId="anchor5"
Background="{DynamicResource SemiIndigo1}">
<TextBlock Text="Border 5" />
</Border>
<Border
Height="300"
HorizontalAlignment="Stretch"
u:Anchor.AnchorId="anchor6"
Background="{DynamicResource SemiBlue1}">
<TextBlock Text="Border 6" />
</Border>
<Border
Height="300"
HorizontalAlignment="Stretch"
u:Anchor.AnchorId="anchor7"
Background="{DynamicResource SemiLightBlue1}">
<TextBlock Text="Border 7" />
</Border>
</StackPanel>
</ScrollViewer>
<u:Anchor
Grid.Column="1"
MinWidth="300"
ItemsSource="{Binding AnchorItems}"
TargetContainer="{Binding #container2}">
<u:Anchor.Styles>
<Style x:DataType="viewModels:AnchorItemViewModel" Selector="u|AnchorItem">
<Setter Property="AnchorId" Value="{Binding AnchorId}" />
<Setter Property="Content" Value="{Binding Header}" />
</Style>
</u:Anchor.Styles>
</u:Anchor>
</Grid>
</TabItem>
</TabControl>
</UserControl>

18
demo/Ursa.Demo/ViewModels/AnchorDemoViewModel.cs
View File

@@ -1,8 +1,24 @@
using System.Collections.Generic;
using CommunityToolkit.Mvvm.ComponentModel;
namespace Ursa.Demo.ViewModels;
public partial class AnchorDemoViewModel: ObservableObject
{
public List<AnchorItemViewModel> AnchorItems { get; } = new()
{
new AnchorItemViewModel { AnchorId = "anchor1", Header = "Anchor 1" },
new AnchorItemViewModel { AnchorId = "anchor2", Header = "Anchor 2" },
new AnchorItemViewModel { AnchorId = "anchor3", Header = "Anchor 3" },
new AnchorItemViewModel { AnchorId = "anchor4", Header = "Anchor 4" },
new AnchorItemViewModel { AnchorId = "anchor5", Header = "Anchor 5" },
new AnchorItemViewModel { AnchorId = "anchor6", Header = "Anchor 6" },
new AnchorItemViewModel { AnchorId = "anchor7", Header = "Anchor 7" },
};
}
public partial class AnchorItemViewModel: ObservableObject
{
[ObservableProperty] private string? _anchorId;
[ObservableProperty] private string? _header;
}

50
src/Ursa/Controls/Anchor/Anchor.cs
View File

@@ -3,7 +3,9 @@ using Avalonia.Animation;
using Avalonia.Animation.Easings;
using Avalonia.Controls;
using Avalonia.Controls.Primitives;
using Avalonia.Interactivity;
using Avalonia.Styling;
using Avalonia.VisualTree;
namespace Ursa.Controls;
@@ -18,11 +20,11 @@ public class Anchor: SelectingItemsControl
set => SetValue(TargetContainerProperty, value);
}
public static readonly AttachedProperty<string> AnchorIdProperty =
AvaloniaProperty.RegisterAttached<Anchor, Control, string>("AnchorId");
public static readonly AttachedProperty<string?> AnchorIdProperty =
AvaloniaProperty.RegisterAttached<Anchor, Visual, string?>("AnchorId");
public static void SetAnchorId(Control obj, string value) => obj.SetValue(AnchorIdProperty, value);
public static string GetAnchorId(Control obj) => obj.GetValue(AnchorIdProperty);
public static void SetAnchorId(Visual obj, string? value) => obj.SetValue(AnchorIdProperty, value);
public static string? GetAnchorId(Visual obj) => obj.GetValue(AnchorIdProperty);
protected override bool NeedsContainerOverride(object? item, int index, out object? recycleKey)
@@ -40,24 +42,16 @@ public class Anchor: SelectingItemsControl
{
if (TargetContainer is null)
return;
var target = TargetContainer.FindControl<Control>(anchorId);
if (target is null)
return;
var targetPosition = target.TranslatePoint(new Point(0, 0), TargetContainer);
if (targetPosition.HasValue)
{
TargetContainer.Offset = new Vector(0, targetPosition.Value.Y);
}
var target = TargetContainer.GetVisualDescendants().FirstOrDefault(a=>Anchor.GetAnchorId(a) == anchorId);
if (target is null) return;
ScrollToAnchor(target);
}
internal void ScrollToAnchor(Control target)
internal void ScrollToAnchor(Visual target)
{
if (TargetContainer is null)
return;
TargetContainer.Loaded += OnTargetLoaded;
var targetPosition = target.TranslatePoint(new Point(0, 0), TargetContainer);
if (targetPosition.HasValue)
{
@@ -95,5 +89,25 @@ public class Anchor: SelectingItemsControl
// TargetContainer.Offset = TargetContainer.Offset.WithY(TargetContainer.Offset.Y + targetPosition.Value.Y);
}
}
private void OnTargetLoaded(object sender, RoutedEventArgs e)
{
if (sender is ScrollViewer scrollViewer)
{
scrollViewer.Loaded -= OnTargetLoaded;
if (scrollViewer.Content is Visual target)
{
var anchorId = GetAnchorId(target);
if (!string.IsNullOrEmpty(anchorId))
{
ScrollToAnchor(anchorId);
}
}
}
}
public void InvalidatePositions()
{
}
}

14
src/Ursa/Controls/Anchor/AnchorItem.cs
View File

@@ -17,12 +17,12 @@ public class AnchorItem: ContentControl
set => SetValue(TargetProperty, value);
}
public static readonly StyledProperty<string?> AnchorNameProperty = AvaloniaProperty.Register<AnchorItem, string?>(
nameof(AnchorName));
public string? AnchorName
public static readonly StyledProperty<string?> AnchorIdProperty = AvaloniaProperty.Register<AnchorItem, string?>(
nameof(AnchorId));
public string? AnchorId
{
get => GetValue(AnchorNameProperty);
set => SetValue(AnchorNameProperty, value);
get => GetValue(AnchorIdProperty);
set => SetValue(AnchorIdProperty, value);
}
private Anchor? _root;
@@ -43,5 +43,9 @@ public class AnchorItem: ContentControl
{
_root.ScrollToAnchor(Target);
}
else if (!string.IsNullOrEmpty(AnchorId))
{
_root.ScrollToAnchor(AnchorId);
}
}
}