Lattice/Lattice.Example.DragDrop/MainWindow.xaml

<Window
    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">

    <Grid>
        <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>

                <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.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}">
                <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}"
                               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>
                </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>

            <!-- 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>
                    </StackPanel>
                </ScrollViewer>
            </Border>
        </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>