Доработан Docking

This commit is contained in:
2026-01-27 05:17:35 +03:00
parent 33abd94f6e
commit 584df249f6
99 changed files with 2270 additions and 12792 deletions

View File

@@ -2,269 +2,140 @@
x:Class="Lattice.Example.DragDrop.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:Lattice.Example.DragDrop"
xmlns:lattice="using:Lattice.UI.DragDrop.WinUI"
xmlns:muxc="using:Microsoft.UI.Xaml.Controls"
Title="Lattice Drag Drop Example">
Title="Drag Drop Demo"
>
<Grid>
<Grid Background="#F0F2F5">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<!-- Header -->
<Border Grid.Row="0"
Background="{ThemeResource Lattice.Brush.Accent}"
Padding="12">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<!-- Инструкция -->
<TextBlock Grid.Row="0"
Text="Просто перетащите элементы справа влево!"
FontSize="14" Margin="20" HorizontalAlignment="Center"
FontWeight="SemiBold"/>
<StackPanel Grid.Column="0" Orientation="Horizontal" Spacing="12">
<FontIcon Glyph="&#xE718;"
FontFamily="Segoe MDL2 Assets"
Foreground="{ThemeResource Lattice.Brush.Text.OnAccent}"/>
<TextBlock Text="Lattice Drag Drop Example"
FontSize="{ThemeResource Lattice.FontSize.Title}"
Foreground="{ThemeResource Lattice.Brush.Text.OnAccent}"
VerticalAlignment="Center"/>
</StackPanel>
<StackPanel Grid.Column="1" Orientation="Horizontal" Spacing="12">
<ToggleSwitch Header="Dark Mode"
OffContent="Light"
OnContent="Dark"
Toggled="OnThemeToggleToggled"/>
<Button Content="Stats"
Click="OnStatsButtonClick"
Style="{StaticResource AccentButtonStyle}"/>
</StackPanel>
</Grid>
</Border>
<!-- Main Content -->
<Grid Grid.Row="1" Margin="24">
<!-- Основное содержимое -->
<Grid Grid.Row="1" Margin="20">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="4"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<!-- Left Panel - Sources -->
<Border Grid.Column="0"
Background="{ThemeResource Lattice.Brush.Background.Primary}"
BorderBrush="{ThemeResource Lattice.Brush.Panel.Border}"
BorderThickness="{ThemeResource Lattice.BorderThickness.Panel}"
CornerRadius="{ThemeResource Lattice.CornerRadius.Panel}"
Padding="{ThemeResource Lattice.Spacing.Panel}">
<!-- ЦЕЛЕВАЯ ЗОНА (куда бросаем) -->
<Border Grid.Column="0"
Background="White"
CornerRadius="10"
BorderThickness="2"
BorderBrush="#4CAF50"
Padding="20"
Margin="0,0,10,0"
lattice:DragDropProperties.IsDropTarget="True">
<StackPanel>
<TextBlock Text="Drag Sources"
FontSize="{ThemeResource Lattice.FontSize.Title}"
FontWeight="{ThemeResource Lattice.FontWeight.Semibold}"
Margin="0,0,0,12"/>
<TextBlock Text="Drag items from here to the right panel"
FontSize="{ThemeResource Lattice.FontSize.Body}"
Foreground="{ThemeResource Lattice.Brush.Text.Secondary}"
<TextBlock Text="🟢 ЦЕЛЕВАЯ ЗОНА"
FontSize="16" FontWeight="Bold"
Foreground="#4CAF50"
Margin="0,0,0,15"/>
<TextBlock x:Name="DropInfoText"
Text="Бросьте сюда элементы"
FontSize="14"
Foreground="#666"
TextWrapping="Wrap"
Margin="0,0,0,16"/>
<!-- Items that can be dragged -->
<ItemsControl x:Name="SourceItemsControl">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Border Padding="12"
Margin="0,0,0,8"
Background="{ThemeResource Lattice.Brush.Background.Secondary}"
CornerRadius="{ThemeResource Lattice.CornerRadius.Small}"
BorderThickness="{ThemeResource Lattice.BorderThickness.Thin}"
BorderBrush="{ThemeResource Lattice.Brush.Border.Primary}"
lattice:DragDropProperties.IsDragSource="True"
lattice:DragDropProperties.DragData="{Binding}">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<FontIcon Grid.Column="0"
Glyph="&#xE7C5;"
FontFamily="Segoe MDL2 Assets"
Margin="0,0,12,0"
Foreground="{ThemeResource Lattice.Brush.Text.Secondary}"/>
<StackPanel Grid.Column="1" VerticalAlignment="Center">
<TextBlock Text="{Binding Name}"
FontSize="{ThemeResource Lattice.FontSize.Body}"
FontWeight="{ThemeResource Lattice.FontWeight.Medium}"/>
<TextBlock Text="{Binding Description}"
FontSize="{ThemeResource Lattice.FontSize.Caption}"
Foreground="{ThemeResource Lattice.Brush.Text.Secondary}"
TextWrapping="Wrap"/>
</StackPanel>
</Grid>
</Border>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
<!-- Custom drag source example -->
<Border Padding="12"
Margin="0,16,0,0"
Background="{ThemeResource Lattice.Brush.Background.Secondary}"
CornerRadius="{ThemeResource Lattice.CornerRadius.Small}"
BorderThickness="{ThemeResource Lattice.BorderThickness.Thin}"
BorderBrush="{ThemeResource Lattice.Brush.Border.Primary}"
x:Name="CustomDragSource">
<StackPanel>
<TextBlock Text="Custom Drag Source"
FontSize="{ThemeResource Lattice.FontSize.BodyStrong}"
FontWeight="{ThemeResource Lattice.FontWeight.Semibold}"/>
<TextBlock Text="Drag this custom control"
FontSize="{ThemeResource Lattice.FontSize.Caption}"
Foreground="{ThemeResource Lattice.Brush.Text.Secondary}"
Margin="0,4,0,0"/>
</StackPanel>
</Border>
HorizontalAlignment="Center"
VerticalAlignment="Center"/>
</StackPanel>
</Border>
<!-- Splitter (простой прямоугольник) -->
<Rectangle Grid.Column="1"
Fill="{ThemeResource Lattice.Brush.Splitter.Normal}"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch">
<Rectangle.ContextFlyout>
<MenuFlyout>
<MenuFlyoutItem Text="Reset Panels" Click="OnResetPanelsClick"/>
</MenuFlyout>
</Rectangle.ContextFlyout>
</Rectangle>
<!-- ЗОНА С ЭЛЕМЕНТАМИ (откуда тянем) -->
<StackPanel Grid.Column="1"
Background="White"
CornerRadius="10"
Padding="20"
Margin="10,0,0,0">
<TextBlock Text="📦 ЭЛЕМЕНТЫ ДЛЯ ПЕРЕТАСКИВАНИЯ"
FontSize="16" FontWeight="Bold"
Foreground="#2196F3"
Margin="0,0,0,15"/>
<!-- 1. TextBlock элемент -->
<Border Padding="15"
Background="#E3F2FD"
CornerRadius="8"
BorderThickness="1"
BorderBrush="#90CAF9"
Margin="0,0,0,10"
lattice:DragDropProperties.IsDragSource="True"
lattice:DragDropProperties.DragData="TextBlock Element">
<TextBlock Text="📝 Это TextBlock"
FontSize="14"
Foreground="#1565C0"
FontWeight="SemiBold"/>
</Border>
<!-- 2. Border элемент -->
<Border Padding="15"
Background="#E8F5E9"
CornerRadius="8"
BorderThickness="1"
BorderBrush="#A5D6A7"
Margin="0,0,0,10"
lattice:DragDropProperties.IsDragSource="True"
lattice:DragDropProperties.DragData="Border Element">
<!-- Right Panel - Targets -->
<Border Grid.Column="2"
Background="{ThemeResource Lattice.Brush.Background.Primary}"
BorderBrush="{ThemeResource Lattice.Brush.Panel.Border}"
BorderThickness="{ThemeResource Lattice.BorderThickness.Panel}"
CornerRadius="{ThemeResource Lattice.CornerRadius.Panel}"
Padding="{ThemeResource Lattice.Spacing.Panel}"
lattice:DragDropProperties.IsDropTarget="True"
x:Name="DropTargetArea">
<ScrollViewer>
<StackPanel>
<TextBlock Text="Drop Targets"
FontSize="{ThemeResource Lattice.FontSize.Title}"
FontWeight="{ThemeResource Lattice.FontWeight.Semibold}"
Margin="0,0,0,12"/>
<TextBlock Text="Drop items here"
FontSize="{ThemeResource Lattice.FontSize.Body}"
Foreground="{ThemeResource Lattice.Brush.Text.Secondary}"
TextWrapping="Wrap"
Margin="0,0,0,16"/>
<!-- Dropped Items Display -->
<ItemsControl x:Name="DroppedItemsControl">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Border Padding="12"
Margin="0,0,0,8"
Background="{ThemeResource Lattice.Brush.Background.Secondary}"
CornerRadius="{ThemeResource Lattice.CornerRadius.Small}"
BorderThickness="{ThemeResource Lattice.BorderThickness.Thin}"
BorderBrush="{ThemeResource Lattice.Brush.Border.Primary}">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<FontIcon Grid.Column="0"
Glyph="&#xE8FB;"
FontFamily="Segoe MDL2 Assets"
Margin="0,0,12,0"
Foreground="{ThemeResource Lattice.Brush.Success}"/>
<StackPanel Grid.Column="1" VerticalAlignment="Center">
<TextBlock Text="{Binding Name}"
FontSize="{ThemeResource Lattice.FontSize.Body}"
FontWeight="{ThemeResource Lattice.FontWeight.Medium}"/>
<TextBlock Text="{Binding Description}"
FontSize="{ThemeResource Lattice.FontSize.Caption}"
Foreground="{ThemeResource Lattice.Brush.Text.Secondary}"
TextWrapping="Wrap"/>
</StackPanel>
<Button Grid.Column="2"
Content="Remove"
Click="OnRemoveItemClick"
Margin="12,0,0,0"
Tag="{Binding}"/>
</Grid>
</Border>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
<!-- Drop Instructions -->
<Border Padding="16"
Margin="0,16,0,0"
Background="{ThemeResource Lattice.Brush.Drop.Preview}"
CornerRadius="{ThemeResource Lattice.CornerRadius.Medium}"
BorderThickness="{ThemeResource Lattice.BorderThickness.Medium}"
BorderBrush="{ThemeResource Lattice.Brush.Accent}"
x:Name="DropInstructionsBorder">
<StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">
<FontIcon Glyph="&#xE896;"
FontFamily="Segoe MDL2 Assets"
FontSize="24"
Foreground="{ThemeResource Lattice.Brush.Accent}"
HorizontalAlignment="Center"
Margin="0,0,0,12"/>
<TextBlock Text="Drop items here"
FontSize="{ThemeResource Lattice.FontSize.BodyStrong}"
FontWeight="{ThemeResource Lattice.FontWeight.Medium}"
Foreground="{ThemeResource Lattice.Brush.Accent}"
HorizontalAlignment="Center"/>
<TextBlock Text="Drag and drop items from the left panel"
FontSize="{ThemeResource Lattice.FontSize.Caption}"
Foreground="{ThemeResource Lattice.Brush.Accent}"
HorizontalAlignment="Center"
Opacity="0.7"/>
</StackPanel>
</Border>
<TextBlock Text="🟩 Это Border"
FontSize="14"
Foreground="#2E7D32"
FontWeight="SemiBold"/>
<TextBlock Text="С рамкой и заливкой"
FontSize="12"
Foreground="#666"
Margin="0,5,0,0"/>
</StackPanel>
</ScrollViewer>
</Border>
</Border>
<!-- 3. Grid элемент -->
<Border Padding="15"
Background="#FFF3E0"
CornerRadius="8"
BorderThickness="1"
BorderBrush="#FFCC80"
lattice:DragDropProperties.IsDragSource="True"
lattice:DragDropProperties.DragData="Grid Element">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<!-- Иконка -->
<TextBlock Grid.Column="0"
Text="🔲"
FontSize="18"
Margin="0,0,10,0"
VerticalAlignment="Center"/>
<!-- Контент -->
<StackPanel Grid.Column="1">
<TextBlock Text="Это Grid"
FontSize="14"
Foreground="#EF6C00"
FontWeight="SemiBold"/>
<TextBlock Text="С несколькими колонками"
FontSize="12"
Foreground="#666"/>
</StackPanel>
</Grid>
</Border>
</StackPanel>
</Grid>
<!-- Status Bar -->
<Border Grid.Row="2"
Background="{ThemeResource Lattice.Brush.Background.Secondary}"
BorderThickness="1,0,0,0"
BorderBrush="{ThemeResource Lattice.Brush.Border.Primary}"
Padding="12">
<Grid>
<TextBlock x:Name="StatusText"
Text="Ready"
VerticalAlignment="Center"
Foreground="{ThemeResource Lattice.Brush.Text.Secondary}"/>
<StackPanel Orientation="Horizontal" Spacing="12"
HorizontalAlignment="Right">
<TextBlock x:Name="DragStatsText"
Text="Drag operations: 0"
Foreground="{ThemeResource Lattice.Brush.Text.Secondary}"/>
<TextBlock Text="|"
Foreground="{ThemeResource Lattice.Brush.Text.Disabled}"/>
<TextBlock x:Name="DropStatsText"
Text="Dropped items: 0"
Foreground="{ThemeResource Lattice.Brush.Text.Secondary}"/>
</StackPanel>
</Grid>
</Border>
</Grid>
</Window>